|
|
|
|
<template>
|
|
|
|
|
<div class="condition-analysis">
|
|
|
|
|
<p class="yq-title">空调工作时段分析</p>
|
|
|
|
|
<div class="search-box">
|
|
|
|
|
<div class="choose-time" style="float: left">
|
|
|
|
|
<span>选择楼宇</span>
|
|
|
|
|
<el-select
|
|
|
|
|
placeholder="请选择楼宇"
|
|
|
|
|
size="mini"
|
|
|
|
|
style="margin-left: 10px; width: 7.5rem"
|
|
|
|
|
v-model="buildValue"
|
|
|
|
|
@change="searchBuild"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="(item, index) in buildings"
|
|
|
|
|
:label="item.name"
|
|
|
|
|
:value="item.id"
|
|
|
|
|
:key="index"
|
|
|
|
|
>
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="float: right">
|
|
|
|
|
<el-date-picker
|
|
|
|
|
size="mini"
|
|
|
|
|
ref="buildDate"
|
|
|
|
|
style="
|
|
|
|
|
width: 9.375rem;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
background-color: rgb(152, 160, 173);
|
|
|
|
|
border: 0;
|
|
|
|
|
"
|
|
|
|
|
v-model="chooseDateValue"
|
|
|
|
|
:type="
|
|
|
|
|
choseDate == 1
|
|
|
|
|
? 'year'
|
|
|
|
|
: choseDate == 2
|
|
|
|
|
? 'month'
|
|
|
|
|
: choseDate == 3
|
|
|
|
|
? 'date'
|
|
|
|
|
: 'date'
|
|
|
|
|
"
|
|
|
|
|
:value-format="
|
|
|
|
|
choseDate == 1
|
|
|
|
|
? 'yyyy'
|
|
|
|
|
: choseDate == 2
|
|
|
|
|
? 'yyyy-MM'
|
|
|
|
|
: choseDate == 3
|
|
|
|
|
? 'yyyy-MM-dd'
|
|
|
|
|
: 'yyyy-MM-dd'
|
|
|
|
|
"
|
|
|
|
|
:placeholder="
|
|
|
|
|
choseDate == 1
|
|
|
|
|
? '选择年份'
|
|
|
|
|
: choseDate == 2
|
|
|
|
|
? '选择月份'
|
|
|
|
|
: choseDate == 3
|
|
|
|
|
? '选择日期'
|
|
|
|
|
: '选择日期'
|
|
|
|
|
"
|
|
|
|
|
clearable="false"
|
|
|
|
|
@change="searchBuild"
|
|
|
|
|
>
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
<div class="change-tab" style="display:none;">
|
|
|
|
|
<!-- <div
|
|
|
|
|
@click="selectDate(1)"
|
|
|
|
|
:style="{ backgroundColor: choseDate == 1 ? 'rgb(8,166,255)' : '' }"
|
|
|
|
|
>
|
|
|
|
|
年
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
@click="selectDate(2)"
|
|
|
|
|
:style="{ backgroundColor: choseDate == 2 ? 'rgb(8,166,255)' : '' }"
|
|
|
|
|
>
|
|
|
|
|
月
|
|
|
|
|
</div> -->
|
|
|
|
|
<div style="color: #999; cursor: default">年</div>
|
|
|
|
|
<div style="color: #999; cursor: default">月</div>
|
|
|
|
|
<div
|
|
|
|
|
@click="selectDate(3)"
|
|
|
|
|
:style="{ backgroundColor: choseDate == 3 ? 'rgb(8,166,255)' : '' }"
|
|
|
|
|
>
|
|
|
|
|
日
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="charts">
|
|
|
|
|
<div style="position: relative">
|
|
|
|
|
<div
|
|
|
|
|
style="
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 1.25rem;
|
|
|
|
|
top: 1.2rem;
|
|
|
|
|
color: rgba(255, 255, 255, 0.35);
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
空调名称:由东到西数字逐渐增大
|
|
|
|
|
</div>
|
|
|
|
|
<div class="legends">
|
|
|
|
|
<div class="legends-block-left">
|
|
|
|
|
<div></div>
|
|
|
|
|
<span>工作时段</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="legends-block-right">
|
|
|
|
|
<div></div>
|
|
|
|
|
<span>非工作时段</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="condition-work"></div>
|
|
|
|
|
<!-- <div class="work_time_tool">
|
|
|
|
|
<span
|
|
|
|
|
:style="{ color: timeDateIndex == 9 ? '#909399' : '#fff' }"
|
|
|
|
|
class="time_date_act"
|
|
|
|
|
@click="preDate"
|
|
|
|
|
><上一天</span
|
|
|
|
|
>{{ timeDate[timeDateIndex]
|
|
|
|
|
}}<span
|
|
|
|
|
:style="{ color: timeDateIndex == 0 ? '#909399' : '#fff' }"
|
|
|
|
|
class="time_date_act"
|
|
|
|
|
@click="nextDate"
|
|
|
|
|
>下一天></span
|
|
|
|
|
>
|
|
|
|
|
</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="open-statistics">
|
|
|
|
|
<!-- <lineCharts id="line-chart" ref="line" width="33rem" height="16.875rem"></lineCharts> -->
|
|
|
|
|
<!-- <p>开机时长</p>
|
|
|
|
|
<div id="open-num"></div> -->
|
|
|
|
|
<p>查询日期室内平均温度</p>
|
|
|
|
|
<div class="open-time">
|
|
|
|
|
<div class="warm-chart">
|
|
|
|
|
<div id="floor-temper3"></div>
|
|
|
|
|
<p>{{ buildValue }}#1层</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="warm-chart">
|
|
|
|
|
<div id="floor-temper4"></div>
|
|
|
|
|
<p>{{ buildValue }}#2层</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="warm-chart">
|
|
|
|
|
<div id="floor-temper5"></div>
|
|
|
|
|
<p>{{ buildValue }}#3层</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<p>近14天非工作时段开机空调统计</p>
|
|
|
|
|
<el-table
|
|
|
|
|
:data="closeData"
|
|
|
|
|
class="total-source-table"
|
|
|
|
|
:header-row-style="headerStyle"
|
|
|
|
|
:row-style="rowStyle"
|
|
|
|
|
height="200"
|
|
|
|
|
v-loaddata="loadData"
|
|
|
|
|
>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="date"
|
|
|
|
|
label="日期"
|
|
|
|
|
align="center"
|
|
|
|
|
></el-table-column>
|
|
|
|
|
<el-table-column label="|" width="15"></el-table-column>
|
|
|
|
|
<el-table-column prop="location" label="设备位置" align="center">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="|" width="15"></el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="equipCode"
|
|
|
|
|
label="设备编号"
|
|
|
|
|
align="center"
|
|
|
|
|
></el-table-column>
|
|
|
|
|
<el-table-column label="|" width="15"></el-table-column>
|
|
|
|
|
<el-table-column prop="openTime" label="未关机时段" align="center">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<span>{{ scope.row.startTime }}-{{ scope.row.endTime }}</span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import {
|
|
|
|
|
getFloorAvgTmp,
|
|
|
|
|
getConditionBar,
|
|
|
|
|
getConditionLine,
|
|
|
|
|
getConditionTable,
|
|
|
|
|
} from "@/api/source/total";
|
|
|
|
|
import { dateFormat } from "@/util/date";
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
timeDateIndex: 0,
|
|
|
|
|
timeDate: [
|
|
|
|
|
"2022-10-25",
|
|
|
|
|
"2022-10-24",
|
|
|
|
|
"2022-10-23",
|
|
|
|
|
"2022-10-22",
|
|
|
|
|
"2022-10-21",
|
|
|
|
|
"2022-10-20",
|
|
|
|
|
"2022-10-19",
|
|
|
|
|
"2022-10-18",
|
|
|
|
|
"2022-10-17",
|
|
|
|
|
"2022-10-16",
|
|
|
|
|
], //工作时间段日期选择
|
|
|
|
|
choseDate: "3", //日期选择模式
|
|
|
|
|
chooseDateValue: dateFormat(new Date(), "yyyy-MM-dd"), //日期选中值
|
|
|
|
|
buildValue: "01",
|
|
|
|
|
buildings: [
|
|
|
|
|
// {
|
|
|
|
|
// id: "",
|
|
|
|
|
// name: "全部",
|
|
|
|
|
// },
|
|
|
|
|
{
|
|
|
|
|
id: "01",
|
|
|
|
|
name: "1号楼",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "02",
|
|
|
|
|
name: "2号楼",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "03",
|
|
|
|
|
name: "3号楼",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "04",
|
|
|
|
|
name: "4号楼",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "05",
|
|
|
|
|
name: "5号楼",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "06",
|
|
|
|
|
name: "6号楼",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
dateValue: "",
|
|
|
|
|
closeData: [],
|
|
|
|
|
headerStyle: {
|
|
|
|
|
background: "rgba(0,0,0,.2)",
|
|
|
|
|
},
|
|
|
|
|
rowStyle: {
|
|
|
|
|
background: "transparent",
|
|
|
|
|
},
|
|
|
|
|
current: 1,
|
|
|
|
|
size: 5,
|
|
|
|
|
build: ["#1", "#2", "#3", "#4", "#5", "#6"],
|
|
|
|
|
buildColor: [
|
|
|
|
|
"rgb(56,169,255)",
|
|
|
|
|
"rgb(44,246,172)",
|
|
|
|
|
"rgb(255,243,91)",
|
|
|
|
|
"rgb(236,105,67)",
|
|
|
|
|
"rgb(126,207,142)",
|
|
|
|
|
"rgb(242,155,119)",
|
|
|
|
|
],
|
|
|
|
|
workTimeData: [], //空调工作时段
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.getData();
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.getData();
|
|
|
|
|
}, 3600000);
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
preDate() {
|
|
|
|
|
this.timeDateIndex =
|
|
|
|
|
this.timeDateIndex < 9 ? this.timeDateIndex + 1 : this.timeDateIndex;
|
|
|
|
|
this.getConditionBarData();
|
|
|
|
|
},
|
|
|
|
|
nextDate() {
|
|
|
|
|
this.timeDateIndex =
|
|
|
|
|
this.timeDateIndex > 0 ? this.timeDateIndex - 1 : this.timeDateIndex;
|
|
|
|
|
this.getConditionBarData();
|
|
|
|
|
},
|
|
|
|
|
//日期类型
|
|
|
|
|
selectDate(index) {
|
|
|
|
|
this.choseDate = index;
|
|
|
|
|
if (this.chooseDateValue) {
|
|
|
|
|
if (index == 1) {
|
|
|
|
|
this.chooseDateValue =
|
|
|
|
|
this.chooseDateValue.length > 4
|
|
|
|
|
? this.chooseDateValue.substring(0, 4)
|
|
|
|
|
: this.chooseDateValue;
|
|
|
|
|
} else if (index == 2) {
|
|
|
|
|
this.chooseDateValue =
|
|
|
|
|
this.chooseDateValue.length < 5
|
|
|
|
|
? dateFormat(new Date(), "yyyy-MM")
|
|
|
|
|
: this.chooseDateValue.length > 7
|
|
|
|
|
? this.chooseDateValue.substring(0, 7)
|
|
|
|
|
: this.chooseDateValue;
|
|
|
|
|
} else if (index == 3) {
|
|
|
|
|
this.chooseDateValue =
|
|
|
|
|
this.chooseDateValue.length < 5
|
|
|
|
|
? dateFormat(new Date(), "yyyy-MM-dd")
|
|
|
|
|
: this.chooseDateValue.length < 10
|
|
|
|
|
? dateFormat(new Date(), "yyyy-MM-dd")
|
|
|
|
|
: this.chooseDateValue;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.getData();
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
//楼宇选择
|
|
|
|
|
searchBuild() {
|
|
|
|
|
this.getData();
|
|
|
|
|
},
|
|
|
|
|
getToday(day) {
|
|
|
|
|
//获取当天以及前7天的日期
|
|
|
|
|
var today = new Date();
|
|
|
|
|
var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
|
|
|
|
|
today.setTime(targetday_milliseconds); //注意，这行是关键代码
|
|
|
|
|
var tYear = today.getFullYear();
|
|
|
|
|
var tMonth = today.getMonth();
|
|
|
|
|
var tDate = today.getDate();
|
|
|
|
|
tMonth = this.doHandleMonth(tMonth + 1);
|
|
|
|
|
tDate = this.doHandleMonth(tDate);
|
|
|
|
|
return tYear + "-" + tMonth + "-" + tDate;
|
|
|
|
|
},
|
|
|
|
|
doHandleMonth(month) {
|
|
|
|
|
var m = month;
|
|
|
|
|
if (month.toString().length == 1) {
|
|
|
|
|
m = "0" + month;
|
|
|
|
|
}
|
|
|
|
|
return m;
|
|
|
|
|
},
|
|
|
|
|
getData() {
|
|
|
|
|
this.getConditionBarData(); //工作时间甘特图
|
|
|
|
|
this.getTemperData(); //平均温度
|
|
|
|
|
this.getConditionTableData(); //进14天
|
|
|
|
|
},
|
|
|
|
|
getConditionBarData() {
|
|
|
|
|
//获取甘特图数据
|
|
|
|
|
getConditionBar(
|
|
|
|
|
1,
|
|
|
|
|
this.buildValue,
|
|
|
|
|
this.choseDate,
|
|
|
|
|
this.chooseDateValue ? this.chooseDateValue : ""
|
|
|
|
|
).then((res) => {
|
|
|
|
|
let data = res.data.data;
|
|
|
|
|
// let data = {}; //res.data.data;
|
|
|
|
|
// data.workingList = [
|
|
|
|
|
// [
|
|
|
|
|
// "2022/10/25 9:00-2022/10/25 16:00",
|
|
|
|
|
// "2022/10/24 7:00-2022/10/24 9:00",
|
|
|
|
|
// "2022/10/24 11:00-2022/10/24 12:00",
|
|
|
|
|
// "2022/10/21 11:00-2022/10/21 12:00",
|
|
|
|
|
// ],
|
|
|
|
|
// [
|
|
|
|
|
// "2022/10/25 16:00-2022/10/25 21:00",
|
|
|
|
|
// "2022/10/24 8:00-2022/10/24 14:00",
|
|
|
|
|
// "2022/10/23 16:00-2022/10/23 21:00",
|
|
|
|
|
// ],
|
|
|
|
|
// [
|
|
|
|
|
// "2022/10/24 4:00-2022/10/24 10:00",
|
|
|
|
|
// "2022/10/24 12:00-2022/10/24 14:30",
|
|
|
|
|
// ],
|
|
|
|
|
// ["2022/10/24 15:00-2022/10/24 16:00"],
|
|
|
|
|
// [],
|
|
|
|
|
// [],
|
|
|
|
|
// [],
|
|
|
|
|
// [],
|
|
|
|
|
// [],
|
|
|
|
|
// [],
|
|
|
|
|
// [],
|
|
|
|
|
// ];
|
|
|
|
|
// data.unworkingList = [
|
|
|
|
|
// [
|
|
|
|
|
// "2022/10/24 9:00-11:00",
|
|
|
|
|
// "2022/10/24 1:00-6:00",
|
|
|
|
|
// "2022/10/23 16:00-2022/10/23 21:00",
|
|
|
|
|
// ],
|
|
|
|
|
// [
|
|
|
|
|
// "2022/10/24 15:00-2022/10/24 22:00",
|
|
|
|
|
// "2022/10/23 16:00-2022/10/23 21:00",
|
|
|
|
|
// ],
|
|
|
|
|
// ["2022/10/24 11:00-2022/10/24 12:00"],
|
|
|
|
|
// [
|
|
|
|
|
// "2022/10/24 9:00-2022/10/24 15:00",
|
|
|
|
|
// "2022/10/24 16:00-2022/10/24 20:00",
|
|
|
|
|
// ],
|
|
|
|
|
// [],
|
|
|
|
|
// [],
|
|
|
|
|
// [],
|
|
|
|
|
// [],
|
|
|
|
|
// [],
|
|
|
|
|
// [],
|
|
|
|
|
// [],
|
|
|
|
|
// [],
|
|
|
|
|
// [],
|
|
|
|
|
// [],
|
|
|
|
|
// [],
|
|
|
|
|
// ];
|
|
|
|
|
// data.equipNameList = [];
|
|
|
|
|
// for (let i = 0; i < 22; i++) {
|
|
|
|
|
// data.equipNameList.push("空调" + (i + 1));
|
|
|
|
|
// }
|
|
|
|
|
data.equipNameList =
|
|
|
|
|
data.equipNameList == undefined ? [] : data.equipNameList;
|
|
|
|
|
data.workingList =
|
|
|
|
|
data.workingList == undefined ? [] : data.workingList;
|
|
|
|
|
data.unworkingList =
|
|
|
|
|
data.unworkingList == undefined ? [] : data.unworkingList;
|
|
|
|
|
let series = [];
|
|
|
|
|
for (let i = 0; i < data.workingList.length; i++) {
|
|
|
|
|
for (let j = 0; j < data.workingList[i].length; j++) {
|
|
|
|
|
series.push({
|
|
|
|
|
value: [
|
|
|
|
|
i,
|
|
|
|
|
`${data.workingList[i][j].substring(
|
|
|
|
|
0,
|
|
|
|
|
data.workingList[i][j].indexOf("-")
|
|
|
|
|
)}`,
|
|
|
|
|
`${data.workingList[i][j].substring(
|
|
|
|
|
data.workingList[i][j].indexOf("-") + 1
|
|
|
|
|
)}`,
|
|
|
|
|
"in",
|
|
|
|
|
],
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
for (let m = 0; m < data.unworkingList.length; m++) {
|
|
|
|
|
for (let n = 0; n < data.unworkingList[m].length; n++) {
|
|
|
|
|
series.push({
|
|
|
|
|
value: [
|
|
|
|
|
m,
|
|
|
|
|
`${data.unworkingList[m][n].substring(
|
|
|
|
|
0,
|
|
|
|
|
data.unworkingList[m][n].indexOf("-")
|
|
|
|
|
)}`,
|
|
|
|
|
`${data.unworkingList[m][n].substring(
|
|
|
|
|
data.unworkingList[m][n].indexOf("-") + 1
|
|
|
|
|
)}`,
|
|
|
|
|
"out",
|
|
|
|
|
],
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
series.sort((a, b) => {
|
|
|
|
|
return a.value[0] - b.value[0];
|
|
|
|
|
}); //升序
|
|
|
|
|
// console.log("series", series);
|
|
|
|
|
this.getConditionWork(series, data.equipNameList);
|
|
|
|
|
// {
|
|
|
|
|
|
|
|
|
|
// value: [0, `${baseDate} 12:00`, `${baseDate} 17:00`,'in']//0,1,2代表y轴的索引，后两位代表x轴数据开始和结束
|
|
|
|
|
// },
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
getConditionLineData() {
|
|
|
|
|
//折线图数据 - 废弃20221022
|
|
|
|
|
getConditionLine(1, this.dateValue).then((res) => {
|
|
|
|
|
const data = res.data.data;
|
|
|
|
|
// console.log(data)
|
|
|
|
|
let series = JSON.parse(JSON.stringify(data.workingNumberList));
|
|
|
|
|
series.splice(0, 1);
|
|
|
|
|
series.push(data.workingNumberList[0]);
|
|
|
|
|
this.getOpenNum(series);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
//平均温度
|
|
|
|
|
getTemperData() {
|
|
|
|
|
getFloorAvgTmp(
|
|
|
|
|
1,
|
|
|
|
|
this.buildValue,
|
|
|
|
|
this.choseDate,
|
|
|
|
|
this.chooseDateValue ? this.chooseDateValue : ""
|
|
|
|
|
).then((res) => {
|
|
|
|
|
const data = res.data.data;
|
|
|
|
|
let floorTempOne = "0",
|
|
|
|
|
floorTempTwo = "0",
|
|
|
|
|
floorTempThree = "0";
|
|
|
|
|
data.map((item) => {
|
|
|
|
|
floorTempOne = item.floorNumber == "01" ? item.avgTemp : floorTempOne;
|
|
|
|
|
floorTempTwo = item.floorNumber == "02" ? item.avgTemp : floorTempTwo;
|
|
|
|
|
floorTempThree =
|
|
|
|
|
item.floorNumber == "03" ? item.avgTemp : floorTempThree;
|
|
|
|
|
});
|
|
|
|
|
this.getFloorTemper2("floor-temper3", floorTempOne);
|
|
|
|
|
this.getFloorTemper2("floor-temper4", floorTempTwo);
|
|
|
|
|
this.getFloorTemper2("floor-temper5", floorTempThree);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
getConditionTableData() {
|
|
|
|
|
//获取空调列表
|
|
|
|
|
getConditionTable(
|
|
|
|
|
1,
|
|
|
|
|
this.current,
|
|
|
|
|
this.size,
|
|
|
|
|
"",
|
|
|
|
|
this.choseDate,
|
|
|
|
|
this.chooseDateValue ? this.chooseDateValue : ""
|
|
|
|
|
).then((res) => {
|
|
|
|
|
this.closeData = res.data.data.records;
|
|
|
|
|
for (let i = 0; i < this.closeData.length; i++) {
|
|
|
|
|
this.closeData[i].date = this.closeData[i].startTime.substring(0, 10);
|
|
|
|
|
this.closeData[i].startTime = this.closeData[i].startTime.substring(
|
|
|
|
|
11,
|
|
|
|
|
16
|
|
|
|
|
);
|
|
|
|
|
this.closeData[i].endTime = this.closeData[i].endTime.substring(
|
|
|
|
|
11,
|
|
|
|
|
16
|
|
|
|
|
);
|
|
|
|
|
this.closeData[i].location =
|
|
|
|
|
Number(this.closeData[i].buildNumber) +
|
|
|
|
|
"#" +
|
|
|
|
|
Number(this.closeData[i].floorNumber) +
|
|
|
|
|
"层";
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
loadData() {
|
|
|
|
|
this.current += 1;
|
|
|
|
|
getDailyList(
|
|
|
|
|
this.area,
|
|
|
|
|
this.value1[0],
|
|
|
|
|
this.value1[1],
|
|
|
|
|
this.current,
|
|
|
|
|
this.size
|
|
|
|
|
).then((res) => {
|
|
|
|
|
if (this.current <= res.data.data.pages) {
|
|
|
|
|
const results = res.data.data.records;
|
|
|
|
|
results.forEach((item) => {
|
|
|
|
|
item.date = item.startTime.substring(0, 10);
|
|
|
|
|
item.startTime = item.startTime.substring(11, 16);
|
|
|
|
|
item.endTime = item.endTime.substring(11, 16);
|
|
|
|
|
item.location =
|
|
|
|
|
Number(item.buildNumber) + "#" + Number(item.floorNumber) + "层";
|
|
|
|
|
this.closeData.push(item);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
searchCondition() {
|
|
|
|
|
//废弃 20221022
|
|
|
|
|
this.getConditionBarData();
|
|
|
|
|
// this.getConditionLineData();
|
|
|
|
|
},
|
|
|
|
|
//空调工作和非工作时长甘特图
|
|
|
|
|
getConditionWork(series, category) {
|
|
|
|
|
let myChart = this.$echarts.init(
|
|
|
|
|
document.getElementById("condition-work")
|
|
|
|
|
);
|
|
|
|
|
// let hoursArr = [];
|
|
|
|
|
let now = new Date();
|
|
|
|
|
let baseDate = this.chooseDateValue
|
|
|
|
|
? this.chooseDateValue
|
|
|
|
|
: dateFormat(now, "yyyy-MM-dd");
|
|
|
|
|
let baseDate2 = new Date(baseDate);
|
|
|
|
|
let minDate = baseDate2.setDate(new Date(baseDate).getDate() - 10);
|
|
|
|
|
let _min = dateFormat(new Date(minDate), "yyyy-MM-dd");
|
|
|
|
|
console.log("mindate", baseDate, _min);
|
|
|
|
|
// hoursArr = this.getDayList(); //this.getLastDayList(now, 23);
|
|
|
|
|
// console.log(hoursArr);
|
|
|
|
|
myChart.setOption({
|
|
|
|
|
dataZoom: [
|
|
|
|
|
{
|
|
|
|
|
type: "slider",
|
|
|
|
|
xAxisIndex: 0,
|
|
|
|
|
filterMode: "weakFilter",
|
|
|
|
|
height: 16,
|
|
|
|
|
bottom: 0,
|
|
|
|
|
start: 0,
|
|
|
|
|
end: 100,
|
|
|
|
|
handleIcon:
|
|
|
|
|
"path://M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
|
|
|
|
|
handleSize: "65%",
|
|
|
|
|
showDetail: false,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: "inside",
|
|
|
|
|
id: "insideX",
|
|
|
|
|
xAxisIndex: 0,
|
|
|
|
|
filterMode: "weakFilter",
|
|
|
|
|
start: 0,
|
|
|
|
|
end: 100,
|
|
|
|
|
zoomOnMouseWheel: false,
|
|
|
|
|
moveOnMouseMove: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: "slider",
|
|
|
|
|
yAxisIndex: 0,
|
|
|
|
|
zoomLock: true,
|
|
|
|
|
width: 10,
|
|
|
|
|
right: 10,
|
|
|
|
|
top: 20,
|
|
|
|
|
bottom: 20,
|
|
|
|
|
start: category.length < 15 ? 0 : 60,
|
|
|
|
|
end: category.length < 15 ? 100 : 100,
|
|
|
|
|
handleSize: 0,
|
|
|
|
|
showDetail: false,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: "inside",
|
|
|
|
|
id: "insideY",
|
|
|
|
|
yAxisIndex: 0,
|
|
|
|
|
start: category.length < 15 ? 0 : 60,
|
|
|
|
|
end: category.length < 15 ? 100 : 100,
|
|
|
|
|
zoomOnMouseWheel: false,
|
|
|
|
|
moveOnMouseMove: true,
|
|
|
|
|
moveOnMouseWheel: true,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
tooltip: {
|
|
|
|
|
show: true,
|
|
|
|
|
trigger: "item",
|
|
|
|
|
formatter: function (params) {
|
|
|
|
|
console.info(params);
|
|
|
|
|
let result = params.name + "：<br/>";
|
|
|
|
|
// let result = params[0].name + "：<br/>";
|
|
|
|
|
// for (let i = 0; i < params.length; i++) {
|
|
|
|
|
// if (params[i].data.value.length > 1) {
|
|
|
|
|
// // let value =
|
|
|
|
|
// // params[i].data.value[1].substring(
|
|
|
|
|
// // params[i].data.value[1].lastIndexOf(" ") + 1
|
|
|
|
|
// // ) +
|
|
|
|
|
// // "-" +
|
|
|
|
|
// // params[i].data.value[2].substring(
|
|
|
|
|
// // params[i].data.value[2].lastIndexOf(" ") + 1
|
|
|
|
|
// // ) +
|
|
|
|
|
// // (params[i].data.value[3] == "in"
|
|
|
|
|
// // ? " 工作时段"
|
|
|
|
|
// // : " 非工作时段");
|
|
|
|
|
// let value =
|
|
|
|
|
// params[i].data.value[1] +
|
|
|
|
|
// "-" +
|
|
|
|
|
// params[i].data.value[2] +
|
|
|
|
|
// (params[i].data.value[3] == "in"
|
|
|
|
|
// ? " 工作时段"
|
|
|
|
|
// : " 非工作时段");
|
|
|
|
|
// result = result + value + "</br>";
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
let value =
|
|
|
|
|
params.value[1] +
|
|
|
|
|
"-" +
|
|
|
|
|
params.value[2] +
|
|
|
|
|
(params.value[3] == "in" ? " 工作时段" : " 非工作时段");
|
|
|
|
|
result = result + value + "</br>";
|
|
|
|
|
return result;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
left: "3%",
|
|
|
|
|
right: "4%",
|
|
|
|
|
bottom: "4%",
|
|
|
|
|
containLabel: true,
|
|
|
|
|
top: "8%",
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: "time",
|
|
|
|
|
position: "top",
|
|
|
|
|
// interval: 3600 * 1000, //以一个小时递增
|
|
|
|
|
// splitNumber: 12,
|
|
|
|
|
// data: hoursArr,
|
|
|
|
|
max: `${baseDate} 23:59`,
|
|
|
|
|
min: `${_min} 00:00`, //`${baseDate} 00:00`, //将data里最小时间的整点时间设为min,否则min会以data里面的min为开始进行整点递增
|
|
|
|
|
axisLabel: {
|
|
|
|
|
formatter: function (value, index) {
|
|
|
|
|
var date = new Date(value);
|
|
|
|
|
var day = date.getDate();
|
|
|
|
|
var hours = date.getHours();
|
|
|
|
|
var minute = date.getMinutes();
|
|
|
|
|
if (hours == 0 && minute == 0) {
|
|
|
|
|
return day + "日";
|
|
|
|
|
} else if (hours <= 12) {
|
|
|
|
|
if (hours % 2 == 0) {
|
|
|
|
|
return hours + "a";
|
|
|
|
|
} else {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
if (hours % 2 == 0) {
|
|
|
|
|
// return hours - 12 + "p";
|
|
|
|
|
return hours + "p";
|
|
|
|
|
} else {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// formatter: {
|
|
|
|
|
// day: "{d}日",
|
|
|
|
|
// hour: "{h}",
|
|
|
|
|
// minute: "{h}:{m}",
|
|
|
|
|
// },
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: "rgba(255,255,255,.7)", //更改坐标轴文字颜色
|
|
|
|
|
fontSize: 14, //更改坐标轴文字大小
|
|
|
|
|
},
|
|
|
|
|
showMinLabel: false,
|
|
|
|
|
showMaxLabel: false,
|
|
|
|
|
align: "center",
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "rgba(255,255,255,.7)",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "rgba(255,255,255,0.1)",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
axisTick: {
|
|
|
|
|
inside: true,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
type: "category",
|
|
|
|
|
name: "",
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
color: "rgb(7,230,236)",
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
padding: [0, 0, 0, -20],
|
|
|
|
|
align: "left",
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "rgba(255,255,255,.7)",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: true,
|
|
|
|
|
inside: true,
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
color: "rgba(255,255,255,.7)",
|
|
|
|
|
interval: 0,
|
|
|
|
|
},
|
|
|
|
|
data: category,
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "rgba(255,255,255,0.1)",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
// 用空bar来显示三个图例
|
|
|
|
|
|
|
|
|
|
// { name: state[1], type: 'bar', data: [],barMaxWidth:10 },
|
|
|
|
|
// { name: state[2], type: 'bar', data: [],barMaxWidth:10 },
|
|
|
|
|
{
|
|
|
|
|
type: "custom",
|
|
|
|
|
renderItem: function (params, api) {
|
|
|
|
|
//开发者自定义的图形元素渲染逻辑，是通过书写 renderItem 函数实现的
|
|
|
|
|
var categoryIndex = api.value(0); //这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。
|
|
|
|
|
var start = api.coord([api.value(1), categoryIndex]); // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。
|
|
|
|
|
var end = api.coord([api.value(2), categoryIndex]);
|
|
|
|
|
// var height = api.size([0, 1])[1];
|
|
|
|
|
var height = 10;
|
|
|
|
|
return {
|
|
|
|
|
type: "rect", // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。
|
|
|
|
|
shape: {
|
|
|
|
|
x: start[0],
|
|
|
|
|
y: start[1] - height / 2,
|
|
|
|
|
width: end[0] - start[0],
|
|
|
|
|
height: height,
|
|
|
|
|
},
|
|
|
|
|
style: api.style(),
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
encode: {
|
|
|
|
|
x: [1, 2], // data 中『维度1』和『维度2』对应到 X 轴
|
|
|
|
|
y: 0, // data 中『维度0』对应到 Y 轴
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: function (params) {
|
|
|
|
|
if (
|
|
|
|
|
params.data !== null &&
|
|
|
|
|
params.data["value"] &&
|
|
|
|
|
params.data["value"][3] == "in"
|
|
|
|
|
) {
|
|
|
|
|
return "rgb(70,138,239)";
|
|
|
|
|
} else {
|
|
|
|
|
return "rgb(190,119,99)";
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data: series,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
//24小时
|
|
|
|
|
getDayList() {
|
|
|
|
|
let result = [];
|
|
|
|
|
for (let i = 0; i < 25; i++) {
|
|
|
|
|
let h = i == 24 ? "23:59" : i <= 9 ? "0" + i + ":00" : i + ":00";
|
|
|
|
|
result.push(
|
|
|
|
|
this.timeDate[this.timeDateIndex]
|
|
|
|
|
.replace("-", "/")
|
|
|
|
|
.replace("-", "/") +
|
|
|
|
|
" " +
|
|
|
|
|
h
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
return result;
|
|
|
|
|
},
|
|
|
|
|
//当前时间倒推
|
|
|
|
|
getLastDayList(d, s) {
|
|
|
|
|
let result = [];
|
|
|
|
|
d.setHours(d.getHours());
|
|
|
|
|
var _h = d.getHours() <= 9 ? "0" + d.getHours() : d.getHours();
|
|
|
|
|
result.push(
|
|
|
|
|
d.getFullYear() +
|
|
|
|
|
"/" +
|
|
|
|
|
(d.getMonth() + 1) +
|
|
|
|
|
"/" +
|
|
|
|
|
d.getDate() +
|
|
|
|
|
" " +
|
|
|
|
|
_h +
|
|
|
|
|
":00"
|
|
|
|
|
);
|
|
|
|
|
for (var i = 0; i < s; i++) {
|
|
|
|
|
d.setHours(d.getHours() - 1);
|
|
|
|
|
var h = d.getHours() <= 9 ? "0" + d.getHours() : d.getHours();
|
|
|
|
|
result.push(
|
|
|
|
|
d.getFullYear() +
|
|
|
|
|
"/" +
|
|
|
|
|
(d.getMonth() + 1) +
|
|
|
|
|
"/" +
|
|
|
|
|
d.getDate() +
|
|
|
|
|
" " +
|
|
|
|
|
h +
|
|
|
|
|
":00"
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
return result.reverse();
|
|
|
|
|
},
|
|
|
|
|
//平均温度
|
|
|
|
|
getFloorTemper2(id, value) {
|
|
|
|
|
let myChart = this.$echarts.init(document.getElementById(id));
|
|
|
|
|
myChart.setOption({
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
type: "gauge",
|
|
|
|
|
progress: {
|
|
|
|
|
show: true,
|
|
|
|
|
width: 7,
|
|
|
|
|
roundCap: true,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: "rgb(0,237,254)",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
min: 0,
|
|
|
|
|
max: 40,
|
|
|
|
|
center: ["52%", "51%"],
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
width: 7,
|
|
|
|
|
color: [[1, "transparent"]],
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
radius: "93%",
|
|
|
|
|
startAngle: 225,
|
|
|
|
|
endAngle: -45,
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
pointer: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
anchor: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
splitNumber: 4,
|
|
|
|
|
title: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
detail: {
|
|
|
|
|
valueAnimation: true,
|
|
|
|
|
fontSize: 22,
|
|
|
|
|
color: "rgb(0,237,254)",
|
|
|
|
|
offsetCenter: [0, 15],
|
|
|
|
|
formatter: value + "{b|℃}",
|
|
|
|
|
fontFamily: "fantasy",
|
|
|
|
|
fontWeight: "normal",
|
|
|
|
|
rich: {
|
|
|
|
|
b: {
|
|
|
|
|
fontSize: 15,
|
|
|
|
|
color: "rgb(0,237,254)",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data: [
|
|
|
|
|
{
|
|
|
|
|
value: value,
|
|
|
|
|
name: "平均温度",
|
|
|
|
|
title: {
|
|
|
|
|
show: true,
|
|
|
|
|
color: "rgba(255,255,255,.5)",
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
offsetCenter: [0, -10],
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
//开机时长
|
|
|
|
|
getOpenNum(series) {
|
|
|
|
|
let myChart = this.$echarts.init(document.getElementById("open-num"));
|
|
|
|
|
myChart.setOption({
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: "axis",
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
left: "3%",
|
|
|
|
|
right: "4%",
|
|
|
|
|
top: "5%",
|
|
|
|
|
bottom: "0%",
|
|
|
|
|
containLabel: true,
|
|
|
|
|
},
|
|
|
|
|
xAxis: [
|
|
|
|
|
{
|
|
|
|
|
type: "category",
|
|
|
|
|
data: [
|
|
|
|
|
"10/11",
|
|
|
|
|
"10/10",
|
|
|
|
|
"10/11",
|
|
|
|
|
"10/12",
|
|
|
|
|
"10/13",
|
|
|
|
|
"10/14",
|
|
|
|
|
"10/15",
|
|
|
|
|
"10/16",
|
|
|
|
|
"10/17",
|
|
|
|
|
"10/18",
|
|
|
|
|
"10/19",
|
|
|
|
|
"10/20",
|
|
|
|
|
],
|
|
|
|
|
axisLabel: {
|
|
|
|
|
color: "rgba(255,255,255,.7)",
|
|
|
|
|
interval: 0,
|
|
|
|
|
rotate: 45,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
yAxis: [
|
|
|
|
|
{
|
|
|
|
|
type: "value",
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
},
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: true,
|
|
|
|
|
inside: true,
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
color: "rgba(255,255,255,.7)",
|
|
|
|
|
},
|
|
|
|
|
splitLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "rgba(255,255,255,.1)",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: this.buildValue,
|
|
|
|
|
type: "bar",
|
|
|
|
|
emphasis: {
|
|
|
|
|
focus: "series",
|
|
|
|
|
},
|
|
|
|
|
data: [0, 10, 500, 48, 68, 125, 15, 88, 45, 12, 45, 78],
|
|
|
|
|
barWidth: 8,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: "rgb(70,138,239)",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.condition-analysis {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 64.312rem;
|
|
|
|
|
height: 33.375rem;
|
|
|
|
|
background-image: url(../../../../public/img/analysis/condition-analy.png);
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
// overflow: hidden;
|
|
|
|
|
|
|
|
|
|
.yq-title {
|
|
|
|
|
margin: 0.7rem 0 0 2.5rem;
|
|
|
|
|
color: white;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.change-tab {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
border: 1px solid #08a6ff;
|
|
|
|
|
width: 7.5rem;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
border-radius: 0.312rem;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
z-index: 100;
|
|
|
|
|
div {
|
|
|
|
|
color: white;
|
|
|
|
|
width: 50%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
border-right: 1px solid rgb(8, 166, 255);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.search-box {
|
|
|
|
|
margin-top: 2.5rem;
|
|
|
|
|
margin-left: 1.25rem;
|
|
|
|
|
margin-right: 1.25rem;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
/deep/ .el-date-editor .el-input__inner {
|
|
|
|
|
background-color: rgb(152, 160, 173);
|
|
|
|
|
color: rgba(255, 255, 255, 0.7);
|
|
|
|
|
border-color: rgb(152, 160, 173);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .el-date-editor .el-input__inner::-webkit-input-placeholder {
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.choose-time {
|
|
|
|
|
// margin-top: 2.5rem;
|
|
|
|
|
// margin-left: 1.25rem;
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
color: rgb(8, 231, 235);
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.search-btn {
|
|
|
|
|
background-color: rgb(1, 238, 235);
|
|
|
|
|
color: #0f93e1;
|
|
|
|
|
border: 0;
|
|
|
|
|
width: 4.687rem;
|
|
|
|
|
margin-left: 0.937rem;
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .el-date-editor .el-input__inner {
|
|
|
|
|
background-color: rgb(152, 160, 173);
|
|
|
|
|
color: rgba(255, 255, 255, 0.7);
|
|
|
|
|
border-color: rgb(152, 160, 173);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .el-date-editor .el-input__inner::-webkit-input-placeholder {
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
/deep/ .el-select .el-input__inner {
|
|
|
|
|
background-color: rgb(152, 160, 173);
|
|
|
|
|
color: rgba(255, 255, 255, 0.7);
|
|
|
|
|
border-color: rgb(152, 160, 173);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .el-select .el-input__inner::-webkit-input-placeholder {
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.charts {
|
|
|
|
|
display: flex;
|
|
|
|
|
.legends {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 0.75rem;
|
|
|
|
|
top: 0.937rem;
|
|
|
|
|
&-block-left,
|
|
|
|
|
&-block-right {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
div {
|
|
|
|
|
width: 0.937rem;
|
|
|
|
|
height: 0.312rem;
|
|
|
|
|
background-color: rgb(70, 138, 239);
|
|
|
|
|
margin-right: 0.5rem;
|
|
|
|
|
}
|
|
|
|
|
span {
|
|
|
|
|
color: white;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&-block-right {
|
|
|
|
|
margin-left: 1.25rem;
|
|
|
|
|
div {
|
|
|
|
|
background-color: rgb(190, 119, 99);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.work_time_tool {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: -1rem;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
.time_date_act {
|
|
|
|
|
margin: 0 2rem;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#condition-work {
|
|
|
|
|
width: 29.75rem;
|
|
|
|
|
height: 23.75rem;
|
|
|
|
|
margin: 1.25rem 0 0 1.25rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.open-statistics {
|
|
|
|
|
width: 30rem;
|
|
|
|
|
margin-left: 1.25rem;
|
|
|
|
|
// 开机时长
|
|
|
|
|
.open-time {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: flex-end;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
width: calc(100% - 20px);
|
|
|
|
|
|
|
|
|
|
.warm-chart {
|
|
|
|
|
width: 7.5rem;
|
|
|
|
|
height: 7.187rem;
|
|
|
|
|
background-image: url(../../../../public/img/analysis/warm-charts.png);
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
#floor-temper3,
|
|
|
|
|
#floor-temper4,
|
|
|
|
|
#floor-temper5 {
|
|
|
|
|
width: 7.187rem;
|
|
|
|
|
height: 6.875rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: -0.312rem;
|
|
|
|
|
left: 35%;
|
|
|
|
|
font-size: 0.875rem;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
p {
|
|
|
|
|
color: rgb(7, 230, 236);
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#open-num {
|
|
|
|
|
width: 30rem;
|
|
|
|
|
height: 9.375rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.total-source-table {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
width: 100%;
|
|
|
|
|
max-height: 10rem;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
margin-top: 0.937rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .el-table th.is-leaf {
|
|
|
|
|
background-color: transparent !important;
|
|
|
|
|
border: 0;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .el-table th.is-leaf:nth-of-type(even) {
|
|
|
|
|
color: rgba(153, 153, 153, 0.3);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
|
|
|
|
|
background-color: transparent !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .el-table td {
|
|
|
|
|
border: 0;
|
|
|
|
|
color: rgba(255, 255, 255, 0.7);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/.el-table::before {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .el-table__body-wrapper .el-table__row:nth-of-type(even) {
|
|
|
|
|
background-color: rgba($color: rgb(41, 84, 125), $alpha: 0.3) !important;
|
|
|
|
|
}
|
|
|
|
|
/deep/ .el-table th.gutter {
|
|
|
|
|
display: none !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
