|
|
@@ -1,6 +1,15 @@
|
|
|
<template>
|
|
|
<section class="mainbox">
|
|
|
- <div class="Site-details">
|
|
|
+ <div
|
|
|
+ class="Site-details"
|
|
|
+ :style="
|
|
|
+ activeName === 'first'
|
|
|
+ ? 'height: 684px;'
|
|
|
+ : activeName === 'third'
|
|
|
+ ? 'height: 670px;'
|
|
|
+ : 'height: 710px;'
|
|
|
+ "
|
|
|
+ >
|
|
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
<el-tab-pane label="实时数据" name="first">
|
|
|
<el-tabs
|
|
|
@@ -84,12 +93,140 @@
|
|
|
</el-tabs>
|
|
|
<el-button type="primary" class="primary">刷新</el-button>
|
|
|
</el-tab-pane>
|
|
|
- <el-tab-pane label="历史趋势" name="second" style="top: 1px"
|
|
|
- >历史趋势</el-tab-pane
|
|
|
- >
|
|
|
- <el-tab-pane label="数据报表" name="third" style="top: 2px"
|
|
|
- >数据报表</el-tab-pane
|
|
|
- >
|
|
|
+ <el-tab-pane label="历史趋势" name="second" style="top: 1px">
|
|
|
+ <el-tabs
|
|
|
+ v-model="se_content"
|
|
|
+ @tab-click="handleClick2"
|
|
|
+ class="se-content"
|
|
|
+ >
|
|
|
+ <el-tab-pane label="电流" name="flow" class="flow"> </el-tab-pane>
|
|
|
+ <el-tab-pane label="功率" name="power" class="power"> </el-tab-pane>
|
|
|
+ <el-tab-pane label="电度" name="degree" class="degree">
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="电压" name="voltage" class="voltage">
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="温度" name="temperature" class="temperature">
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="频率" name="frequency" class="frequency">
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane
|
|
|
+ label="功率因数"
|
|
|
+ name="power_factor"
|
|
|
+ class="power_factor"
|
|
|
+ >
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane
|
|
|
+ label="谐波电流有效值"
|
|
|
+ name="hc_valid_value"
|
|
|
+ class="hc_valid_value"
|
|
|
+ >
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane
|
|
|
+ label="通讯参数"
|
|
|
+ name="c_parameters"
|
|
|
+ class="c_parameters"
|
|
|
+ >
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="电压突变" name="v_mutation" class="v_mutation">
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-button type="primary" class="preservation" @click="preservation"
|
|
|
+ >保存为图片</el-button
|
|
|
+ >
|
|
|
+ </el-tabs>
|
|
|
+ <div class="block">
|
|
|
+ <span>选择时间范围:</span>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="defaultTime"
|
|
|
+ type="datetimerange"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ range-separator="~"
|
|
|
+ :disabledDate="disabledDate"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="数据报表" name="third" style="top: 2px">
|
|
|
+ <div class="block">
|
|
|
+ <span>选择时间范围:</span>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="defaultTime"
|
|
|
+ type="datetimerange"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ range-separator="~"
|
|
|
+ :disabledDate="disabledDate"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ <div class="operation">
|
|
|
+ <el-button type="primary" class="query" :disabled="checkedCities.length > 0 ? false : true" @click="Time_all">查询</el-button>
|
|
|
+ <el-button type="primary" class="export" :disabled="tableData.length > 0 ? false : true">导出</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box">
|
|
|
+ <el-checkbox
|
|
|
+ :indeterminate="isIndeterminate"
|
|
|
+ v-model="checkAll"
|
|
|
+ @change="handleCheckAllChange"
|
|
|
+ >全选</el-checkbox
|
|
|
+ >
|
|
|
+ <el-checkbox-group
|
|
|
+ v-model="checkedCities"
|
|
|
+ @change="handleCheckedCitiesChange"
|
|
|
+ >
|
|
|
+ <el-checkbox v-for="city in cities" :label="city" :key="city">{{
|
|
|
+ city
|
|
|
+ }}</el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ <div class="table">
|
|
|
+ <el-table :data="tableData" style="width: 100%" height="520" show>
|
|
|
+ <el-table-column prop="time" label="时间" fixed>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="电流 A" v-if="columnHeaders[0].isShow">
|
|
|
+ <el-table-column prop="name" label="A相电流"> </el-table-column>
|
|
|
+ <el-table-column prop="province" label="B相电流">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="city" label="C相电流"> </el-table-column>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="电流 B" v-if="columnHeaders[1].isShow">
|
|
|
+ <el-table-column prop="name" label="B相电流"> </el-table-column>
|
|
|
+ <el-table-column prop="province" label="B相电流">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="city" label="B相电流"> </el-table-column>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- <el-table-column label="地址">
|
|
|
+ <el-table-column prop="province" label="省份" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="city" label="市区" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="address" label="地址"> </el-table-column>
|
|
|
+ <el-table-column prop="zip" label="邮编" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="zip" label="邮编" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="zip" label="邮编" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="zip" label="邮编" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="zip" label="邮编" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table-column> -->
|
|
|
+
|
|
|
+ <template #empty>
|
|
|
+ <div class="zwsj">
|
|
|
+ <img src="./../../assets/images/No_data.png" alt="" />
|
|
|
+ <p>暂无数据</p>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <devicemotore
|
|
|
+ v-if="activeName === 'second'"
|
|
|
+ ref="main"
|
|
|
+ :defaul_tTime="defaultTime"
|
|
|
+ ></devicemotore>
|
|
|
<el-tab-pane label="运行状态统计" name="fourth" style="top: 3px"
|
|
|
>运行状态统计</el-tab-pane
|
|
|
>
|
|
|
@@ -98,11 +235,29 @@
|
|
|
</section>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import devicemotore from "../site_ehcarts/Device_motore";
|
|
|
+const cityOptions = [
|
|
|
+ "电流",
|
|
|
+ "功率",
|
|
|
+ "电度",
|
|
|
+ "电压",
|
|
|
+ "温度",
|
|
|
+ "频率",
|
|
|
+ "功率因数",
|
|
|
+ "谐波电流有效值",
|
|
|
+ "通讯参数",
|
|
|
+ "电压突变",
|
|
|
+];
|
|
|
export default {
|
|
|
+ name: "site_details",
|
|
|
+ components: { devicemotore },
|
|
|
data() {
|
|
|
return {
|
|
|
activeName: "first",
|
|
|
ac_content: "model",
|
|
|
+ se_content: "flow",
|
|
|
+ se_label: "电流",
|
|
|
+
|
|
|
model_array: [
|
|
|
{ name: "A相电压：", value: "236.94V" },
|
|
|
{ name: "B相电压：", value: "237.94V" },
|
|
|
@@ -205,16 +360,86 @@ export default {
|
|
|
{ name: "备用遥信3：", value: "OFF" },
|
|
|
{ name: "备用遥信4：", value: "OFF" },
|
|
|
],
|
|
|
+
|
|
|
+ value: "",
|
|
|
+ defaultTime: [
|
|
|
+ new Date(2021, 6, 1, 0, 0, 0),
|
|
|
+ new Date(2021, 6, 1, 12, 0, 0),
|
|
|
+ ],
|
|
|
+ disabledDate(date) {
|
|
|
+ return date.getTime() > new Date();
|
|
|
+ },
|
|
|
+ checkAll: false,
|
|
|
+ checkedCities: [],
|
|
|
+ cities: cityOptions,
|
|
|
+ isIndeterminate: false,
|
|
|
+ tableData: [],
|
|
|
+
|
|
|
+ msg: "暂无数据",
|
|
|
+
|
|
|
+ columnHeaders: [
|
|
|
+ { index: 0, title: "电流", isShow: false },
|
|
|
+ { index: 1, title: "功率", isShow: false },
|
|
|
+ { index: 2, title: "电度", isShow: false },
|
|
|
+ { index: 3, title: "电压", isShow: false },
|
|
|
+ { index: 4, title: "温度", isShow: false },
|
|
|
+ { index: 5, title: "频率", isShow: false },
|
|
|
+ {
|
|
|
+ index: 6,
|
|
|
+ title: "功率因数",
|
|
|
+ isShow: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ index: 7,
|
|
|
+ title: "谐波电流有效值",
|
|
|
+ isShow: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ index: 8,
|
|
|
+ title: "通讯参数",
|
|
|
+ isShow: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ index: 9,
|
|
|
+ title: "电压突变",
|
|
|
+ isShow: false,
|
|
|
+ },
|
|
|
+ ],
|
|
|
};
|
|
|
},
|
|
|
- name: "site_details",
|
|
|
- components: {},
|
|
|
- mounted() {},
|
|
|
+ mounted() {
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ preservation() {
|
|
|
+ console.log(this.$refs.main.chart);
|
|
|
+ var url = this.$refs.main.chart.getConnectedDataURL({
|
|
|
+ pixelRatio: 15,
|
|
|
+ backgroundColor: "black",
|
|
|
+ excludeComponents: ["toolbox"],
|
|
|
+ type: "png",
|
|
|
+ });
|
|
|
+ var $a = document.createElement("a");
|
|
|
+ var type = "png";
|
|
|
+ //图片名称
|
|
|
+ $a.download = this.se_label + "." + type;
|
|
|
+ $a.target = "_blank";
|
|
|
+ $a.href = url;
|
|
|
+ if (typeof MouseEvent === "function") {
|
|
|
+ var evt = new MouseEvent("click", {
|
|
|
+ view: window,
|
|
|
+ bubbles: true,
|
|
|
+ cancelable: false,
|
|
|
+ });
|
|
|
+ $a.dispatchEvent(evt);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //最外层tabs切换事件触发
|
|
|
handleClick(tab, event) {
|
|
|
+ // this.Time_all();
|
|
|
// console.log(tab, event);
|
|
|
// console.log(tab.props.name)
|
|
|
this.ac_content = "model";
|
|
|
+ this.se_content = "flow";
|
|
|
for (let i in event.path) {
|
|
|
if (event.path[i].className === "el-tabs__nav is-top") {
|
|
|
var childNodes = event.path[i].childNodes;
|
|
|
@@ -226,16 +451,464 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
+ //实时数据 内部tabs 点击事件触发
|
|
|
handleClick1(tab, event) {
|
|
|
console.log(tab, event);
|
|
|
},
|
|
|
+ //历史趋势 内部tabs 点击事件触发
|
|
|
+ handleClick2(tab, event) {
|
|
|
+ console.log(tab, event);
|
|
|
+ this.se_label = tab.props.label;
|
|
|
+ },
|
|
|
+ Time_all() {
|
|
|
+ // console.log(this.defaultTime)
|
|
|
+ // console.log("bbbbbbb",data)
|
|
|
+ // this.$emit("func", this.defaultTime);
|
|
|
+ this.tableData = [
|
|
|
+ {
|
|
|
+ time: "2016-05-03",
|
|
|
+ name: "1",
|
|
|
+ province: "2",
|
|
|
+ city: "3",
|
|
|
+ address: "1518",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: "2016-05-02",
|
|
|
+ name: "1",
|
|
|
+ province: "2",
|
|
|
+ city: "3",
|
|
|
+ address: "2市3金沙江路 1518 弄",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: "2016-05-04",
|
|
|
+ name: "1",
|
|
|
+ province: "2",
|
|
|
+ city: "3",
|
|
|
+ address: "2市3金沙江路 1518 弄",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: "2016-05-01",
|
|
|
+ name: "1",
|
|
|
+ province: "2",
|
|
|
+ city: "3",
|
|
|
+ address: "2市3金沙江路 1518 弄",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: "2016-05-08",
|
|
|
+ name: "1",
|
|
|
+ province: "2",
|
|
|
+ city: "3",
|
|
|
+ address: "2市3金沙江路 1518 弄",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: "2016-05-06",
|
|
|
+ name: "1",
|
|
|
+ province: "2",
|
|
|
+ city: "3",
|
|
|
+ address: "2市3金沙江路 1518 弄",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: "2016-05-07",
|
|
|
+ name: "1",
|
|
|
+ province: "2",
|
|
|
+ city: "3",
|
|
|
+ address: "2市3金沙江路 1518 弄",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: "2016-05-07",
|
|
|
+ name: "1",
|
|
|
+ province: "2",
|
|
|
+ city: "3",
|
|
|
+ address: "2市3金沙江路 1518 弄",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: "2016-05-07",
|
|
|
+ name: "1",
|
|
|
+ province: "2",
|
|
|
+ city: "3",
|
|
|
+ address: "2市3金沙江路 1518 弄",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: "2016-05-07",
|
|
|
+ name: "1",
|
|
|
+ province: "2",
|
|
|
+ city: "3",
|
|
|
+ address: "2市3金沙江路 1518 弄",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: "2016-05-07",
|
|
|
+ name: "1",
|
|
|
+ province: "2",
|
|
|
+ city: "3",
|
|
|
+ address: "2市3金沙江路 1518 弄",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: "2016-05-07",
|
|
|
+ name: "1",
|
|
|
+ province: "2",
|
|
|
+ city: "3",
|
|
|
+ address: "2市3金沙江路 1518 弄",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: "2016-05-07",
|
|
|
+ name: "1",
|
|
|
+ province: "2",
|
|
|
+ city: "3",
|
|
|
+ address: "2市3金沙江路 1518 弄",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: "2016-05-07",
|
|
|
+ name: "1",
|
|
|
+ province: "2",
|
|
|
+ city: "3",
|
|
|
+ address: "2市3金沙江路 1518 弄",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: "2016-05-07",
|
|
|
+ name: "1",
|
|
|
+ province: "2",
|
|
|
+ city: "3",
|
|
|
+ address: "2市3金沙江路 1518 弄",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: "2016-05-07",
|
|
|
+ name: "1",
|
|
|
+ province: "2",
|
|
|
+ city: "3",
|
|
|
+ address: "2市3金沙江路 1518 弄",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: "2016-05-07",
|
|
|
+ name: "1",
|
|
|
+ province: "2",
|
|
|
+ city: "3",
|
|
|
+ address: "2市3金沙江路 1518 弄",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: "2016-05-07",
|
|
|
+ name: "1",
|
|
|
+ province: "2",
|
|
|
+ city: "3",
|
|
|
+ address: "2市3金沙江路 1518 弄",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ time: "2016-05-07",
|
|
|
+ name: "1",
|
|
|
+ province: "2",
|
|
|
+ city: "3",
|
|
|
+ address: "2市3金沙江路 1518 弄",
|
|
|
+ zip: 200333,
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ handleCheckAllChange(val) {
|
|
|
+ this.checkedCities = val ? cityOptions : [];
|
|
|
+ this.isIndeterminate = false;
|
|
|
+ },
|
|
|
+ handleCheckedCitiesChange(value) {
|
|
|
+ let checkedCount = value.length;
|
|
|
+ this.checkAll = checkedCount === this.cities.length;
|
|
|
+ this.isIndeterminate =
|
|
|
+ checkedCount > 0 && checkedCount < this.cities.length;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ /**
|
|
|
+ * @title 监听列显示隐藏
|
|
|
+ */
|
|
|
+ checkedCities(newArrayVal) {
|
|
|
+ newArrayVal.length <= 0 ? this.tableData=[] : ''
|
|
|
+ // 计算为被选中的列标题数组
|
|
|
+ var nonSelecteds = this.columnHeaders
|
|
|
+ .filter((item) => newArrayVal.indexOf(item.title) == -1)
|
|
|
+ .map((item) => item.title);
|
|
|
+ // 根据计算结果进行表格重绘
|
|
|
+ this.columnHeaders.filter((item) => {
|
|
|
+ let isNonSelected = nonSelecteds.indexOf(item.title) != -1;
|
|
|
+ if (isNonSelected) {
|
|
|
+ // 隐藏未选中的列
|
|
|
+ item.isShow = false;
|
|
|
+ } else {
|
|
|
+ // 显示已选中的列
|
|
|
+ item.isShow = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+/*
|
|
|
+ 数据报表css样式
|
|
|
+*/
|
|
|
+#pane-third .el-table__fixed {
|
|
|
+ height: 100% !important;
|
|
|
+}
|
|
|
+#pane-third .el-table {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+#pane-third .el-table thead {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+#pane-third .cell {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.el-table__fixed-body-wrapper {
|
|
|
+ /* height: 369px !important; */
|
|
|
+}
|
|
|
+#pane-third .el-table__header {
|
|
|
+ /* width: 100.65% !important; */
|
|
|
+}
|
|
|
+
|
|
|
+#pane-third .el-table--fit {
|
|
|
+ background-color: rgb(0, 66, 78, 0) !important;
|
|
|
+}
|
|
|
+#pane-third .el-table th,
|
|
|
+.el-table tr {
|
|
|
+ background-color: rgb(0, 66, 78, 0.5) !important;
|
|
|
+}
|
|
|
+.el-table__fixed-body-wrapper::-webkit-scrollbar {
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+}
|
|
|
+#pane-third .block span {
|
|
|
+ padding: 0 10px;
|
|
|
+}
|
|
|
+#pane-third .el-input__inner {
|
|
|
+ width: 414px !important;
|
|
|
+ height: 30px !important;
|
|
|
+ line-height: 30px !important;
|
|
|
+ background-color: transparent;
|
|
|
+ border: 1px solid rgba(3, 107, 119, 1);
|
|
|
+}
|
|
|
+#pane-third .el-range-input {
|
|
|
+ background-color: transparent;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+#pane-third .el-range-separator {
|
|
|
+ line-height: 20px;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+#pane-third .operation {
|
|
|
+ float: right;
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+#pane-third button {
|
|
|
+ height: 30px !important;
|
|
|
+ min-height: 30px;
|
|
|
+ line-height: 0;
|
|
|
+ margin-top: 0px;
|
|
|
+ padding: 0px 10px;
|
|
|
+ margin-left: 17px;
|
|
|
+}
|
|
|
+#pane-third button span {
|
|
|
+ font-size: 0.18rem;
|
|
|
+ padding: 0 10px;
|
|
|
+ font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
|
|
|
+}
|
|
|
+#pane-third .box {
|
|
|
+ padding-left: 10px;
|
|
|
+ display: flex;
|
|
|
+ margin-top: 12px;
|
|
|
+}
|
|
|
+#pane-third .el-checkbox-group {
|
|
|
+ margin-left: 30px;
|
|
|
+}
|
|
|
+#pane-third .el-checkbox .el-checkbox__label {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 0.18rem;
|
|
|
+}
|
|
|
+#pane-third .el-checkbox .el-checkbox__input .el-checkbox__inner {
|
|
|
+ background-color: transparent;
|
|
|
+ border: 1px solid rgba(1, 111, 109, 1);
|
|
|
+}
|
|
|
+#pane-third .el-checkbox__input.is-checked .el-checkbox__inner,
|
|
|
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
|
|
+ background-color: rgba(1, 111, 109, 1) !important;
|
|
|
+}
|
|
|
+#pane-third .el-checkbox__inner::after {
|
|
|
+ border: 1px solid rgba(0, 244, 253, 1);
|
|
|
+ border-left: 0;
|
|
|
+ border-top: 0;
|
|
|
+}
|
|
|
+#pane-third .table {
|
|
|
+ margin-top: 10px;
|
|
|
+ padding: 0 10px;
|
|
|
+}
|
|
|
+#pane-third .el-table--border,
|
|
|
+.el-table--group {
|
|
|
+ border: 1px solid rgba(1, 111, 109, 0.5);
|
|
|
+ background-color: transparent;
|
|
|
+}
|
|
|
+#pane-third .el-table--border td,
|
|
|
+.el-table--border th,
|
|
|
+.el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
|
|
|
+ border-right: 1px solid rgba(1, 111, 109, 0.5);
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+#pane-third .el-table td,
|
|
|
+.el-table th.is-leaf {
|
|
|
+ border-bottom: 1px solid rgba(1, 111, 109, 0.5);
|
|
|
+}
|
|
|
+#pane-third .el-table th,
|
|
|
+.el-table tr {
|
|
|
+ border-bottom: 1px solid rgba(1, 111, 109, 0.5);
|
|
|
+}
|
|
|
+#pane-third .table .el-table thead.is-group th {
|
|
|
+ background-color: rgb(0, 66, 78, 1) !important;
|
|
|
+}
|
|
|
+#pane-third .el-table__row {
|
|
|
+ background-color: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+/* #pane-third .el-table__body {
|
|
|
+ width: 100% !important;
|
|
|
+} */
|
|
|
+#pane-third .el-table__body .hover-row > td {
|
|
|
+ background-color: rgb(3, 61, 72, 1) !important;
|
|
|
+}
|
|
|
+#pane-third .el-table__body tr > td:nth-child(1) {
|
|
|
+ background-color: rgb(0, 66, 78, 1) !important;
|
|
|
+}
|
|
|
+#pane-third .el-table__body-wrapper::-webkit-scrollbar {
|
|
|
+ width: 5px;
|
|
|
+ height: 5px;
|
|
|
+}
|
|
|
+#pane-third .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
|
|
+ border-right: none;
|
|
|
+ background-color: #01f5f1;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+#pane-third .el-table__body-wrapper::-webkit-scrollbar-track {
|
|
|
+ background-color: rgb(0, 66, 78, 1);
|
|
|
+}
|
|
|
+#pane-third .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
|
|
|
+ background-color: rgb(17, 177, 174);
|
|
|
+}
|
|
|
+#pane-third .el-table__body-wrapper::-webkit-scrollbar-thumb:active {
|
|
|
+ background-color: rgb(9, 136, 134);
|
|
|
+}
|
|
|
+
|
|
|
+#pane-third .zwsj {
|
|
|
+ margin: 65px 0;
|
|
|
+}
|
|
|
+#pane-third .el-table--border::after,
|
|
|
+.el-table--group::after {
|
|
|
+ width: 0;
|
|
|
+}
|
|
|
+#pane-third .el-table::before {
|
|
|
+ height: 0px;
|
|
|
+}
|
|
|
+#pane-third .el-table__fixed-right::before,
|
|
|
+.el-table__fixed::before {
|
|
|
+ height: 0px;
|
|
|
+}
|
|
|
+/* #pane-third .is-scrolling-middle {
|
|
|
+ height: 374px !important;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+#pane-third .is-scrolling-right {
|
|
|
+ height: 374px !important;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+#pane-third .is-scrolling-left {
|
|
|
+ height: 374px !important;
|
|
|
+ z-index: 1;
|
|
|
+} */
|
|
|
+</style>
|
|
|
+
|
|
|
+<style>
|
|
|
+/* 历史趋势css样式 */
|
|
|
+.se-content {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.se-content .el-tabs__header {
|
|
|
+ /* width: calc(130px * 10); */
|
|
|
+ width: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+.se-content .el-tabs__item.is-active {
|
|
|
+ background: rgba(6, 68, 83, 1) !important;
|
|
|
+}
|
|
|
+.se-content .el-tabs__active-bar {
|
|
|
+ width: 130px !important;
|
|
|
+ top: 0;
|
|
|
+ background: transparent;
|
|
|
+}
|
|
|
+.se-content .el-tabs__item {
|
|
|
+ border-top: 1px rgba(0, 244, 253, 0.1) solid;
|
|
|
+ border-bottom: 1px rgba(0, 244, 253, 0.1) solid;
|
|
|
+}
|
|
|
+.se-content .el-tabs__nav-scroll {
|
|
|
+ border-bottom: 0px rgba(0, 244, 253, 0.1) solid;
|
|
|
+}
|
|
|
+.se-content .el-tabs__nav {
|
|
|
+ /* width: 100%; */
|
|
|
+ width: calc(130px * 9);
|
|
|
+ float: none !important;
|
|
|
+ margin: auto;
|
|
|
+}
|
|
|
+.se-content .preservation {
|
|
|
+ min-height: 35px !important;
|
|
|
+ line-height: 10px;
|
|
|
+ height: 35px;
|
|
|
+ margin: 5px 0.4rem 5px 0px;
|
|
|
+}
|
|
|
+.se-content #tab-flow {
|
|
|
+ border-left: 1px rgba(0, 244, 253, 0.1) solid;
|
|
|
+}
|
|
|
+
|
|
|
+#pane-second .block {
|
|
|
+ margin-top: 3px;
|
|
|
+}
|
|
|
+#pane-second .el-input__inner {
|
|
|
+ width: 414px !important;
|
|
|
+ height: 30px !important;
|
|
|
+ line-height: 30px !important;
|
|
|
+ background-color: transparent;
|
|
|
+ border: 1px solid rgba(3, 107, 119, 1);
|
|
|
+}
|
|
|
+#pane-second span {
|
|
|
+ font-size: 0.2rem;
|
|
|
+ padding: 0 10px;
|
|
|
+ font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
|
|
|
+}
|
|
|
+#pane-second .el-range-input {
|
|
|
+ background-color: transparent;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+#pane-second .el-range-separator {
|
|
|
+ line-height: 20px;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
<style>
|
|
|
.Site-details {
|
|
|
width: 98%;
|
|
|
- height: 705px;
|
|
|
/* opacity: 0.2; */
|
|
|
background-color: rgba(0, 244, 253, 0.1);
|
|
|
border: 1px solid rgba(0, 244, 253, 0.1);
|
|
|
@@ -243,7 +916,11 @@ export default {
|
|
|
margin-top: 5px;
|
|
|
}
|
|
|
|
|
|
+.el-tabs__nav-wrap {
|
|
|
+ margin-bottom: 0px;
|
|
|
+}
|
|
|
.el-tabs__nav-scroll {
|
|
|
+ border-bottom: 1px rgba(0, 244, 253, 0.1) solid;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
.el-tabs__item {
|
|
|
@@ -264,6 +941,7 @@ export default {
|
|
|
background: #4bf4f9;
|
|
|
}
|
|
|
.el-tabs__nav-wrap::after {
|
|
|
+ bottom: revert;
|
|
|
height: 1px !important;
|
|
|
background-color: rgba(0, 244, 253, 0.1) !important;
|
|
|
}
|
|
|
@@ -284,20 +962,27 @@ export default {
|
|
|
background: transparent;
|
|
|
}
|
|
|
.ac-content .el-tabs__item {
|
|
|
- border: 1px rgba(0, 244, 253, 0.1) solid;
|
|
|
+ border-left: 1px rgba(0, 244, 253, 0.1) solid;
|
|
|
+ border-top: 1px rgba(0, 244, 253, 0.1) solid;
|
|
|
}
|
|
|
.primary {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
right: 10px;
|
|
|
- width: 72px !important;
|
|
|
min-height: 34px !important;
|
|
|
line-height: 8px;
|
|
|
+ z-index: 10;
|
|
|
}
|
|
|
+</style>
|
|
|
|
|
|
+<style>
|
|
|
+/*
|
|
|
+ 模拟量css样式
|
|
|
+ */
|
|
|
.ac-content .model > div {
|
|
|
width: 25%;
|
|
|
- height: 570px;
|
|
|
+ height: 580px;
|
|
|
+ margin-top: 10px;
|
|
|
}
|
|
|
.ac-content .model .display {
|
|
|
display: flex;
|
|
|
@@ -319,7 +1004,12 @@ export default {
|
|
|
padding-left: 0.7rem;
|
|
|
color: rgba(1, 201, 208, 1);
|
|
|
}
|
|
|
+</style>
|
|
|
|
|
|
+<style>
|
|
|
+/*
|
|
|
+ 状态量css样式
|
|
|
+ */
|
|
|
.ac-content .states {
|
|
|
display: flex;
|
|
|
}
|
|
|
@@ -366,7 +1056,7 @@ export default {
|
|
|
height: 24px;
|
|
|
background: url(./../../assets/images/state_OFF.png) no-repeat;
|
|
|
background-size: cover;
|
|
|
- margin-top: 0.1rem;
|
|
|
+ margin-top: 6px;
|
|
|
margin-left: 0.2rem;
|
|
|
}
|
|
|
</style>
|
Ming
