jiangyq
/
YZProjectCloud
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改大屏和后台前端

dev_xd
haha 2025-05-10 01:07:53 +08:00
parent 08df9489a5
commit 9864ee43c7
3 changed files with 529 additions and 394 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
yanzhu-bigscreen/src/components/trend-chart-line.vue
View File

@ -1,16 +1,14 @@
<template> <template>
<div :style="{ 'height': height + 'px' }" ref="chart"> <div :style="{ 'height': height + 'px' }" ref="chart"></div>
</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() {
@ -27,7 +25,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) {
@ -42,9 +40,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: {
@ -59,7 +57,7 @@ export default {
}, },
}, },
data: data.lineData[i], data: data.lineData[i],
},) })
} }
} }
@ -67,103 +65,110 @@ 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: 14, fontSize: is1K ? 12 : is2K ? 20 : 30,
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: 14 fontSize: 12,
}, },
}, },
}, },
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: 14 fontSize: is1K ? 12 : is2K ? 16 : 20,
}, },
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "#25597e", color: '#25597e',
type: "dashed", type: 'dashed',
}, },
}, },
}, },
series: series series: series,
}
}; chChart.setOption(this.option)
chChart.setOption(this.option); window.onresize = chChart.resize
window.onresize = chChart.resize;
}) })
}, },
}, },
watch: { watch: {
data: function (n, o) { data: function (n, o) {
this.getChartData() this.getChartData()
} },
} },
} }
</script> </script>

418
yanzhu-bigscreen/src/views/safety/powerIot.vue
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"> <el-col :span="18" style="height: 100%;">
<module-one-1-3 label="配电箱监测"> <module-one-1-3 label="配电箱监测" class="left-data1">
<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,7 +10,10 @@
</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>{{ runData.voltageA }} <span>℃</span></p> <p v-cloak>
{{ runData.voltageA }}
<span>℃</span>
</p>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -21,7 +24,10 @@
</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>{{ runData.voltageB }} <span>℃</span></p> <p v-cloak>
{{ runData.voltageB }}
<span>℃</span>
</p>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -32,7 +38,10 @@
</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>{{ runData.voltageC }} <span>℃</span></p> <p v-cloak>
{{ runData.voltageC }}
<span>℃</span>
</p>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -43,7 +52,10 @@
</div> </div>
<div class="process-control-current-value-data"> <div class="process-control-current-value-data">
<div>零线温度</div> <div>零线温度</div>
<p v-cloak>{{ runData.temperature }} <span>℃</span></p> <p v-cloak>
{{ runData.temperature }}
<span>℃</span>
</p>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -51,7 +63,10 @@
<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">{{ powerRun.ratedTemperature }} <span>℃</span></p> <p class="red-data">
{{ powerRun.ratedTemperature }}
<span>℃</span>
</p>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -64,7 +79,10 @@
</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>{{ runData.currentA }} <span>A</span></p> <p v-cloak>
{{ runData.currentA }}
<span>A</span>
</p>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -75,7 +93,10 @@
</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>{{ runData.currentB }} <span>A</span></p> <p v-cloak>
{{ runData.currentB }}
<span>A</span>
</p>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -86,7 +107,10 @@
</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>{{ runData.currentC }} <span>A</span></p> <p v-cloak>
{{ runData.currentC }}
<span>A</span>
</p>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -94,31 +118,20 @@
</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)"> <div :class="trendBtnNav == 7 ? 'active' : ''" @click="initTrendData(7)">近7天</div>
近7天 <div :class="trendBtnNav == 30 ? 'active' : ''" @click="initTrendData(30)">近30天</div>
</div> </div>
<div :class="trendBtnNav == 30 ? 'active' : ''" @click="initTrendData(30)"> <trend-chart-line :key="chartKey" :height="chartHeight" :data="trendData"></trend-chart-line>
近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)"> <div :class="tumidityBtnNav == 7 ? 'active' : ''" @click="initTumidityData(7)">近7天</div>
近7天 <div :class="tumidityBtnNav == 30 ? 'active' : ''" @click="initTumidityData(30)">近30天</div>
</div> </div>
<div <trend-chart-line :key="chartKey" :height="chartHeight" :data="tumidityData"></trend-chart-line>
: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"> <el-col :span="6" style="height: 100%;">
<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">
@ -133,8 +146,7 @@
<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" <el-option v-for="item in powerRunList" :key="item.id" :label="item.deviceSn+'_'+item.deviceName" :value="item.id"></el-option>
:value="item.id"></el-option>
</el-select> </el-select>
</div> </div>
<div class="hj-moment-state"> <div class="hj-moment-state">
@ -147,9 +159,7 @@
<tr> <tr>
<td>电箱等级：</td> <td>电箱等级：</td>
<td> <td>
<div class="hj-moment-blue"> <div class="hj-moment-blue">{{ powerRun.levels }} 级配电箱</div>
{{ powerRun.levels }} 级配电箱
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -180,19 +190,10 @@
<div class="analyse-text">正在发生</div> <div class="analyse-text">正在发生</div>
</div> </div>
<div class="afoot-content"> <div class="afoot-content">
<div <div class="afoot-overflow process-afoot-overflow" style="height: 530px" id="afootOverflow" @mouseout="listMinMouseout" @mouseover="listMinMouseover">
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>
<div <template v-if="warningDataList.length > 0">
v-if="warningDataList.length > 0" <div :key="i" :class="forIndex == i ? 'afoot-con-for active' : 'afoot-con-for '" v-for="(item, i) in warningDataList">
: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">
@ -201,6 +202,7 @@
</div> </div>
</div> </div>
</div> </div>
</template>
</div> </div>
</div> </div>
</div> </div>
@ -213,9 +215,9 @@ export default {
data() { data() {
return { return {
runData: { runData: {
voltageA:0.00, voltageA: 0.0,
voltageB:0.00, voltageB: 0.0,
voltageC:0.00, voltageC: 0.0,
}, },
powerRun: {}, powerRun: {},
powerRunId: 0, powerRunId: 0,
@ -227,141 +229,269 @@ 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.init(); this.reSize()
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 this.$api.powerIot.findIotDatasMonitor(this.selProject.id, this.powerRun.id, this.trendBtnNav).then((res) => {
.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 this.$api.powerIot.findIotDatasMonitor(this.selProject.id, this.powerRun.id, this.tumidityBtnNav).then((res) => {
.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 this.$api.powerIot.findIotWarnings(this.selProject.id, this.powerRun.id).then((res) => {
.findIotWarnings(this.selProject.id, this.powerRun.id) this.warningDataList = res.data
.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>

2
yanzhu-ui-vue3/src/views/manage/greenCarbonData/index.vue
View File

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