Browse Source

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

develop
王兴琳 2 weeks ago
parent
commit
38e08d2022
  1. 195
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RoadNetworkFacilities/index.vue
  2. 6
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/solar/index_v1.vue

195
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RoadNetworkFacilities/index.vue

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

6
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/solar/index_v1.vue

@ -265,7 +265,8 @@
const idx = parseInt(i.substr(11,2));
data[idx] = result.data[i];
}
this.chart1Total2 = total;
this.chart1Total2 = parseFloat(total.toFixed(2)); //
option2.series[0].data = data;
this.chart2.setOption(option2);
this.chart2.resize();
@ -285,7 +286,7 @@
const idx = parseInt(i.substr(11,2));
data[idx] = result.data[i];
}
this.chart1Total3 = total;
this.chart1Total3 = parseFloat(total.toFixed(2)); //
option3.series[0].data = data;
this.chart3.setOption(option3);
this.chart3.resize()
@ -385,4 +386,3 @@
}
}
</style>
Loading…
Cancel
Save