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
Split 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>
<Dialog
v-model="obverseVisible"
:title="dialogData._itemData && dialogData._itemData.title"
@update:close="camClose"
:width="isCameraMap?'1300px':'500px'" top="10%">
<Dialog
v-model="obverseVisible"
:title="dialogData._itemData && dialogData._itemData.title"
: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,46 +115,46 @@ 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()
}
}
}
},
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)
@ -179,70 +184,69 @@ export default {
//获取历史数据echart
this.daterangeChangeTime = [moment().startOf('months').format('YYYY-MM-DD'), moment().endOf('months').format('YYYY-MM-DD')]
}
// let pointList = {};
// 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 =[]
},
showCamera(item){
if(item.status === 1){
this.upsList = []
},
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",
@ -253,9 +257,9 @@ export default {
this.upsData = _data;
})
},
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,22 +375,23 @@ 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;
}
}
</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>
<div class="chartPanel">
<div class="clabel">
<div>今日功率统计</div>
<div>今日容量总计:{{chart1Total3}}千瓦</div>
@ -42,7 +42,7 @@
<ElTableColumn prop="state" width="140" label="充电设备运行状态">
<template slot-scope="scope">
<span>{{ scope.row.state==='1'?'正常':'异常' }}</span>
</template>
</template>
</ElTableColumn>
<ElTableColumn prop="s1" width="160" label="放电设备运行状态"></ElTableColumn>
<ElTableColumn prop="s2" width="120" label="充电状态"></ElTableColumn>
@ -63,15 +63,15 @@
</div>
</div>
</template>
<script>
import request from "@/utils/request";
import * as echarts from "echarts";
import Table from '@screen/components/Table.vue';
import Pagination from "@screen/components/Pagination.vue";
export default {
components: {
components: {
Table,
Pagination,
},
@ -92,9 +92,9 @@
chart1Total1:'-',
chart1Total2:'-',
chart1Total3:'-',
tableData:[],
tableData:[],
loading:false,
total:0,
searchData: {
pageSize: 10,
@ -136,7 +136,7 @@
// this.loading = false;
// this.total = res.total;
// this.tableData = res.rows
// }
// })
},
@ -179,7 +179,7 @@
xAxis: {
type: 'category',
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:{
show:true,
lineStyle:{
@ -250,7 +250,7 @@
this.chart1.setOption(option1);
this.chart1.resize();
})
this.chart2 = echarts.init(document.getElementById("charts2"));
let option2 = JSON.parse(JSON.stringify(_chartsOptions));
request({
@ -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,12 +286,12 @@
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()
})
}
window.addEventListener("resize", () => {
if(this.chart1){
@ -303,7 +304,7 @@
},
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.solar{
display: flex;
@ -385,4 +386,3 @@
}
}
</style>
Write Preview
Loading…
Cancel
Save