From 9bfdf6ecef01397978c140aa4fbd8c4840d894fb Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期二, 15 八月 2023 13:04:35 +0800
Subject: [PATCH] 异常页面表格列的颜色
---
src/views/IndexView.vue | 623 +++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 452 insertions(+), 171 deletions(-)
diff --git a/src/views/IndexView.vue b/src/views/IndexView.vue
index 4bd8f60..58ef864 100644
--- a/src/views/IndexView.vue
+++ b/src/views/IndexView.vue
@@ -1,90 +1,210 @@
<!-- 瀹炴椂鐩戞祴 -->
<script>
-import axiosInstance from '../utils/request.js';
+import axiosInstanceInstance from '../utils/request.js';
// 寮傛缁勪欢
const DashBoard = defineAsyncComponent(() =>
import('../sfc/DashboardChart.vue')
-)
+);
export default {
- components:{
+ components: {
DashBoard
},
data() {
return {
+ totalData: [],
+ // 淇濆瓨璁剧疆
+ save: false,
// 榛樿鎵撳紑鐨勬姌鍙犻潰鏉�
- activeNames:'1',
- // isShow:false,
- // 瑕佸睍绀虹殑浠〃鐩樻暟閲�
- // totalCharts: 0,
- // 瀹炴椂鏇存柊闂撮殧 3绉�
- timeInterval:60000,
+ activeNames: '1',
+ // 瀹炴椂鏇存柊闂撮殧 60绉�
+ timeInterval: 60000,
// 澶栭儴璁惧
outside: {
+ // 鎼滅储
+ searchText: '',
+ isall: false,
+ isLoading: false,
// 璁惧淇℃伅琛ㄧ殑鏁版嵁
shopnames: [],
+ // 褰撳墠灞曠ず鐨勫閫夋缁勫��
+ displayedShopnames: [],
+ // 褰撳墠椤�
+ currentPage: 1,
+ // 姣忛〉鏄剧ず鐨勬暟閲�
+ pageSize: 5,
+ // 鏄惁宸插姞杞藉畬鎵�鏈夋暟鎹�
+ allDataLoaded: false,
+ // 鏄惁鍏ㄩ��
checkAll: false,
isIndeterminate: false,
// 宸查�夋嫨搴楅摵
checkedShops: [],
-
//杩斿洖閫夋嫨鐨勬墍鏈夊簵閾虹殑鏁版嵁
realTimeData: []
},
// 鍐呴儴璁惧
inner: {
+ searchText: '',
+ isall: false,
+ isLoading: false,
// 鍐呴儴鎺ュ彛杩斿洖鐨勬墍鏈夋暟鎹�
- getData:[],
+ getData: [],
// 閫変腑鐨勫簵閾哄搴斿叏閮ㄥ瓧娈典俊鎭�
- inFumeValue:[],
- // 搴楅摵鍚嶅瓧
+ inFumeValue: [],
+ // 鎵�鏈夊簵閾哄悕瀛�
shopnames: [],
+ // 褰撳墠灞曠ず鐨勫閫夋缁勫��
+ displayedShopnames: [],
+ // 褰撳墠椤�
+ currentPage: 1,
+ // 姣忛〉鏄剧ず鐨勬暟閲�
+ pageSize: 2,
+ // 鏄惁宸插姞杞藉畬鎵�鏈夋暟鎹�
+ allDataLoaded: false,
+ // 鏄惁鍏ㄩ��
checkAll: false,
isIndeterminate: false,
// 宸查�夋嫨搴楅摵
checkedShops: []
- },
+ }
- // chartInstance: []
- // // 鍐呴儴璁惧
- // devices: []
};
},
+
methods: {
//鑾峰彇鎵�鏈夊簵閾哄悕瀛�
getDeviceInfo() {
- // 鑾峰彇澶栭儴璁惧鐨勫簵閾哄悕绉�
- axiosInstance.get('/fume/device').then((result) => {
+ // 鑾峰彇鎵�鏈夊閮ㄨ澶囩殑搴楅摵鍚嶇О
+ axiosInstanceInstance.get('/fume/device').then((result) => {
result.data.data.forEach((item) => {
this.outside.shopnames.push(item.diName);
});
+ this.outside.displayedShopnames = this.outside.shopnames.slice(
+ 0,
+ this.outside.pageSize
+ );
+ if (this.outside.shopnames.length <= this.outside.pageSize) {
+ this.outside.allDataLoaded = true;
+ }
});
-
//浠庡唴閮ㄦ帴鍙ｈ幏鍙栧疄鏃舵暟鎹殑鎵�鏈夊簵閾哄悕绉�
- axiosInstance
+ axiosInstanceInstance
.get('https://fyami.com.cn/device/min/value/real_time', {
params: { page: 1, per_page: 20 }
})
.then((result) => {
// 淇濆瓨鍐呴儴鎺ュ彛鑾峰彇鐨勬墍鏈変俊鎭�
- this.getData = result.data.data
+ this.getData = result.data.data;
result.data.data.forEach((item) => {
-
this.inner.shopnames.push(item.siteName);
});
+ this.inner.displayedShopnames = this.inner.shopnames.slice(
+ 0,
+ this.inner.pageSize
+ );
+ if (this.inner.shopnames.length <= this.inner.pageSize) {
+ this.inner.allDataLoaded = true;
+ }
});
+ },
+ loadMore() {
+ this.outside.isLoading = true;
+ setTimeout(() => {
+ const startIndex = this.outside.currentPage * this.outside.pageSize;
+ const endIndex = startIndex + this.outside.pageSize;
+ this.outside.displayedShopnames =
+ this.outside.displayedShopnames.concat(
+ this.outside.shopnames.slice(startIndex, endIndex)
+ );
+ this.outside.currentPage++;
+ if (
+ this.outside.displayedShopnames.length ===
+ this.outside.shopnames.length
+ ) {
+ this.outside.allDataLoaded = true;
+ this.outside.isall = true;
+ }
+ this.outside.isLoading = false;
+ }, 100);
+ },
+ loadMoreInner() {
+ this.inner.isLoading = true;
+ setTimeout(() => {
+ const startIndex = this.inner.currentPage * this.inner.pageSize;
+ const endIndex = startIndex + this.inner.pageSize;
+ this.inner.displayedShopnames = this.inner.displayedShopnames.concat(
+ this.inner.shopnames.slice(startIndex, endIndex)
+ );
+ this.inner.currentPage++;
+ if (
+ this.inner.displayedShopnames.length === this.inner.shopnames.length
+ ) {
+ this.inner.allDataLoaded = true;
+ this.inner.isall = true;
+ }
+ this.inner.isLoading = false;
+ }, 100);
+ },
+ // 杩囨护鏁版嵁
+ filterData(keyword) {
+ return this.outside.shopnames.filter((item) => item.includes(keyword));
+ },
+
+ // 澶勭悊鎼滅储
+ handleSearch() {
+ if (this.outside.searchText != '') {
+ this.outside.displayedShopnames = this.filterData(
+ this.outside.searchText
+ );
+ this.outside.currentPage = 1; // 閲嶇疆椤电爜
+ this.outside.allDataLoaded =
+ this.outside.displayedShopnames === this.outside.shopnames.length;
+ } else {
+ // 鍔犺浇榛樿鏁伴噺鐨�
+ this.outside.displayedShopnames = this.outside.shopnames.slice(
+ 0,
+ this.outside.pageSize
+ );
+ if (this.outside.shopnames.length <= this.outside.pageSize) {
+ this.outside.allDataLoaded.value = true;
+ }
+ this.outside.checkedShops = [];
+ }
+ },
+
+ // 澶勭悊鎼滅储
+ handleSearchInner() {
+ if (this.inner.searchText != '') {
+ this.inner.displayedShopnames = this.filterData(this.inner.searchText);
+ this.inner.currentPage = 1; // 閲嶇疆椤电爜
+ this.inner.allDataLoaded =
+ this.inner.displayedShopnames === this.inner.shopnames.length;
+ } else {
+ // 鍔犺浇榛樿鏁伴噺鐨�
+ this.inner.displayedShopnames = this.inner.shopnames.slice(
+ 0,
+ this.inner.pageSize
+ );
+ if (this.inner.shopnames.length <= this.inner.pageSize) {
+ this.inner.allDataLoaded.value = true;
+ }
+ this.inner.checkedShops = [];
+ }
},
// 澶栭儴璁惧鍏ㄩ��
handleCheckAllChangeOutside(val) {
- this.outside.checkedShops = val ? this.outside.shopnames : [];
+ this.outside.checkedShops = val ? this.outside.displayedShopnames : [];
this.outside.isIndeterminate = false;
},
handleCheckedCitiesChangOutside(value) {
const checkedCount = value.length;
- this.outside.checkAll = checkedCount === this.outside.shopnames.length;
+ this.outside.checkAll =
+ checkedCount === this.outside.displayedShopnames.length;
this.outside.isIndeterminate =
- checkedCount > 0 && checkedCount < this.outside.shopnames.length;
+ checkedCount > 0 &&
+ checkedCount < this.outside.displayedShopnames.length;
},
// 鍐呴儴璁惧鍏ㄩ��
@@ -100,76 +220,86 @@
},
// 鍒ゆ柇涓�涓暟缁勬槸鍚﹀寘鍚鍏冪礌
- hasElement(array, element) {
+ hasElement(array, element) {
return array.includes(element);
},
-
//鏍规嵁鎵�閫夊簵閾烘眰璇峰苟娓叉煋浠〃鐩�
request() {
- if(this.outside.checkedShops.length!=0){
+ // 澶栭儴璁惧
+ if (this.outside.checkedShops.length != 0) {
let temp = this.outside.checkedShops.join();
let params = {};
if (this.outside.checkedShops.length != 0) {
params['shops'] = temp;
}
- axiosInstance.get('/fume/lastest', { params: params }).then((result) => {
- this.outside.realTimeData = result.data.data;
- console.log('66', this.outside.realTimeData);
- // console.log('闀垮害涓猴細',this.outside.realTimeData.length);
- // 娓叉煋鎶樼嚎鍥�
- // this.updateCharts();
- });
+ axiosInstanceInstance
+ .get('/fume/lastest', { params: params })
+ .then((result) => {
+ this.outside.realTimeData = result.data.data;
+ console.log('66', this.outside.realTimeData);
+ // console.log('闀垮害涓猴細',this.outside.realTimeData.length);
+ // 娓叉煋鎶樼嚎鍥�
+ // this.updateCharts();
+ });
}
-
+
// 閫夋嫨浜嗗唴閮ㄨ澶�
- if(this.inner.checkedShops.length!=0){
+ if (this.inner.checkedShops.length != 0) {
// 娓呯┖鏁版嵁
- this.inner.inFumeValue=[]
- this.getData.forEach(item=>{
- let itemOne = item.siteName
+ this.inner.inFumeValue = [];
+ this.getData.forEach((item) => {
+ let itemOne = item.siteName;
// 鎷垮埌閫変腑鐨勫簵閾哄搴旂殑娴撳害鍊�
- if(this.hasElement(this.inner.checkedShops,itemOne)){
- this.inner.inFumeValue.push(item)
+ if (this.hasElement(this.inner.checkedShops, itemOne)) {
+ this.inner.inFumeValue.push(item);
}
- })
+ });
console.log(this.inner.inFumeValue);
}
+
+ // 鍚堝苟
+ setTimeout(() => {
+ // 璇曠偣璁惧鎺掑湪鍓嶉潰
+ this.totalData = [
+ ...this.inner.inFumeValue,
+ ...this.outside.realTimeData
+ ];
+ console.log('鎬婚�夋暟鎹�', this.totalData);
+ console.log('闀垮害涓猴細', this.totalData.length);
+ }, 200);
console.log('璋冪敤浜�');
},
// 鐐瑰嚮鎸夐挳瑙﹀彂
show() {
// 褰撳彇娑堥�夋嫨鏃讹紝闃叉鍥惧舰杩樹繚鐣欏湪椤甸潰銆�
- if(this.outside.checkedShops.length==0){
- this.outside.realTimeData = []
+ if (this.outside.checkedShops.length == 0) {
+ this.outside.realTimeData = [];
}
- if(this.inner.checkedShops.length == 0){
- this.inner.inFumeValue = []
+ if (this.inner.checkedShops.length == 0) {
+ this.inner.inFumeValue = [];
}
// 鏍规嵁鎵�閫夌殑搴楅摵璇锋眰鏁版嵁
this.request();
setInterval(() => {
this.request();
}, this.timeInterval);
- // 寰楀埌瑕佸睍绀虹殑浠〃鐩樻暟閲�
- // this.totalCharts =
- // this.outside.checkedShops.length + this.inner.checkedShops.length;
}
},
mounted() {
// 鑾峰彇鎵�鏈夊簵閾哄悕瀛�
this.getDeviceInfo();
+ // 浼樺厛灞曠ず娴忚鍣ㄧ紦瀛樹腑鐨�
+ // this.getOutsideData()
}
-}
+};
</script>
-
<template>
-
<div>
- <el-collapse v-model="activeNames" >
- <el-collapse-item name="1">
+ <el-collapse v-model="activeNames">
+ <el-collapse-item name="1">
<template #title>
<el-tooltip
class="box-item"
@@ -177,152 +307,249 @@
content="鐐瑰嚮鍙姌鍙�"
placement="right-start"
>
- <h2>閫夋嫨鏌愪釜璁惧鐨勫疄鏃舵暟鎹細</h2>
+ <h2 style="margin-left: 10px">鐩戞帶閰嶇疆</h2>
</el-tooltip>
</template>
- <el-card shadow="always" class="form-card">
- <el-form label-width="120px">
- <el-form-item label="澶栭儴璁惧">
- <el-checkbox
- v-model="outside.checkAll"
- :indeterminate="outside.isIndeterminate"
- @change="handleCheckAllChangeOutside"
- >鍏ㄩ��</el-checkbox
- >
- <el-checkbox-group
- v-model="outside.checkedShops"
- @change="handleCheckedCitiesChangOutside"
- >
- <el-checkbox
- v-for="shop in outside.shopnames"
- :key="shop"
- :label="shop"
- >{{ shop }}
- </el-checkbox>
- </el-checkbox-group>
- </el-form-item>
- <el-form-item>
- <div>宸查�夋嫨澶栭儴璁惧鏁伴噺涓猴細{{outside.checkedShops.length}}</div>
- </el-form-item>
+ <el-card shadow="always" class="form-card">
+ <h1>鐩戞祴鐐归厤缃�</h1>
+ <br />
+ <el-form label-width="120px">
+ <el-form-item label="璇曠偣璁惧">
+ <el-checkbox
+ v-model="inner.checkAll"
+ :indeterminate="inner.isIndeterminate"
+ @change="handleCheckAllChangeInner"
+ >鍏ㄩ��</el-checkbox
+ >
+ <el-checkbox-group
+ v-model="inner.checkedShops"
+ @change="handleCheckedCitiesChangeInner"
+ class="inner-checkbox-group"
+ >
+ <el-checkbox
+ v-for="shop in inner.displayedShopnames"
+ :key="shop"
+ :label="shop"
+ >{{ shop }}
+ </el-checkbox>
+ </el-checkbox-group>
+ </el-form-item>
+ <div class="input-search">
+ <el-input
+ type="text"
+ v-model="inner.searchText"
+ placeholder="鎼滅储搴楅摵鍚嶇О"
+ @input="handleSearchInner"
+ />
+ </div>
- <el-form-item label="鍐呴儴璁惧">
- <el-checkbox
- v-model="inner.checkAll"
- :indeterminate="inner.isIndeterminate"
- @change="handleCheckAllChangeInner"
- >鍏ㄩ��</el-checkbox
- >
- <el-checkbox-group
- v-model="inner.checkedShops"
- @change="handleCheckedCitiesChangeInner"
- class="inner-checkbox-group"
- >
-
- <el-checkbox v-for="shop in inner.shopnames" :key="shop" :label="shop"
- >{{ shop }}
- </el-checkbox>
- </el-checkbox-group>
- </el-form-item>
- <el-form-item>
- <div>宸查�夋嫨鍐呴儴璁惧鏁伴噺涓猴細{{inner.checkedShops.length}}</div>
- </el-form-item>
- <el-form-item >
-
- <div class="time-interval">
- 瀹炴椂鏇存柊闂撮殧涓猴細{{timeInterval/1000}}绉�
- </div>
-
- </el-form-item>
- </el-form>
- </el-card>
-</el-collapse-item>
- </el-collapse>
+ <div>
+ <el-button
+ type="primary"
+ v-if="!inner.allDataLoaded && !inner.isLoading && !inner.isall"
+ @click="loadMoreInner"
+ >鍔犺浇鏇村</el-button
+ >
+ <el-button
+ type="primary"
+ loading
+ v-if="!inner.allDataLoaded && inner.isLoading"
+ @click="loadMoreInner"
+ >鍔犺浇鏇村</el-button
+ >
+ <div>宸查�夋嫨璇曠偣璁惧鏁伴噺涓猴細{{ inner.checkedShops.length }}</div>
+ </div>
+ <br />
+ <hr />
+ <br />
+
+ <el-form-item label="鍏朵粬璁惧">
+ <el-checkbox
+ v-model="outside.checkAll"
+ :indeterminate="outside.isIndeterminate"
+ @change="handleCheckAllChangeOutside"
+ >鍏ㄩ��</el-checkbox
+ >
+
+ <el-checkbox-group
+ v-model="outside.checkedShops"
+ @change="handleCheckedCitiesChangOutside"
+ >
+ <el-checkbox
+ v-for="shop in outside.displayedShopnames"
+ :key="shop"
+ :label="shop"
+ >{{ shop }}
+ </el-checkbox>
+ </el-checkbox-group>
+ </el-form-item>
+
+ <div class="input-search">
+ <el-input
+ type="text"
+ v-model="outside.searchText"
+ placeholder="鎼滅储搴楅摵鍚嶇О"
+ @input="handleSearch"
+ />
+ </div>
+
+ <div>
+ <el-button
+ type="primary"
+ v-if="
+ !outside.allDataLoaded && !outside.isLoading && !outside.isall
+ "
+ @click="loadMore"
+ >鍔犺浇鏇村</el-button
+ >
+ <el-button
+ type="primary"
+ loading
+ v-if="!outside.allDataLoaded && outside.isLoading"
+ @click="loadMore"
+ >鍔犺浇鏇村</el-button
+ >
+ <div>宸查�夋嫨鍏朵粬璁惧鏁伴噺涓猴細{{ outside.checkedShops.length }}</div>
+ </div>
+ <!-- <el-form-item > -->
+
+ <div class="time-interval">
+ 瀹炴椂鏇存柊闂撮殧涓猴細{{ timeInterval / 1000 }}绉�
+ </div>
+
+ <!-- </el-form-item> -->
+ </el-form>
+ </el-card>
+ </el-collapse-item>
+ </el-collapse>
</div>
-
<div>
<el-tooltip
- class="box-item"
- effect="dark"
- content="鐐瑰嚮灞曠ず瀹炴椂鏁版嵁"
- placement="top-start"
- >
- <el-button type="success" @click="show"> 灞曠ず </el-button>
- </el-tooltip>
+ class="box-item"
+ effect="dark"
+ content="鐐瑰嚮灞曠ず瀹炴椂鏁版嵁"
+ placement="top-start"
+ >
+ <el-button type="success" @click="show" style="margin-left: 10px">
+ 璁剧疆
+ </el-button>
+ </el-tooltip>
+ <el-switch
+ v-model="save"
+ class="save-switch"
+ active-text="淇濆瓨璁剧疆"
+ inactive-text="涓嶄繚瀛樿缃�"
+ >
+ </el-switch>
</div>
+ <div>
+ <el-row :gutter="20">
+ <el-col
+ :span="6"
+ v-for="(device, index) in totalData"
+ :key="device.mvStatCode"
+ >
+ <!-- 鍐呴儴璁惧 -->
+ <el-card v-if="index < inner.inFumeValue.length" class="card-font-color" height="1900px">
+ <template #header>
+ <div class="card-header">{{ device.siteName }}
+ <img src="@/assets/inner_device.jpg" class="icon-inner"/>
+ </div>
+
+ </template>
+ <div class="report-time-text">鏁版嵁鍙戝竷鏃堕棿锛歿{ device.time }}</div>
+ <DashBoard :data="device.value"></DashBoard>
- <!-- 浠〃鐩� -->
- <!-- <div class="charts-container" v-for="(device,index) in outside.realTimeData" :key="device.mvStatCode">
- <div ref="chartsOutside" class="echarts" :id="`chartAP-${index}`"></div>
- </div> -->
-<h3 v-show="outside.realTimeData.length" class="outside-leble">澶栭儴璁惧锛�</h3>
-<div v-if="outside.realTimeData">
- <el-row :gutter="20">
- <el-col :span="6" v-for="device in outside.realTimeData" :key="device.mvStatCode">
- <el-card>
- <template #header>
- <div class="card-header">{{ device.diName }}</div>
- </template>
- <DashBoard :data="device.mvFumeConcentration2"></DashBoard>
- <div>璁惧缂栧彿锛歿{ device.mvStatCode }}</div>
- <hr class="divider-margin"/>
- <divr class="data">椋庢満鐢垫祦(A)锛歿{ device.mvFanElectricity}} </divr>
- <hr class="divider-margin">
- <div class="data">鍑�鍖栧櫒鐢垫祦(A)锛歿{ device.mvPurifierElectricity}}</div>
- <hr class="divider-margin"/>
- <div>浜х敓鏃堕棿:{{ device.mvDataTime }}</div>
- <div class="status" :class="{'exceed': device.mvFumeConcentration2 >= 1}"> {{ device.mvFumeConcentration2 >= 1 ? '瓒呮爣' : '' }}</div>
- <!-- <div class="status1" :class="{'exceed1': device.mvFumeConcentration2 < 1}"> {{ device.mvFumeConcentration2 < 1 ? '鏈秴鏍�' : '' }}</div> -->
- </el-card>
- </el-col>
- </el-row>
-</div>
+ <div >璁惧缂栧彿锛歿{ device.mnCode }}</div>
+ <div class="horizontal-line"></div>
+
+ <div class="status" :class="{ exceed: device.value > 1 }">
+ {{ device.value >= 1 ? '瓒呮爣' : '' }}
+ </div>
+ <br />
+ <br />
+ <br />
+ </el-card>
+ <!-- 澶栭儴璁惧 -->
+ <el-card v-else class="card-font-color">
+ <template #header>
+ <div class="card-header">
+ {{ device.diName }}
+ </div>
+ </template>
+ <div class="report-time-text">鏁版嵁鍙戝竷鏃堕棿锛歿{ device.mvDataTime }}</div>
+ <DashBoard :data="device.mvFumeConcentration2"></DashBoard>
-<hr v-show="outside.realTimeData.length && inner.inFumeValue.length" class="line-marign"/>
-<h3 v-show="inner.inFumeValue.length">鍐呴儴璁惧锛�</h3>
-<div v-if="inner.inFumeValue">
- <el-row :gutter="20">
- <el-col :span="6" v-for="device in inner.inFumeValue" :key="device.mnCode">
- <el-card>
- <template #header>
- <div class="card-header">{{ device.siteName }}</div>
- </template>
- <DashBoard :data="device.value"></DashBoard>
- <div>璁惧缂栧彿锛歿{ device.mnCode }}</div>
- <hr class="divider-margin"/>
- <div>浜х敓鏃堕棿:{{ device.time }}</div>
- <div class="status" :class="{'exceed': device.value > 1}"> {{ device.value >= 1 ? '瓒呮爣' : '' }}</div>
- <!-- <div class="status1" :class="{'exceed1': device.value < 1}"> {{ device.value < 1 ? '鏈秴鏍�' : '' }}</div> -->
- </el-card>
- </el-col>
- </el-row>
-</div>
+ <div class="imag-container">
+ <img src="@/assets/wind.jpg" class="image"/>
+ <span class="chart-below-text"> 椋庢満鐢垫祦(A)锛歿{ device.mvFanElectricity }} </span>
+
+ <span class="chart-below-text2">
+ <img src="@/assets/purifier.jpg" class="image"/>
+ 鍑�鍖栧櫒鐢垫祦(A)锛歿{ device.mvPurifierElectricity }}
+ </span>
+ </div>
+ <div class="horizontal-line"></div>
+ <div>璁惧缂栧彿锛歿{ device.mvStatCode }}</div>
+
+ <div class="horizontal-line"></div>
+
+ <div>璁惧渚涘簲鍟嗭細{{ device.diSupplier }}</div>
+ <div
+ class="status"
+ :class="{ exceed: device.mvFumeConcentration2 >= 1 }"
+ >
+ {{ device.mvFumeConcentration2 >= 1 ? '瓒呮爣' : '' }}
+ </div>
+ </el-card>
+ </el-col>
+ </el-row>
+ </div>
</template>
<style lang="scss" scoped>
+
+.time-interval {
+ display: flex;
+ justify-content: right;
+ font-size: 16px;
+}
.form-card {
margin: 20px 10px;
// width: 96%;
- border:1px solid #ebeef5;
+ border: 1px solid #ebeef5;
border-radius: 4px;
+
}
.inner-checkbox-group {
margin-left: 15px;
}
.el-card {
margin-bottom: 10px;
+ border-radius: 15px;
+ margin-left: 5px;
}
.card-header {
// display: flex;
// align-items: center;
// position: center;
text-align: center;
+ position: relative;
}
+.card-header-item {
+ display: flex;
+ text-align: right;
+}
+
.outside-leble {
+ margin-top: 10px;
+}
+.inner-leble {
margin-top: 10px;
}
// 鍒嗗壊绾�
@@ -332,11 +559,26 @@
.el-dialog {
width: 700px;
}
+.dashBorder-area {
+ margin-left: 10px;
+}
.dashboard {
margin-bottom: 20px;
border: #1de01d;
}
-
+.chart-below-text2{
+ float: right;
+}
+.image {
+ height: 18px;
+}
+.icon-inner {
+ position: relative;
+ top: -20px;
+ right: -115px;
+ width: 50px;
+ height: 50px;
+}
.dashboard-title {
font-size: 20px;
text-align: center;
@@ -344,15 +586,25 @@
background-color: #f5f7fa;
}
-.echarts {
- height: 300px;
+.report-time-text {
+ font-size: 12px;
+ color: #999999;
}
+
+.card-font-color {
+ color: #000000;
+}
+
+
+
+
/* 瓒呮爣 鏂囧瓧鏁堟灉*/
.status {
font-size: 18px;
color: #ff4d4f;
font-weight: bold;
+ margin-top: 5px;
}
.exceed {
@@ -379,6 +631,35 @@
}
// 鍒嗗壊绾夸笂涓嬭窛绂�
.divider-margin {
- margin: 3px 0px ;
+ margin: 10px 0px;
+ border: 1px solid gray;
+}
+
+.el-input {
+ width: calc(100% / 6);
+ // margin-left: 70px;
+}
+
+.save-switch {
+ margin-top: 20px;
+ margin-left: 20px;
+}
+:deep() .el-card_body {
+ padding: 0px;
+ margin: 0px;
+}
+.horizontal-line {
+ position: relative;
+ height: 1px;
+ margin: 10px 0px;
+}
+.horizontal-line::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 1px;
+ background-color: rgb(221, 217, 217);
}
</style>
--
Gitblit v1.9.3