Compare commits

..

No commits in common. "60b880930a480519c9e37cd2eaa77b6510d0bcbd" and "7d14cda64cf5eb60d591dec079e77efd046a49cb" have entirely different histories.

3 changed files with 396 additions and 531 deletions

View File

@ -1,14 +1,16 @@
<template> <template>
<div :style="{ 'height': height + 'px' }" ref="chart"></div> <div :style="{ 'height': height + 'px' }" ref="chart">
</div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
data: { data: {
type: [Object, Array], type: [Object, Array]
}, },
height: { height: {
type: Number, type: Number
}, },
}, },
data() { data() {
@ -25,7 +27,7 @@ export default {
}, },
getChartData() { getChartData() {
// //
var chChartPie = echarts.init(this.$refs.chart) var chChartPie = echarts.init(this.$refs.chart);
this.echartPie(chChartPie, this.data) this.echartPie(chChartPie, this.data)
}, },
echartPie(chChart, data) { echartPie(chChart, data) {
@ -40,9 +42,9 @@ export default {
for (let i = 0; i < data.lineData.length; i++) { for (let i = 0; i < data.lineData.length; i++) {
series.push({ series.push({
name: data.legend[i], name: data.legend[i],
type: 'line', type: "line",
smooth: true, smooth: true,
symbol: 'circle', symbol: "circle",
symbolSize: 5, symbolSize: 5,
showSymbol: false, showSymbol: false,
lineStyle: { lineStyle: {
@ -57,7 +59,7 @@ export default {
}, },
}, },
data: data.lineData[i], data: data.lineData[i],
}) },)
} }
} }
@ -65,110 +67,103 @@ export default {
if (data.unit) { if (data.unit) {
unit = '单位:' + data.unit unit = '单位:' + data.unit
} }
let is1K = this.$dpi() == '1K'
let is2K = this.$dpi() == '2K'
this.option = { this.option = {
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
axisPointer: { axisPointer: {
lineStyle: { lineStyle: {
color: '#57617B', color: "#57617B",
}, },
}, },
textStyle: {
fontSize: is1K ? 12 : is2K ? 18 : 20,
},
}, },
legend: { legend: {
icon: 'rect', icon: "rect",
itemWidth: 14, itemWidth: 14,
itemHeight: 10, itemHeight: 10,
itemGap: 15, itemGap: 15,
data: data.legend, data: data.legend,
top: -5, top: -5,
textStyle: { textStyle: {
fontSize: is1K ? 12 : is2K ? 20 : 30, fontSize: 14,
color: '#c8dbfc', color: "#c8dbfc",
}, },
}, },
grid: { grid: {
top: '15%', top: '15%',
left: '2%', left: "2%",
right: '3%', right: "3%",
bottom: '2%', bottom: "2%",
containLabel: true, containLabel: true,
}, },
xAxis: { xAxis: {
boundaryGap: false, boundaryGap: false,
type: 'category', type: "category",
data: data.date, data: data.date,
axisLine: { axisLine: {
//线x //线x
show: true, show: true,
lineStyle: { lineStyle: {
color: '#25597e', color: "#25597e",
type: 'dashed', type: "dashed",
}, },
}, },
axisTick: { axisTick: {
show: false, show: false
}, },
axisLabel: { axisLabel: {
// //
textStyle: { textStyle: {
color: '#c5d9fc', color: "#c5d9fc",
margin: 20, margin: 20,
fontSize: 12, fontSize: 14
}, },
}, },
}, },
yAxis: { yAxis: {
name: unit, name: unit,
type: 'value', type: "value",
nameTextStyle: {
color: '#c5d9fc',
fontSize: is1K ? 12 : is2K ? 18 : 24,
},
axisLine: { axisLine: {
//线x //线x
show: false, show: false,
lineStyle: { lineStyle: {
color: '#c5d9fc', color: "#c5d9fc",
type: 'dashed', type: "dashed",
}, },
}, },
axisTick: { axisTick: {
show: false, show: false
}, },
axisLabel: { axisLabel: {
show: true, show: true,
// //
textStyle: { textStyle: {
color: '#c5d9fc', color: "#c5d9fc",
margin: 20, margin: 20,
fontSize: is1K ? 12 : is2K ? 16 : 20, fontSize: 14
}, },
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: '#25597e', color: "#25597e",
type: 'dashed', type: "dashed",
}, },
}, },
}, },
series: series, series: series
}
chChart.setOption(this.option) };
window.onresize = chChart.resize chChart.setOption(this.option);
window.onresize = chChart.resize;
}) })
}, },
}, },
watch: { watch: {
data: function (n, o) { data: function (n, o) {
this.getChartData() this.getChartData()
}, }
}, }
} }
</script> </script>

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="project-power-iot main-page"> <div class="project-power-iot main-page">
<el-col :span="18" style="height: 100%;"> <el-col :span="18">
<module-one-1-3 label="配电箱监测" class="left-data1"> <module-one-1-3 label="配电箱监测">
<el-row> <el-row>
<el-col :span="5"> <el-col :span="5">
<div class="process-control-current-value-con"> <div class="process-control-current-value-con">
@ -10,10 +10,7 @@
</div> </div>
<div class="process-control-current-value-data"> <div class="process-control-current-value-data">
<div>A相电压</div> <div>A相电压</div>
<p v-cloak> <p v-cloak>{{ runData.voltageA }} <span></span></p>
{{ runData.voltageA }}
<span></span>
</p>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -24,10 +21,7 @@
</div> </div>
<div class="process-control-current-value-data"> <div class="process-control-current-value-data">
<div>B相电压</div> <div>B相电压</div>
<p v-cloak> <p v-cloak>{{ runData.voltageB }} <span></span></p>
{{ runData.voltageB }}
<span></span>
</p>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -38,10 +32,7 @@
</div> </div>
<div class="process-control-current-value-data"> <div class="process-control-current-value-data">
<div>C相电压</div> <div>C相电压</div>
<p v-cloak> <p v-cloak>{{ runData.voltageC }} <span></span></p>
{{ runData.voltageC }}
<span></span>
</p>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -52,10 +43,7 @@
</div> </div>
<div class="process-control-current-value-data"> <div class="process-control-current-value-data">
<div>零线温度</div> <div>零线温度</div>
<p v-cloak> <p v-cloak>{{ runData.temperature }} <span></span></p>
{{ runData.temperature }}
<span></span>
</p>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -63,10 +51,7 @@
<div class="process-control-current-value-con"> <div class="process-control-current-value-con">
<div class="process-control-current-value-data"> <div class="process-control-current-value-data">
<div>温度阈值</div> <div>温度阈值</div>
<p class="red-data"> <p class="red-data">{{ powerRun.ratedTemperature }} <span></span></p>
{{ powerRun.ratedTemperature }}
<span></span>
</p>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -79,10 +64,7 @@
</div> </div>
<div class="process-control-current-value-data"> <div class="process-control-current-value-data">
<div>A相电流</div> <div>A相电流</div>
<p v-cloak> <p v-cloak>{{ runData.currentA }} <span>A</span></p>
{{ runData.currentA }}
<span>A</span>
</p>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -93,10 +75,7 @@
</div> </div>
<div class="process-control-current-value-data"> <div class="process-control-current-value-data">
<div>B相电流</div> <div>B相电流</div>
<p v-cloak> <p v-cloak>{{ runData.currentB }} <span>A</span></p>
{{ runData.currentB }}
<span>A</span>
</p>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -107,10 +86,7 @@
</div> </div>
<div class="process-control-current-value-data"> <div class="process-control-current-value-data">
<div>C相电流</div> <div>C相电流</div>
<p v-cloak> <p v-cloak>{{ runData.currentC }} <span>A</span></p>
{{ runData.currentC }}
<span>A</span>
</p>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -118,20 +94,31 @@
</module-one-1-3> </module-one-1-3>
<module-one-1-3 label="电压监控"> <module-one-1-3 label="电压监控">
<div class="sjk-chart-line-title quality-button"> <div class="sjk-chart-line-title quality-button">
<div :class="trendBtnNav == 7 ? 'active' : ''" @click="initTrendData(7)">7</div> <div :class="trendBtnNav == 7 ? 'active' : ''" @click="initTrendData(7)">
<div :class="trendBtnNav == 30 ? 'active' : ''" @click="initTrendData(30)">30</div> 近7天
</div> </div>
<trend-chart-line :key="chartKey" :height="chartHeight" :data="trendData"></trend-chart-line> <div :class="trendBtnNav == 30 ? 'active' : ''" @click="initTrendData(30)">
近30天
</div>
</div>
<trend-chart-line :height="220" :data="trendData"></trend-chart-line>
</module-one-1-3> </module-one-1-3>
<module-one-1-3 label="电流监控"> <module-one-1-3 label="电流监控">
<div class="sjk-chart-line-title quality-button"> <div class="sjk-chart-line-title quality-button">
<div :class="tumidityBtnNav == 7 ? 'active' : ''" @click="initTumidityData(7)">7</div> <div :class="tumidityBtnNav == 7 ? 'active' : ''" @click="initTumidityData(7)">
<div :class="tumidityBtnNav == 30 ? 'active' : ''" @click="initTumidityData(30)">30</div> 近7天
</div> </div>
<trend-chart-line :key="chartKey" :height="chartHeight" :data="tumidityData"></trend-chart-line> <div
:class="tumidityBtnNav == 30 ? 'active' : ''"
@click="initTumidityData(30)"
>
近30天
</div>
</div>
<trend-chart-line :height="220" :data="tumidityData"></trend-chart-line>
</module-one-1-3> </module-one-1-3>
</el-col> </el-col>
<el-col :span="6" style="height: 100%;"> <el-col :span="6">
<div class="analyse-max"> <div class="analyse-max">
<div class="analyse-map"> <div class="analyse-map">
<div class="analyse-title analyse_title_blue"> <div class="analyse-title analyse_title_blue">
@ -146,7 +133,8 @@
<div class="hj-moment-choice"> <div class="hj-moment-choice">
<div class="hj-moment-select"> <div class="hj-moment-select">
<el-select v-model="powerRunId" @change="doIotSelect" popper-class="header-sel-project-pop"> <el-select v-model="powerRunId" @change="doIotSelect" popper-class="header-sel-project-pop">
<el-option v-for="item in powerRunList" :key="item.id" :label="item.deviceSn+'_'+item.deviceName" :value="item.id"></el-option> <el-option v-for="item in powerRunList" :key="item.id" :label="item.deviceSn+'_'+item.deviceName"
:value="item.id"></el-option>
</el-select> </el-select>
</div> </div>
<div class="hj-moment-state"> <div class="hj-moment-state">
@ -159,7 +147,9 @@
<tr> <tr>
<td>电箱等级</td> <td>电箱等级</td>
<td> <td>
<div class="hj-moment-blue">{{ powerRun.levels }} 级配电箱</div> <div class="hj-moment-blue">
{{ powerRun.levels }} 级配电箱
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -190,10 +180,19 @@
<div class="analyse-text">正在发生</div> <div class="analyse-text">正在发生</div>
</div> </div>
<div class="afoot-content"> <div class="afoot-content">
<div class="afoot-overflow process-afoot-overflow" style="height: 530px" id="afootOverflow" @mouseout="listMinMouseout" @mouseover="listMinMouseover"> <div
class="afoot-overflow process-afoot-overflow"
style="height: 530px"
id="afootOverflow"
@mouseout="listMinMouseout"
@mouseover="listMinMouseover"
>
<div v-if="warningDataList.length == 0" class="not-data"></div> <div v-if="warningDataList.length == 0" class="not-data"></div>
<template v-if="warningDataList.length > 0"> <div
<div :key="i" :class="forIndex == i ? 'afoot-con-for active' : 'afoot-con-for '" v-for="(item, i) in warningDataList"> v-if="warningDataList.length > 0"
:class="forIndex == i ? 'afoot-con-for active' : 'afoot-con-for '"
v-for="(item, i) in warningDataList"
>
<div class="afoot-machinery-nam" v-cloak>{{ item.warningType }}</div> <div class="afoot-machinery-nam" v-cloak>{{ item.warningType }}</div>
<div class="afoot-machinery-info"> <div class="afoot-machinery-info">
<div class="afoot-machinery-data"> <div class="afoot-machinery-data">
@ -202,7 +201,6 @@
</div> </div>
</div> </div>
</div> </div>
</template>
</div> </div>
</div> </div>
</div> </div>
@ -215,9 +213,9 @@ export default {
data() { data() {
return { return {
runData: { runData: {
voltageA: 0.0, voltageA:0.00,
voltageB: 0.0, voltageB:0.00,
voltageC: 0.0, voltageC:0.00,
}, },
powerRun: {}, powerRun: {},
powerRunId: 0, powerRunId: 0,
@ -229,269 +227,141 @@ export default {
warningDataList: [], warningDataList: [],
forIndex: 0, forIndex: 0,
warningInterval: undefined, warningInterval: undefined,
dpi: '',
chartKey: 0, };
chartHeight: 220,
}
}, },
mounted() { mounted() {
this.$store.dispatch('ChangeNav', 306) this.$store.dispatch("ChangeNav", 306);
this.$bus.$on('projectChange', (prj) => { this.$bus.$on("projectChange", (prj) => {
this.selProject = prj this.selProject = prj;
this.init() this.init();
}) });
this.selProject = this.$store.getters.selProject this.selProject = this.$store.getters.selProject;
this.reSize() this.init();
window.addEventListener('resize', () => {
if (this.dpi != this.$dpi()) {
this.reSize()
}
})
this.init()
}, },
methods: { methods: {
reSize() {
this.dpi = this.$dpi()
this.chartHeight = this.dpi == '1K' ? 180 : this.dpi == '2K' ? 260 : 500
this.chartKey++
console.log('------>', this.chartHeight)
},
init() { init() {
if (!this.selProject) { if (!this.selProject) {
return return;
} }
this.$api.powerIot.findProAllConfigPoint(this.selProject.id).then((res) => { this.$api.powerIot.findProAllConfigPoint(this.selProject.id).then((res) => {
if (res.data.length > 0) { if (res.data.length > 0) {
this.powerRunId = res.data[0].id this.powerRunId = res.data[0].id;
this.powerRun = res.data[0] this.powerRun = res.data[0];
this.initTrendData() this.initTrendData();
this.initTumidityData() this.initTumidityData();
this.initPowerWarning() this.initPowerWarning();
} }
this.powerRunList = res.data this.powerRunList = res.data;
}) });
}, },
initTrendData(_date) { initTrendData(_date) {
if (_date) { if (_date) {
this.trendBtnNav = _date this.trendBtnNav = _date;
} }
this.$api.powerIot.findIotDatasMonitor(this.selProject.id, this.powerRun.id, this.trendBtnNav).then((res) => { this.$api.powerIot
.findIotDatasMonitor(this.selProject.id, this.powerRun.id, this.trendBtnNav)
.then((res) => {
if (res.data.length > 0) { if (res.data.length > 0) {
this.runData = res.data[0] this.runData = res.data[0];
res.data.reverse() res.data.reverse();
let _data1 = [] let _data1 = [];
let _data2 = [] let _data2 = [];
let _data3 = [] let _data3 = [];
let _data4 = [] let _data4 = [];
let _data5 = [] let _data5 = [];
let _data6 = [] let _data6 = [];
let _date8 = [] let _date8 = [];
res.data.forEach((item) => { res.data.forEach(item => {
_data1.push(item.voltageA) _data1.push(item.voltageA);
_data2.push(item.voltageB) _data2.push(item.voltageB);
_data3.push(item.voltageC) _data3.push(item.voltageC);
_data4.push(item.voltageAb) _data4.push(item.voltageAb);
_data5.push(item.voltageBc) _data5.push(item.voltageBc);
_data6.push(item.voltageCa) _data6.push(item.voltageCa);
_date8.push(item.createTime) _date8.push(item.createTime);
}) });
let _lineData = [] let _lineData = [];
_lineData.push(_data1) _lineData.push(_data1);
_lineData.push(_data2) _lineData.push(_data2);
_lineData.push(_data3) _lineData.push(_data3);
_lineData.push(_data4) _lineData.push(_data4);
_lineData.push(_data5) _lineData.push(_data5);
_lineData.push(_data6) _lineData.push(_data6);
let _color = ['#0078e7', '#f8e04d', '#00bcd4', '#008ffd', '#f6d023', '#5af9fd'] let _color = ['#0078e7','#f8e04d','#00bcd4','#008ffd','#f6d023','#5af9fd'];
let _legend = ['A相电压', 'B相电压', 'C相电压', 'AB相电压', 'BC相电压', 'CA相电压'] let _legend = ['A相电压','B相电压','C相电压','AB相电压','BC相电压','CA相电压'];
let _trendData = { lineData: _lineData, color: _color, legend: _legend, unit: 'V', date: _date8 } let _trendData = {'lineData':_lineData,'color':_color,'legend':_legend,'unit':'V','date':_date8};
this.trendData = _trendData this.trendData = _trendData;
} }
}) });
}, },
initTumidityData(_date) { initTumidityData(_date) {
if (_date) { if (_date) {
this.tumidityBtnNav = _date this.tumidityBtnNav = _date;
} }
let _ratedCurrent = this.powerRun.ratedCurrent let _ratedCurrent = this.powerRun.ratedCurrent;
this.$api.powerIot.findIotDatasMonitor(this.selProject.id, this.powerRun.id, this.tumidityBtnNav).then((res) => { this.$api.powerIot
.findIotDatasMonitor(this.selProject.id, this.powerRun.id, this.tumidityBtnNav)
.then((res) => {
if (res.data.length > 0) { if (res.data.length > 0) {
res.data.reverse() res.data.reverse();
let _data1 = [] let _data1 = [];
let _data2 = [] let _data2 = [];
let _data3 = [] let _data3 = [];
let _data4 = [] let _data4 = [];
let _date8 = [] let _date8 = [];
res.data.forEach((item) => { res.data.forEach(item => {
_data1.push(item.currentA) _data1.push(item.currentA);
_data2.push(item.currentB) _data2.push(item.currentB);
_data3.push(item.currentC) _data3.push(item.currentC);
_data4.push(_ratedCurrent) _data4.push(_ratedCurrent);
_date8.push(item.createTime) _date8.push(item.createTime);
}) });
let _lineData = [] let _lineData = [];
_lineData.push(_data1) _lineData.push(_data1);
_lineData.push(_data2) _lineData.push(_data2);
_lineData.push(_data3) _lineData.push(_data3);
_lineData.push(_data4) _lineData.push(_data4);
let _color = ['#008ffd', '#f6d023', '#5af9fd', '#FF0016'] let _color = ['#008ffd','#f6d023','#5af9fd','#FF0016'];
let _legend = ['A相电流', 'B相电流', 'C相电流', '电流阈值'] let _legend = ['A相电流','B相电流','C相电流','电流阈值'];
let _tumidityData = { lineData: _lineData, color: _color, legend: _legend, unit: 'A', date: _date8 } let _tumidityData = {'lineData':_lineData,'color':_color,'legend':_legend,'unit':'A','date':_date8};
this.tumidityData = _tumidityData this.tumidityData = _tumidityData;
} }
}) });
}, },
initPowerWarning(){ initPowerWarning(){
this.$api.powerIot.findIotWarnings(this.selProject.id, this.powerRun.id).then((res) => { this.$api.powerIot
this.warningDataList = res.data .findIotWarnings(this.selProject.id, this.powerRun.id)
}) .then((res) => {
this.warningDataList = res.data;
});
}, },
doIotSelect(){ doIotSelect(){
let _iots = this.powerRunList.filter((detail) => detail.id == this.powerRunId) let _iots = this.powerRunList.filter(detail => detail.id == this.powerRunId);
if (_iots.length > 0) { if (_iots.length > 0) {
this.powerRun = _iots[0] this.powerRun = _iots[0];
this.initTrendData() this.initTrendData();
this.initTumidityData() this.initTumidityData();
this.initPowerWarning() this.initPowerWarning();
} }
}, },
automaticRoll() { automaticRoll() {
var height = $('.afoot-con-for').innerHeight() var height = $(".afoot-con-for").innerHeight()
if (this.forIndex == this.warningDataList.length) { if (this.forIndex == this.warningDataList.length) {
this.forIndex = 0 this.forIndex = 0
} else { } else {
this.forIndex = this.forIndex + 1 this.forIndex = this.forIndex + 1
} }
$('#afootOverflow').animate({ scrollTop: height * this.forIndex + 'px' }) $("#afootOverflow").animate({ scrollTop: (height * this.forIndex) + 'px' })
}, },
listMinMouseover() { listMinMouseover() {
clearInterval(this.warningInterval) clearInterval(this.warningInterval);
}, },
listMinMouseout() { listMinMouseout() {
this.warningInterval = setInterval(this.automaticRoll, 5000) this.warningInterval = setInterval(this.automaticRoll, 5000);
}, },
}, },
} };
</script> </script>
<style lang="less">
.project-power-iot {
.screen-one-1-3 {
height: calc(33% - 20px);
}
.left-data1 {
.current-value-img {
height: 80px;
width: 80px;
}
}
}
@media (min-width: 1921px) and (max-width: 2560px) {
.project-power-iot {
.left-data1 {
.el-row {
margin-top: 20px;
&:first-child {
margin-bottom: 30px;
}
}
.current-value-img {
height: 100px;
width: 100px;
img {
width: 50px;
height: 50px;
}
}
.process-control-current-value-data {
font-size: 26px;
}
}
.sjk-chart-line-title {
div {
font-size: 26px;
padding: 8px 16px;
}
}
.analyse-max {
* {
font-size: 18px;
}
.analyse-text,
.analyse-equipment {
font-size: 24px;
}
.analyse-title {
height: 64px;
}
.hj-moment-max {
td {
font-size: 18px;
}
}
.afoot-machinery-nam {
font-size: 18px;
}
}
.el-input__inner {
font-size: 18px;
height: 36px;
}
}
}
@media (min-width: 2561px) {
.project-power-iot {
.left-data1 {
.el-row {
margin-top: 60px;
&:first-child {
margin-bottom: 80px;
}
}
.current-value-img {
height: 160px;
width: 160px;
img {
width: 80px;
height: 80px;
}
}
.process-control-current-value-data {
font-size: 32px;
}
}
.sjk-chart-line-title {
div {
font-size: 32px;
padding: 10px 20px;
}
}
.analyse-max {
* {
font-size: 24px;
}
.analyse-text,
.analyse-equipment {
font-size: 32px;
}
.analyse-title {
height: 100px;
}
.hj-moment-max {
td {
font-size: 24px;
}
}
.afoot-machinery-nam {
font-size: 24px;
}
}
.el-input__inner {
font-size: 24px;
height: 48px;
}
}
}
</style>

View File

@ -346,7 +346,7 @@ function handleDelete(row) {
proxy.$modal proxy.$modal
.confirm('是否确认删除建碳管理编号为【' + _ids + '】的数据项?') .confirm('是否确认删除建碳管理编号为【' + _ids + '】的数据项?')
.then(function () { .then(function () {
return delGreenCarbonData(row && row.id ? row.id : ids.value) return delGreenCarbonData(_ids)
}) })
.then(() => { .then(() => {
getList() getList()