You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1214 lines
35 KiB
1214 lines
35 KiB
<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>
|
|
|