mengff
/
jihe-hs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

边坡弹窗表格字号调整，光伏保留两位

develop
王兴琳 2 weeks ago
parent
39617976ab
commit
38e08d2022
2 changed files with 129 additions and 118 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 217
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RoadNetworkFacilities/index.vue
  2. 30
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/solar/index_v1.vue

217
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RoadNetworkFacilities/index.vue
View File

@ -1,57 +1,61 @@
<template> <template>
<Dialog <Dialog
v-model="obverseVisible" v-model="obverseVisible"
:title="dialogData._itemData && dialogData._itemData.title" :title="dialogData._itemData && dialogData._itemData.title"
@update:close="camClose" :width="isCameraMap?'1300px':'500px'"
:width="isCameraMap?'1300px':'500px'" top="10%"> top="10%" @update:close="camClose">
<div class="panelParent" style="display:flex;"> <div class="panelParent" style="display:flex;">
<div class="RoadNetworkFacilities"> <div class="RoadNetworkFacilities">
<div class="header"> <div class="header">
<Video :facilityType="dialogData.facilityType" ref="refVideo" class="video-stream" @nearload="bindNearLoad" :pileNum="dialogData.stakeMark" :rangeIndex="dialogData.facilityType === 1?'all':'upCamera'" :showHeader="false" /> <Video ref="refVideo" :facilityType="dialogData.facilityType" :pileNum="dialogData.stakeMark" :rangeIndex="dialogData.facilityType === 1?'all':'upCamera'"
:showHeader="false" class="video-stream"
@nearload="bindNearLoad"/>
</div> </div>
<div class="SolarEnergy"> <div class="SolarEnergy">
<ElTabs v-model="activeName" class="tabs"> <ElTabs v-model="activeName" class="tabs">
<ElTabPane v-for="item in formList" :key="item.key" :label="item.name" :name="item.key"> <ElTabPane v-for="item in formList" :key="item.key" :label="item.name" :name="item.key">
<Descriptions :labelWidth="item.labelWidth" :list="item.list" :data="data" style="gap: 12px" column="6" /> <Descriptions :data="data" :labelWidth="item.labelWidth" :list="item.list" column="6" style="gap: 12px"/>
</ElTabPane> </ElTabPane>
<ElTabPane label="边坡测点数据" v-if="dialogData.facilityType === 9"> <ElTabPane v-if="dialogData.facilityType === 9" label="边坡测点数据">
<Table :data="bianpoData" height="200px" > <Table :data="bianpoData" height="200px">
<ElTableColumn label="项目编号" prop="pro_code" width="80" ></ElTableColumn> <ElTableColumn label="项目编号" prop="pro_code" width="80"></ElTableColumn>
<ElTableColumn label="标段编号" prop="con_code" width="80" ></ElTableColumn> <ElTableColumn label="标段编号" prop="con_code" width="80"></ElTableColumn>
<ElTableColumn label="测点名称" prop="meaPointName" width="80" ></ElTableColumn> <ElTableColumn label="测点名称" prop="meaPointName" width="80"></ElTableColumn>
<ElTableColumn label="工程编号" prop="unit_code" ></ElTableColumn> <ElTableColumn label="工程编号" prop="unit_code"></ElTableColumn>
<ElTableColumn label="测点编号" prop="meaPointNum" ></ElTableColumn> <ElTableColumn label="测点编号" prop="meaPointNum"></ElTableColumn>
</Table> </Table>
</ElTabPane> </ElTabPane>
<ElTabPane label="测点历史数据" v-if="dialogData.facilityType === 9"> <ElTabPane v-if="dialogData.facilityType === 9" label="测点历史数据">
<el-select v-model="bindpoSelecte" placeholder="" @change="bindListAsync" transfer="true" <el-select v-model="bindpoSelecte" placeholder="" style="width: 240px;" transfer="true"
style="width: 240px;"> @change="bindListAsync">
<el-option v-for="item in bianpoOptions" <el-option v-for="item in bianpoOptions"
:key="item.key" :label="item.label" :key="item.key" :label="item.label"
:value="item.key"> :value="item.key">
</el-option> </el-option>
</el-select> </el-select>
<el-date-picker v-model="daterangeChangeTime" size="mini" <el-date-picker v-model="daterangeChangeTime" end-placeholder="结束日期"
style="width: 190px;float:right;margin-bottom: 10px;" value-format="yyyy-MM-dd" type="daterange" range-separator="-" size="mini"
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> start-placeholder="开始日期"
<div class='chart LineChart' ref="chartRef" /> style="width: 190px;float:right;margin-bottom: 10px;" type="daterange" value-format="yyyy-MM-dd"></el-date-picker>
<div ref="chartRef" class='chart LineChart'/>
</ElTabPane> </ElTabPane>
<template v-if="dialogData.facilityType === 1"> <template v-if="dialogData.facilityType === 1">
<ElTabPane :label="'UPS'+(index+1)" :key="'UPS_'+item" :name="'UPS_'+item" v-for="(item,index) in upsList"> <ElTabPane v-for="(item,index) in upsList" :key="'UPS_'+item" :label="'UPS'+(index+1)"
<Descriptions labelWidth="142px" :list="upsForm" :data="upsData" style="gap: 12px" column="6" /> :name="'UPS_'+item">
<Descriptions :data="upsData" :list="upsForm" column="6" labelWidth="142px" style="gap: 12px"/>
</ElTabPane> </ElTabPane>
</template> </template>
</ElTabs> </ElTabs>
</div> </div>
</div> </div>
<div style="margin-left:20px" v-if="isCameraMap"> <div v-if="isCameraMap" style="margin-left:20px">
<div :style="'background-image:url('+imgSrc+')'" class="cameraMap"> <div :style="'background-image:url('+imgSrc+')'" class="cameraMap">
<img v-for="(item,index) of cameraMaps" :key="index" @click="showCamera(item)" <img v-for="(item,index) of cameraMaps" :key="index" :src="item.status===0?item.iconUn:item.icon"
:style="'left:'+item.left+'px;top:'+item.top+'px'" :style="'left:'+item.left+'px;top:'+item.top+'px'"
width="50px" height="50px" :src="item.status===0?item.iconUn:item.icon" /> height="50px" width="50px" @click="showCamera(item)"/>
</div> </div>
</div> </div>
</div> </div>
</Dialog> </Dialog>
</template> </template>
@ -63,14 +67,15 @@ import Descriptions from "@screen/components/Descriptions.vue";
import Video from "@screen/components/VideoMulti"; import Video from "@screen/components/VideoMulti";
// import Video from "@screen/components/Video"; // import Video from "@screen/components/Video";
import request from "@/utils/request"; import request from "@/utils/request";
import { dialogDelayVisible } from "./../mixin"; import {dialogDelayVisible} from "./../mixin";
import { tabList } from './data' import {tabList} from './data'
import { DirectionTypes } from "@screen/utils/enum.js" import {DirectionTypes} from "@screen/utils/enum.js"
import * as echarts from "echarts"; import * as echarts from "echarts";
import { chartOption } from "./chart" import {chartOption} from "./chart"
import moment from "moment"; import moment from "moment";
import Table from "@screen/components/Table.vue"; import Table from "@screen/components/Table.vue";
const icona = require(`@screen/images/layerb/路测设备/摄像机_active.svg`);// childType==='1-2 高清网络枪机 const icona = require(`@screen/images/layerb/路测设备/摄像机_active.svg`);// childType==='1-2 高清网络枪机
const icona_f = require(`@screen/images/layerb/路测设备/摄像机_fault.svg`); const icona_f = require(`@screen/images/layerb/路测设备/摄像机_fault.svg`);
const iconb = require(`@screen/images/deviceType/ballb_active.svg`); // childType==='1-2 高清网络球形摄像机 const iconb = require(`@screen/images/deviceType/ballb_active.svg`); // childType==='1-2 高清网络球形摄像机
@ -96,9 +101,9 @@ export default {
tabList, tabList,
activeName: "first", activeName: "first",
deviceControlVisible: false, deviceControlVisible: false,
bianpoData:[], bianpoData: [],
bianpoOptions:[], bianpoOptions: [],
bindpoSelecte:"", bindpoSelecte: "",
data: { data: {
deviceType: "", deviceType: "",
deviceStation: "", deviceStation: "",
@ -110,46 +115,46 @@ export default {
formList: [], formList: [],
dateRange: [], dateRange: [],
daterangeChangeTime: [], daterangeChangeTime: [],
upsForm:[], upsForm: [],
upsData:{}, upsData: {},
// 收费站增加UPS // 收费站增加UPS
upsList:[], upsList: [],
// 收费站 // 收费站
isCameraMap:false, isCameraMap: false,
imgSrc:'', imgSrc: '',
cameraMaps:[], cameraMaps: [],
}; };
}, },
watch: { watch: {
obverseVisible:{ obverseVisible: {
handler(val){ handler(val) {
if(val === false){ if (val === false) {
if(this.$refs.refVideo.closeContrl){ if (this.$refs.refVideo.closeContrl) {
this.$refs.refVideo.closeContrl() this.$refs.refVideo.closeContrl()
} }
} }
} }
}, },
daterangeChangeTime: { daterangeChangeTime: {
handler(val) { handler(val) {
if(this.dialogData.facilityType === 9){ if (this.dialogData.facilityType === 9) {
this.dateRange = [moment(val[0]).valueOf(), moment(val[1]).valueOf()]; this.dateRange = [moment(val[0]).valueOf(), moment(val[1]).valueOf()];
this.bindListAsync(); this.bindListAsync();
} }
}, },
}, },
activeName:{ activeName: {
handler(val){ handler(val) {
if(val.indexOf('UPS_') !== -1){ if (val.indexOf('UPS_') !== -1) {
this.bindUPS(val.substr(4)) this.bindUPS(val.substr(4))
} }
} }
} }
}, },
async created() { async created() {
let dData = { ...this.dialogData }; let dData = {...this.dialogData};
this.formList = tabList[dData.facilityType] this.formList = tabList[dData.facilityType]
if (dData.facilityType) if (dData.facilityType)
@ -159,7 +164,7 @@ export default {
if (dData.direction) { if (dData.direction) {
dData.direction = DirectionTypes[dData.direction] dData.direction = DirectionTypes[dData.direction]
} }
if(dData.facilityType === 9){ if (dData.facilityType === 9) {
let resPointList = await request({ let resPointList = await request({
url: `sideSlope/GetMeasurePointList`, url: `sideSlope/GetMeasurePointList`,
method: "get", method: "get",
@ -167,10 +172,10 @@ export default {
if (resPointList.code != 200) return Message.error(resPointList?.msg); if (resPointList.code != 200) return Message.error(resPointList?.msg);
this.bianpoData = resPointList.data.result; this.bianpoData = resPointList.data.result;
let _options = []; let _options = [];
for(let i of resPointList.data.result){ for (let i of resPointList.data.result) {
_options.push({ _options.push({
key: i['pro_code']+'|'+i['unit_code']+'|'+i['meaPointNum'], key: i['pro_code'] + '|' + i['unit_code'] + '|' + i['meaPointNum'],
label: i['meaPointName']+' '+i['meaPointNum'] label: i['meaPointName'] + ' ' + i['meaPointNum']
}) })
} }
console.log(_options) console.log(_options)
@ -179,70 +184,69 @@ export default {
//获取历史数据echart //获取历史数据echart
this.daterangeChangeTime = [moment().startOf('months').format('YYYY-MM-DD'), moment().endOf('months').format('YYYY-MM-DD')] this.daterangeChangeTime = [moment().startOf('months').format('YYYY-MM-DD'), moment().endOf('months').format('YYYY-MM-DD')]
} }
// let pointList = {}; // let pointList = {};
// if (resPointList.data && resPointList.data.result && resPointList.data.result.length > 0) { // if (resPointList.data && resPointList.data.result && resPointList.data.result.length > 0) {
// pointList = resPointList.data.result[0] // pointList = resPointList.data.result[0]
// } // }
dData = { ...dData, ...otherConfig,} dData = {...dData, ...otherConfig,}
this.isCameraMap = false; this.isCameraMap = false;
this.cameraMaps = []; this.cameraMaps = [];
if(dData.facilityType === 1){ if (dData.facilityType === 1) {
// console.log('收费站单独处理图像') // console.log('收费站单独处理图像')
if(dData.facilityName === '大学城收费站'){ if (dData.facilityName === '大学城收费站') {
this.imgSrc = require('@screen/images/shoufeiz/大学城收费站.jpg') this.imgSrc = require('@screen/images/shoufeiz/大学城收费站.jpg')
this.cameraMaps = [ this.cameraMaps = [
{icon:icona,iconUn:icona_f,left:50,top:50,status:0,iotDeviceId:'57954'}, {icon: icona, iconUn: icona_f, left: 50, top: 50, status: 0, iotDeviceId: '57954'},
{icon:iconb,iconUn:iconb_f,left:500,top:50,status:0,iotDeviceId:'57939'}, {icon: iconb, iconUn: iconb_f, left: 500, top: 50, status: 0, iotDeviceId: '57939'},
{icon:iconc,iconUn:iconc_f,left:100,top:200,status:0,iotDeviceId:'57941'}, {icon: iconc, iconUn: iconc_f, left: 100, top: 200, status: 0, iotDeviceId: '57941'},
{icon:iconc,iconUn:iconc_f,left:600,top:500,status:0,iotDeviceId:'111111'}, {icon: iconc, iconUn: iconc_f, left: 600, top: 500, status: 0, iotDeviceId: '111111'},
{icon:icone,iconUn:icone_f,left:200,top:400,status:0,iotDeviceId:'222222'}, {icon: icone, iconUn: icone_f, left: 200, top: 400, status: 0, iotDeviceId: '222222'},
{icon:icona,iconUn:icona_f,left:30,top:30,status:0,iotDeviceId:'57953'} {icon: icona, iconUn: icona_f, left: 30, top: 30, status: 0, iotDeviceId: '57953'}
] ]
this.isCameraMap = true; this.isCameraMap = true;
} } else if (dData.facilityName === '孝里收费站') {
else if(dData.facilityName === '孝里收费站'){
this.imgSrc = require('@screen/images/shoufeiz/孝里收费站.jpg') this.imgSrc = require('@screen/images/shoufeiz/孝里收费站.jpg')
this.isCameraMap = true; this.isCameraMap = true;
} }
} }
this.upsList=otherConfig.UPSList||[] this.upsList = otherConfig.UPSList || []
} }
this.data = dData; this.data = dData;
}, },
methods: { methods: {
bindNearLoad(e){ bindNearLoad(e) {
for(let i of this.cameraMaps){ for (let i of this.cameraMaps) {
if(e.indexOf(i.iotDeviceId) !== -1){ if (e.indexOf(i.iotDeviceId) !== -1) {
i.status = 1; i.status = 1;
} }
} }
}, },
camClose(){ camClose() {
if(this.$refs.refVideo.closeContrl){ if (this.$refs.refVideo.closeContrl) {
this.$refs.refVideo.closeContrl() this.$refs.refVideo.closeContrl()
} }
this.upsList =[] this.upsList = []
}, },
showCamera(item){ showCamera(item) {
if(item.status === 1){ if (item.status === 1) {
this.$refs.refVideo.setCameraId(item.iotDeviceId) this.$refs.refVideo.setCameraId(item.iotDeviceId)
} else { } else {
this.$message.warning('设备离线') this.$message.warning('设备离线')
} }
}, },
bindUPS(id){ bindUPS(id) {
request({ request({
url: `business/device/properties/latest/${id}`, url: `business/device/properties/latest/${id}`,
method: "get" method: "get"
}).then(res=>{ }).then(res => {
let _list = []; let _list = [];
let _data = {}; let _data = {};
if (res.code != 200) return Message.error(res?.msg); if (res.code != 200) return Message.error(res?.msg);
res.data.forEach(e => { res.data.forEach(e => {
_list.push( { _list.push({
label: e.propertyName, label: e.propertyName,
key: e.propertyName, key: e.propertyName,
gridColumn: "3", gridColumn: "3",
@ -253,9 +257,9 @@ export default {
this.upsData = _data; this.upsData = _data;
}) })
}, },
async bindListAsync() { async bindListAsync() {
let aryParam = _.find(this.bianpoOptions,{key:this.bindpoSelecte}).key.split('|') let aryParam = _.find(this.bianpoOptions, {key: this.bindpoSelecte}).key.split('|')
let res = await request({ let res = await request({
url: `sideSlope/GetPointDataListAsync`, url: `sideSlope/GetPointDataListAsync`,
method: "get", method: "get",
@ -286,15 +290,15 @@ export default {
} }
res.data.forEach(e => { res.data.forEach(e => {
cdata.push((moment(e.measureTime).format('YYYY-MM-DD'))) cdata.push((moment(e.measureTime).format('YYYY-MM-DD')))
if(title === ''){ if (title === '') {
title = enum_title[e.data[0].type] title = enum_title[e.data[0].type]
} }
cseries1.push(e.data[0].value) cseries1.push(e.data[0].value)
cseries2.push(e.data[0].cum) cseries2.push(e.data[0].cum)
}); });
chartOption.xAxis.data = cdata; chartOption.xAxis.data = cdata;
chartOption.yAxis[0].name =title+'日计' chartOption.yAxis[0].name = title + '日计'
chartOption.yAxis[1].name =title+'累计' chartOption.yAxis[1].name = title + '累计'
chartOption.series[0].data = cseries1; chartOption.series[0].data = cseries1;
chartOption.series[1].data = cseries2; chartOption.series[1].data = cseries2;
const chartIns = echarts.init(this.$refs.chartRef); const chartIns = echarts.init(this.$refs.chartRef);
@ -305,15 +309,21 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.el-table .cell {
font-size: 14px;
}
.LineChart { .LineChart {
width: 450px !important; width: 450px !important;
height: 160px; height: 160px;
overflow: hidden; overflow: hidden;
} }
.panelParent{
.panelParent {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.RoadNetworkFacilities { .RoadNetworkFacilities {
width: 452px; width: 452px;
color: #fff; color: #fff;
@ -336,7 +346,7 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
>div.video-stream { > div.video-stream {
height: 286px; height: 286px;
} }
} }
@ -365,22 +375,23 @@ export default {
align-items: center; align-items: center;
justify-content: end; justify-content: end;
>div { > div {
font-size: 16px; font-size: 16px;
padding: 6px 12px; padding: 6px 12px;
} }
} }
} }
.cameraMap{ .cameraMap {
position:relative; position: relative;
width:800px; width: 800px;
height:600px; height: 600px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
img{
img {
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
} }
} }
</style> </style>

30
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/solar/index_v1.vue
View File

@ -26,7 +26,7 @@
<div id="charts2" class="chart"></div> <div id="charts2" class="chart"></div>
</div> </div>
<div class="chartPanel"> <div class="chartPanel">
<div class="clabel"> <div class="clabel">
<div>今日功率统计</div> <div>今日功率统计</div>
<div>今日容量总计:{{chart1Total3}}千瓦</div> <div>今日容量总计:{{chart1Total3}}千瓦</div>
@ -42,7 +42,7 @@
<ElTableColumn prop="state" width="140" label="充电设备运行状态"> <ElTableColumn prop="state" width="140" label="充电设备运行状态">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ scope.row.state==='1'?'正常':'异常' }}</span> <span>{{ scope.row.state==='1'?'正常':'异常' }}</span>
</template> </template>
</ElTableColumn> </ElTableColumn>
<ElTableColumn prop="s1" width="160" label="放电设备运行状态"></ElTableColumn> <ElTableColumn prop="s1" width="160" label="放电设备运行状态"></ElTableColumn>
<ElTableColumn prop="s2" width="120" label="充电状态"></ElTableColumn> <ElTableColumn prop="s2" width="120" label="充电状态"></ElTableColumn>
@ -63,15 +63,15 @@
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import request from "@/utils/request"; import request from "@/utils/request";
import * as echarts from "echarts"; import * as echarts from "echarts";
import Table from '@screen/components/Table.vue'; import Table from '@screen/components/Table.vue';
import Pagination from "@screen/components/Pagination.vue"; import Pagination from "@screen/components/Pagination.vue";
export default { export default {
components: { components: {
Table, Table,
Pagination, Pagination,
}, },
@ -92,9 +92,9 @@
chart1Total1:'-', chart1Total1:'-',
chart1Total2:'-', chart1Total2:'-',
chart1Total3:'-', chart1Total3:'-',
tableData:[], tableData:[],
loading:false, loading:false,
total:0, total:0,
searchData: { searchData: {
pageSize: 10, pageSize: 10,
@ -136,7 +136,7 @@
// this.loading = false; // this.loading = false;
// this.total = res.total; // this.total = res.total;
// this.tableData = res.rows // this.tableData = res.rows
// } // }
// }) // })
}, },
@ -179,7 +179,7 @@
xAxis: { xAxis: {
type: 'category', type: 'category',
data: ['0点', '1点', '2点','3点', '4点','5点','6点','7点','8点', '9点','10点','11点', data: ['0点', '1点', '2点','3点', '4点','5点','6点','7点','8点', '9点','10点','11点',
'12点','13点','14点','15点','16点','17点','18点','19点','20点','21点','22点','23点'], '12点','13点','14点','15点','16点','17点','18点','19点','20点','21点','22点','23点'],
axisLine:{ axisLine:{
show:true, show:true,
lineStyle:{ lineStyle:{
@ -250,7 +250,7 @@
this.chart1.setOption(option1); this.chart1.setOption(option1);
this.chart1.resize(); this.chart1.resize();
}) })
this.chart2 = echarts.init(document.getElementById("charts2")); this.chart2 = echarts.init(document.getElementById("charts2"));
let option2 = JSON.parse(JSON.stringify(_chartsOptions)); let option2 = JSON.parse(JSON.stringify(_chartsOptions));
request({ request({
@ -265,7 +265,8 @@
const idx = parseInt(i.substr(11,2)); const idx = parseInt(i.substr(11,2));
data[idx] = result.data[i]; data[idx] = result.data[i];
} }
this.chart1Total2 = total; this.chart1Total2 = parseFloat(total.toFixed(2)); // 保留两位小数
option2.series[0].data = data; option2.series[0].data = data;
this.chart2.setOption(option2); this.chart2.setOption(option2);
this.chart2.resize(); this.chart2.resize();
@ -285,12 +286,12 @@
const idx = parseInt(i.substr(11,2)); const idx = parseInt(i.substr(11,2));
data[idx] = result.data[i]; data[idx] = result.data[i];
} }
this.chart1Total3 = total; this.chart1Total3 = parseFloat(total.toFixed(2)); // 保留两位小数
option3.series[0].data = data; option3.series[0].data = data;
this.chart3.setOption(option3); this.chart3.setOption(option3);
this.chart3.resize() this.chart3.resize()
}) })
} }
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
if(this.chart1){ if(this.chart1){
@ -303,7 +304,7 @@
}, },
}; };
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
.solar{ .solar{
display: flex; display: flex;
@ -385,4 +386,3 @@
} }
} }
</style> </style>
Write Preview
Loading…
Cancel
Save