859 lines
25 KiB
Vue
859 lines
25 KiB
Vue
<template>
|
|
<div class="kbleft" @click="videoShow=false">
|
|
<CbgCpm>
|
|
<template v-slot:leftTit>
|
|
<div>
|
|
风险等级
|
|
</div>
|
|
</template>
|
|
<template v-slot:rightTit>
|
|
<!-- <div>-->
|
|
<!-- <span>当月</span>-->
|
|
<!-- -->
|
|
<!-- <span>累计</span>-->
|
|
<!-- -->
|
|
<!-- </div>-->
|
|
</template>
|
|
<template v-slot:content>
|
|
<div class="fxdj">
|
|
<div class="fxdjContent" ref="fxdjdom">
|
|
<div class="er">{{resultDataRisk.lv2}}</div>
|
|
<div class="san">{{resultDataRisk.lv3}}</div>
|
|
<div class="si">{{resultDataRisk.lv4}}</div>
|
|
<div class="wu">{{resultDataRisk.lv5}}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</CbgCpm>
|
|
<CbgCpm>
|
|
<template v-slot:leftTit>
|
|
<div>
|
|
视频信息
|
|
</div>
|
|
</template>
|
|
<template v-slot:rightTit>
|
|
<!-- <div style="width: 400px">-->
|
|
<!-- <span>在建</span>-->
|
|
<!-- -->
|
|
<!-- <span>待建</span>-->
|
|
<!-- -->
|
|
<!-- <span>投产</span>-->
|
|
<!-- -->
|
|
<!-- </div>-->
|
|
</template>
|
|
<template v-slot:content>
|
|
<div class="spxx">
|
|
<div class="spxxContent" ref="spxxdom">
|
|
<div class="tableHead">
|
|
<div></div>
|
|
<div>单项名称</div>
|
|
<div>视频位置</div>
|
|
<div>风险等级</div>
|
|
</div>
|
|
<div class="tableData" :scrollTop="scrollTop">
|
|
<div v-for="(item,index) in splist" class="dataList" @click.stop="getVideoPlay(item)">
|
|
<div class="icon">
|
|
<img src="../../../../assets/bdscreenImg/bBg/videoIcon.png" alt="">
|
|
</div>
|
|
<div>
|
|
<el-tooltip
|
|
:teleported="false"
|
|
effect="dark"
|
|
:content="item.singleProjectName"
|
|
placement="top-start"
|
|
>
|
|
{{ (12<1*item.singleProjectName.length)? (item.singleProjectName.substring(0,12)+'...'):item.singleProjectName}}
|
|
</el-tooltip>
|
|
</div>
|
|
<div>
|
|
<el-tooltip
|
|
:teleported="false"
|
|
effect="dark"
|
|
:content="item.toolBoxTalkAddress"
|
|
placement="top-start"
|
|
>
|
|
{{(12<1*item.toolBoxTalkAddress.length)? (item.toolBoxTalkAddress.substring(0,12)+'...'):item.toolBoxTalkAddress}}
|
|
</el-tooltip>
|
|
</div>
|
|
<div>
|
|
{{(12<1*item.reAssessmentRiskLevel.length)? (item.reAssessmentRiskLevel.substring(0,12)+'...'):item.reAssessmentRiskLevel}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</CbgCpm>
|
|
<CbgCpm>
|
|
<template v-slot:leftTit>
|
|
<div>
|
|
环水保问题管理
|
|
</div>
|
|
</template>
|
|
<template v-slot:rightTit>
|
|
<div @click="openImg" v-show="showStatus">
|
|
影像资料
|
|
</div>
|
|
</template>
|
|
<template v-slot:content>
|
|
<div class="wzxx">
|
|
<div class="tableHead">
|
|
<div>单项名称</div>
|
|
<div>问题来源</div>
|
|
<div>问题类型</div>
|
|
<div>问题分类</div>
|
|
<div>整改状态</div>
|
|
</div>
|
|
<div class="tableData">
|
|
<div class="onerow" v-for="(item,index) in hsblistArr" :style="{backgroundColor:index%2!=0?'':'#142D3E'}">
|
|
<el-tooltip
|
|
:teleported="false"
|
|
effect="dark"
|
|
:content="item.singlePrjName"
|
|
placement="top-start"
|
|
>
|
|
<span class="item" v-if="item.singlePrjName">
|
|
{{ (6<1*item.singlePrjName.length)? (item.singlePrjName.substring(0,6)):item.singlePrjName}}
|
|
</span>
|
|
</el-tooltip>
|
|
<div class="item">{{item.questionSource}}</div>
|
|
<div class="item">{{item.questionType}}</div>
|
|
<div class="item">{{item.questionClassification}}</div>
|
|
<div class="item">{{item.status}}</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</CbgCpm>
|
|
<CbgCpm>
|
|
<template v-slot:leftTit>
|
|
<div>
|
|
物资信息
|
|
</div>
|
|
</template>
|
|
<template v-slot:rightTit>
|
|
<div @click="openWzybz">
|
|
物资一本帐
|
|
</div>
|
|
</template>
|
|
<template v-slot:content>
|
|
<div class="wzxx">
|
|
<div class="tableHead">
|
|
<div>物资类型</div>
|
|
<div>厂家</div>
|
|
<div>计划</div>
|
|
<div>招标</div>
|
|
<div>履约</div>
|
|
<div>入账数量</div>
|
|
<div>入账金额</div>
|
|
</div>
|
|
<div class="tableData">
|
|
<div class="onerow" v-for="(item,index) in qqzlyjList" :style="{backgroundColor:index%2!=0?'':'#142D3E'}">
|
|
<el-tooltip
|
|
:teleported="false"
|
|
effect="dark"
|
|
:content="item.name"
|
|
placement="top-start"
|
|
>
|
|
<span class="item" v-if="item.name">
|
|
{{ (6<1*item.name.length)? (item.name.substring(0,6)):item.name}}
|
|
</span>
|
|
</el-tooltip>
|
|
<div class="item">{{item.manufacturer}}</div>
|
|
<div class="item">
|
|
<div class="circlewz" :style="{backgroundColor: item.jh==true?'#00FFA8':'grey'}">
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="circlewz" :style="{backgroundColor: item.zb==true?'#00FFA8':'grey'}">
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="circlewz" :style="{backgroundColor: item.ly==true?'#00FFA8':'grey'}">
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
{{item.receivedQuantity}}
|
|
</div>
|
|
<div class="item">
|
|
{{item.receivedAmount}}万元
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</CbgCpm>
|
|
|
|
<div class="videoArea" v-show="videoShow">
|
|
<!-- <div class="buttonArea">-->
|
|
<!-- 收起-->
|
|
<!-- </div>-->
|
|
<div id="videoAreaC">
|
|
</div>
|
|
</div>
|
|
|
|
<el-dialog style="transform: translateY(-5vh)" v-model="imageShow" @close="daClose" :showClose="false" :close-on-click-modal="true" :close-on-press-escape="false">
|
|
<div v-show="imageShow" class="imageShow" id="ccgh">
|
|
<div class="listArea" >
|
|
<el-tree
|
|
:indent="0"
|
|
:data="treeData"
|
|
:props="treeProps"
|
|
:height="1400"
|
|
node-key="id"
|
|
:default-expanded-keys=defaultArr
|
|
:default-checked-keys=defaultSelected
|
|
icon="icon-tree"
|
|
@node-click="handleNodeClick"
|
|
>
|
|
<template #default="scope">
|
|
<div style="width: 100%;overflow:visible!important;">
|
|
<el-tooltip
|
|
popper-class="popperClass"
|
|
effect="dark"
|
|
append-to-body
|
|
:content="scope.node.label"
|
|
placement="top-start"
|
|
>
|
|
<div class="custom-node">
|
|
<span v-if="scope.node.level==1">{{scope.node.label}}</span>
|
|
<span v-else class="zy">{{scope.node.label}}</span>
|
|
</div>
|
|
</el-tooltip>
|
|
</div>
|
|
|
|
</template>
|
|
</el-tree>
|
|
</div>
|
|
<div class="imageArea">
|
|
<div v-show="isImgUrlShow" :style="{
|
|
width:'3190px',height: '1900px',position: 'absolute',zIndex: '100',
|
|
backgroundColor:currentType=='1'?'rgba(0,0,0,0.8)':''
|
|
}" @click="isImgUrlShow=false">
|
|
<img :src="imgUrl" alt="" :style="{width: '100%',height: '100%',objectFit: currentType=='1'?'contain':''}">
|
|
</div>
|
|
<div class="imgArea" ref="scrollArea">
|
|
<div :style="{
|
|
position:'relative',
|
|
height: percentHeight,
|
|
width: percentWidth,
|
|
}" v-for="item in xlpics">
|
|
<div style="position: absolute;top:10px;left:27px;height:100px;width: 100%;display: flex;justify-content: flex-start;align-items: flex-start;color:#22f8e6;font-size: 60px">{{item.name}}</div>
|
|
<img :src="'data:image/jpeg;base64,'+item.base64" alt="" :style="{width: '100%',height: '100%',objectFit: currentType=='1'?'contain':''}" @click="setImageUrl(item.base64)">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
<el-dialog style="transform: translate(-1600px,-100px)" v-model="wzybz" @close="wzybzClose" :showClose="false" :close-on-click-modal="true" :close-on-press-escape="false">
|
|
<diyTable :columnProps="wzybzProps"
|
|
@close="dialogClose"
|
|
:ispagion="false"
|
|
:title="kTitle"
|
|
:tableData="kgList"
|
|
:pagionProp="pagionProp"
|
|
@currentChange="currentChange"
|
|
v-model:dialogShow="wzybz"
|
|
>
|
|
</diyTable>
|
|
</el-dialog>
|
|
|
|
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup name="bgright">
|
|
import CbgCpm from "../../CbgCpm";
|
|
import * as echarts from 'echarts'
|
|
import {computed, onMounted, onUnmounted, ref, watch} from 'vue'
|
|
import { riskLevel as xLRiskLevel,listTdythInfo,getVideoInformation as getXLVideoInformation,eWCInfo as xLEWCInfo,listMaterials as listXLMaterials,getCameraInfo} from "@/api/pageC/sbd";
|
|
import useAppStore from "@/store/modules/app.js";
|
|
const $store = useAppStore();
|
|
import { getPicInfo } from '@/api/pageB/environmental/index'
|
|
import {prjInfo,oneAccountMaterials} from '../../../../api/pageC/sbd'
|
|
//物资一本账
|
|
import diyTable from '@/components/common/diytable/indexCopy'
|
|
let kTitle=ref('物资一本账')
|
|
let wzybz=ref(false)
|
|
const kgList = ref([])
|
|
const pagionProp = ref({})
|
|
let pageNum=ref(1)
|
|
const currentChange = (val) => {
|
|
pageNum.value = val
|
|
// queryList()
|
|
}
|
|
const openWzybz=()=>{
|
|
oneAccountMaterials().then(res=>{
|
|
console.log(res,'一本账')
|
|
kgList.value=res.data
|
|
})
|
|
wzybz.value = true;
|
|
}
|
|
const wzybzClose=()=>{
|
|
wzybz.value=false
|
|
}
|
|
const wzybzProps = [
|
|
{label: "物料号", prop: "wlh", minWidth: "180px"},
|
|
{label: "物料描述", prop: "wlms", minWidth: "120px"},
|
|
{label: "单位", prop: "dw", minWidth: "120px"},
|
|
{label: "设计数量", prop: "sjsl", minWidth: "100px"},
|
|
{label: "采购数量", prop: "cgsl", width: "200px"},
|
|
{label: "采购批次", prop: "cgpc", width: "150px"},
|
|
{label: "采购申请号行号", prop: "cgsqhhh", minWidth: "100px"},
|
|
{label: "采购订单号行号", prop: "cgddhhh", minWidth: "70px"},
|
|
{label: "厂家名称", prop: "cjmc", minWidth: "100px"},
|
|
{label: "采购误差检验", prop: "cgwcjy", minWidth: "100px"},
|
|
{label: "计划采购进度", prop: "jhcgjd", minWidth: "100px"},
|
|
{label: "实际采购进度", prop: "xtcgjd", minWidth: "100px"},
|
|
{label: "进度预警", prop: "juyj", minWidth: "100px"},
|
|
];
|
|
const dialogClose= () => {
|
|
wzybz.value = false;
|
|
}
|
|
//物资一本账----------------------
|
|
|
|
|
|
let infoData=ref('')
|
|
let showStatus=ref(false)
|
|
const getprjInfo=()=>{
|
|
prjInfo(appStore.currentJumpInfo.prjCode).then(res=>{
|
|
console.log(res,'项目工程列表1')
|
|
infoData.value=res.data
|
|
showStatus.value = (/武清北马庄220千伏输变电工程|天津北辰南麻瘩220kV输变电工程|宝坻望都220kV输变电工程/).test(infoData.value.prjName)
|
|
console.log(showStatus.value,'匹配')
|
|
})
|
|
}
|
|
// onMounted(()=>{
|
|
// ()
|
|
// })
|
|
let defaultArr=ref([])
|
|
let defaultSelected=ref([])
|
|
|
|
let imageShow=ref(false)
|
|
let treeData=ref([])
|
|
let treeProps=ref({
|
|
value: 'id',
|
|
label: 'name',
|
|
children: 'childInfo',
|
|
})
|
|
|
|
const openImg=()=>{
|
|
listTdythInfo({
|
|
prjId:'',
|
|
type:typeFild.value
|
|
}).then(res=>{
|
|
console.log(res,'数据列表')
|
|
defaultArr.value=[treeData.value[0].id]
|
|
defaultSelected.value=[treeData.value[0].childInfo[0].id]
|
|
treeData.value=res.data
|
|
handleNodeClick(treeData.value[0].childInfo[0])
|
|
showImg()
|
|
})
|
|
}
|
|
let gg=ref(1)
|
|
let percentWidth=ref('100%')
|
|
let percentHeight=ref('1876px')
|
|
let xlpics=ref([])
|
|
let imgSrc=ref('')
|
|
let scrollArea=ref(null)
|
|
let imgUrl=ref('')
|
|
let imageRef=ref(null)
|
|
let isImgUrlShow=ref(false)
|
|
const setImageUrl=(base)=>{
|
|
imgUrl.value = 'data:image/jpeg;base64,'+base
|
|
isImgUrlShow.value=true
|
|
}
|
|
let daClose=()=>{
|
|
currentType.value='0'
|
|
isImgUrlShow.value=false
|
|
}
|
|
let currentType=ref('0')
|
|
const handleNodeClick = (data) => {
|
|
console.log(data)
|
|
isImgUrlShow.value=false
|
|
xlpics.value =[]
|
|
if(data.name.includes('通知单')){
|
|
currentType.value='1'
|
|
}else {
|
|
currentType.value='0'
|
|
}
|
|
if (data.id) {
|
|
defaultSelected.value = [data.id]
|
|
getPicInfo(data.id).then(res => {
|
|
console.log(res,'系列图')
|
|
// var blob = new Blob([res], {type: 'image/jpeg'});
|
|
// var url = URL.createObjectURL(blob);
|
|
// document.querySelector("#img_show").src = url;
|
|
// imgSrc.value = url
|
|
console.log(Math.floor(res.data.length%2),'做种宽度')
|
|
//最终一行几个
|
|
res.data.length%2==0?gg.value=Math.floor(res.data.length/2):gg.value=Math.ceil(res.data.length/2)
|
|
percentWidth.value=100/gg.value+'%'
|
|
res.data.length==1?percentHeight.value='1876px':percentHeight.value=1876/2+'px'
|
|
console.log(percentWidth.value,'做种宽度')
|
|
xlpics.value = res.data
|
|
|
|
})
|
|
|
|
} else {
|
|
return
|
|
}
|
|
}
|
|
const closeImg=()=>{
|
|
imageShow.value=false
|
|
imgSrc.value=ref('')
|
|
}
|
|
const showImg=()=>{
|
|
imageShow.value=true
|
|
}
|
|
|
|
|
|
//监控
|
|
let pageIndex = 0;
|
|
let currentVideoId = ref("");
|
|
let selected = ref("");
|
|
let token = "";
|
|
let env = import.meta.env.MODE;
|
|
//统一视频平台的网关ip
|
|
let videoIp = env == "production" ? "20.34.32.7" : "";
|
|
let videoPort = env == "production" ? "80" : "";
|
|
let ak = env == "production" ? "piadmin" : "";
|
|
//base64加密后的密码sk
|
|
let sk = env == "production" ? "Q3FteWcxc2RzcyE=" : "";
|
|
let videoShow=ref(false)
|
|
const getVideoPlay=(item)=>{
|
|
if (!item.cameraId){
|
|
ElMessage.error('无布控球信息')
|
|
}
|
|
console.log(item,'摄像头')
|
|
videoShow.value=true
|
|
getCameraInfo(item.cameraId).then(res=>{
|
|
console.log(res,'摄像头查找')
|
|
demo.videoPlay(
|
|
1,
|
|
1,
|
|
res.data.id,
|
|
"",
|
|
res.data.name,
|
|
1
|
|
);
|
|
})
|
|
}
|
|
// let videoIp =''
|
|
// let videoPort=''
|
|
// let ak =''
|
|
// let sk =''
|
|
let obj = {
|
|
ak,
|
|
sk,
|
|
};
|
|
let demo;
|
|
let onEventNotifyss = function (eventType, eventContext, info) {
|
|
if (eventType == 102) {
|
|
selected.value = eventContext.windowIndex;
|
|
console.log(selected.value)
|
|
currentVideoId.value = eventContext.devCode;
|
|
}
|
|
if (eventType == 100) {
|
|
currentVideoId.value = eventContext.devCode;
|
|
}
|
|
};
|
|
import EventBus from "@/common/eventBus";
|
|
onMounted(() => {
|
|
$.ajax({
|
|
async: false,
|
|
data: JSON.stringify(obj),
|
|
type: "POST",
|
|
contentType: "application/json",
|
|
dataType: "json",
|
|
url: `http://${videoIp}:${videoPort}/uvp-backend-common/api/v1/authorization?timestamp=${new Date().getTime()}`,
|
|
success: function (result) {
|
|
token = result.resultValue.token;
|
|
},
|
|
error: function (err) {
|
|
console.log(err.statusText);
|
|
console.log("视频ip异常");
|
|
ElMessage.error("视频ip端口异常");
|
|
},
|
|
});
|
|
demo = new VideoObj(
|
|
"videoAreaC",
|
|
1 ,
|
|
videoIp,
|
|
+videoPort,
|
|
token,
|
|
"video",
|
|
onEventNotifyss,
|
|
true,
|
|
ak
|
|
);
|
|
// demo.videoPlay(1, 1, "031550000003100248", '', '单项名称', 1)
|
|
// demo.videoPlay(2, 1, "031510000003010960", '', '110kV朝阳路1-1#变-南-球机2', 1)
|
|
// demo.videoPlay(3, 1, "030110000003020075", '', '110kV朝阳路1-1#变-南-球机3', 1)
|
|
// demo.videoPlay(4, 1, "030110000003020081", '', '110kV朝阳路1-1#变-北-球机4', 1)
|
|
// demo.videoPlay(5, 1, "030110000003020154", '', '110kV朝阳路1-1#变-北-球机5', 1)
|
|
// demo.videoPlay(6, 1, "030110000003020159", '', '110kV朝阳路1-1#变-北-球机6', 1)
|
|
// demo.videoPlay(7, 1, "030110000003020158", '', '110kV朝阳路1-1#变-北-球机7', 1)
|
|
// demo.videoPlay(8, 1, "030110000003020157", '', '110kV朝阳路1-1#变-北-球机8', 1)
|
|
// demo.videoPlay(9, 1, "030110000003020156", '', '110kV朝阳路1-1#变-北-球机9', 1)
|
|
demo.getWindowInfo(1);
|
|
for (let key = 0; key < 9; key++) {
|
|
demo.setRightClickMenuShow(key * 1 + 1, "rightMenu01", false);
|
|
demo.setRightClickMenuShow(key * 1 + 1, "rightMenu02", true);
|
|
demo.setRightClickMenuShow(key * 1 + 1, "rightMenu03", true);
|
|
demo.setRightClickMenuShow(key * 1 + 1, "rightMenu04", false);
|
|
demo.setRightClickMenuShow(key * 1 + 1, "rightMenu05", false);
|
|
}
|
|
// EventBus.on("nodeInfo", (node) => {
|
|
// console.log(demo, "demo", node, node.nodePro.data.id);
|
|
// // if(isopen.value){
|
|
// demo.videoPlay(
|
|
// selected.value,
|
|
// 1,
|
|
// node.nodePro.data.id,
|
|
// "",
|
|
// node.nodePro.data.name,
|
|
// 1
|
|
// );
|
|
// console.log(
|
|
// "播放了第" +
|
|
// selected.value +
|
|
// "个窗口" +
|
|
// "工程id是" +
|
|
// node.nodePro.data.id +
|
|
// "工程名称是" +
|
|
// node.nodePro.data.name
|
|
// );
|
|
// // }else {
|
|
// // demo.videoPlay(3, 1, "030110000003020075", '', '110kV朝阳路1-1#变-南-球机3', 1)
|
|
// // console.log('播放了第'+3+'个窗口'+'工程id是'+"030110000003020075"+'工程名称是'+'110kV朝阳路1-1#变-南-球机3')
|
|
// // }
|
|
// });
|
|
// EventBus.on("jieBtn", (node) => {
|
|
// dialogVisible.value = node.diaFlag;
|
|
// });
|
|
//测试截图代码
|
|
// // 获取 id 为 ailabel1 的元素
|
|
// var ailabel = document.getElementById("ailabel1");
|
|
|
|
// // 设置背景图像
|
|
// ailabel.style.backgroundImage = "url(/public/common.png)";
|
|
// ailabel.style.backgroundRepeat = "no-repeat";
|
|
// ailabel.style.backgroundSize = "100%";
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const splist=ref([])
|
|
//视频信息
|
|
let scrollTop=ref(0)
|
|
let inter=ref(null);
|
|
const getVideoInfo=()=>{
|
|
clearInterval(inter.value)
|
|
getXLVideoInformation(
|
|
appStore.currentJumpInfo.prjCode
|
|
).then((res) => {
|
|
splist.value = res.data;
|
|
let length=splist.value.length
|
|
let allTop=length*81-81
|
|
inter.value = setInterval(()=>{
|
|
scrollTop.value>=allTop?scrollTop.value=0:scrollTop.value+=81
|
|
},2000)
|
|
})
|
|
}
|
|
let riskData=ref({})
|
|
|
|
onMounted(()=>{
|
|
})
|
|
onUnmounted(()=>{
|
|
clearInterval(inter.value)
|
|
clearInterval(setTimer.value)
|
|
clearInterval(setWzTimer.value)
|
|
})
|
|
|
|
import usestore from '@/store/modules/screenA'
|
|
import {ElMessage} from "element-plus";
|
|
const appStore=usestore()
|
|
let currentJumpInfo= computed(() => {
|
|
return appStore.currentJumpInfo
|
|
});
|
|
let resultDataRisk=ref({
|
|
lv2:'0',
|
|
lv3:'0',
|
|
lv4:'0',
|
|
lv5:'0',
|
|
})
|
|
const getxLRiskLevel=()=>{
|
|
xLRiskLevel(
|
|
appStore.currentJumpInfo.prjCode
|
|
).then(res=>{
|
|
console.log(res,'gcgk11')
|
|
resultDataRisk.value=res.data
|
|
})
|
|
}
|
|
//环水保
|
|
let hsblist = ref([])
|
|
let hsblistArr = ref([])
|
|
let setTimer = ref(null)
|
|
let index=0
|
|
const getxLEWCInfo=()=>{
|
|
clearInterval(setTimer.value)
|
|
xLEWCInfo(
|
|
appStore.currentJumpInfo.prjCode
|
|
).then(res=>{
|
|
console.log(res,'gcgetxLEWCInfogk11')
|
|
hsblist.value=res.data
|
|
hsblistArr.value=hsblist.value.slice(0,2)
|
|
setTimer.value = setInterval(()=>{
|
|
let result = hsblist.value.slice(index, index + 2);
|
|
if (result.length < 2) {
|
|
result = result.concat(hsblist.value.slice(0, 2 - result.length));
|
|
}
|
|
console.log(result,'定时');
|
|
hsblistArr.value=result
|
|
console.log(hsblistArr.value[0])
|
|
index = (index + 2) % hsblist.value.length;
|
|
}, 3000);
|
|
})
|
|
}
|
|
//物资信息
|
|
let wzxxList=ref([])
|
|
let setWzTimer = ref(null)
|
|
let indexWz=0
|
|
const qqzlyjList=ref([
|
|
{a:'xxx物资',b:'xx厂家',h:true,c:false,e:false,f:100,g:'10,000'},
|
|
{a:'xx物资',b:'xxx厂家',h:true,c:true,e:false,f:100,g:'10,000'},
|
|
])
|
|
const getlistXLMaterials=()=>{
|
|
clearInterval(setWzTimer.value)
|
|
listXLMaterials(appStore.currentJumpInfo.prjCode).then(res=>{
|
|
console.log(res,'物资信息')
|
|
wzxxList.value=res.data
|
|
qqzlyjList.value=wzxxList.value.slice(0,2)
|
|
setWzTimer.value = setInterval(()=>{
|
|
let result = wzxxList.value.slice(indexWz, indexWz + 2);
|
|
if (result.length < 2) {
|
|
result = result.concat(wzxxList.value.slice(0, 2 - result.length));
|
|
}
|
|
console.log(result,'定时');
|
|
qqzlyjList.value=result
|
|
console.log(qqzlyjList.value[0])
|
|
indexWz = (indexWz + 2) % wzxxList.value.length;
|
|
}, 3000);
|
|
})
|
|
}
|
|
let typeFild=ref('')
|
|
watch(currentJumpInfo,(a,b)=>{
|
|
console.log(a,b,'变了一')
|
|
console.log('变了1');
|
|
if(a.name.includes('北马庄')){
|
|
typeFild.value=1
|
|
}else if(a.name.includes('南麻瘩')){
|
|
typeFild.value=2
|
|
}else if(a.name.includes('望都')){
|
|
typeFild.value=3
|
|
}else(
|
|
typeFild.value=''
|
|
)
|
|
listTdythInfo({
|
|
prjId:'',
|
|
type:typeFild.value
|
|
}).then(res=>{
|
|
console.log(res,'数据列表')
|
|
treeData.value=res.data
|
|
})
|
|
//风险
|
|
getxLRiskLevel()
|
|
//视频
|
|
getVideoInfo()
|
|
//环水保
|
|
getxLEWCInfo()
|
|
//物资信息
|
|
getlistXLMaterials()
|
|
//
|
|
getprjInfo()
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
@import "./css/index";
|
|
.videoArea{
|
|
width:1200px;
|
|
height: 1200px;
|
|
position: absolute;
|
|
z-index: 999999;
|
|
left: -1200px;
|
|
}
|
|
/deep/.el-dialog{
|
|
background-color: transparent;
|
|
}
|
|
.buttonArea{
|
|
width: 100%;
|
|
height: 100px;
|
|
background-color: #0E9CFF;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-right: 20px;
|
|
justify-content: flex-end;
|
|
|
|
}
|
|
#videoAreaC{
|
|
width:1200px;
|
|
height: 1200px;
|
|
//background-color: #002aff;
|
|
}
|
|
.imageShow{
|
|
width: 3900px;
|
|
height: 1700px;
|
|
background-image: url("@/assets/images/tcdt1.png");
|
|
background-size: 100%;
|
|
position:absolute ;
|
|
z-index: 999;
|
|
display: flex;
|
|
.listArea{
|
|
position: relative;
|
|
overflow-y: auto;
|
|
width: 600px;
|
|
height: 1900px;
|
|
margin-top: 40px;
|
|
margin-left: 20px;
|
|
background-color: transparent;
|
|
padding-left: 40px;
|
|
scrollbar-width: none;
|
|
|
|
|
|
|
|
/* 滚动条整体 */
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.el-tree{
|
|
position: relative;
|
|
background-color: transparent;
|
|
/* 自定义滚动条样式 */
|
|
--el-tree-node-hover-bg-color: rgba(0, 255, 205, 0.5);
|
|
/deep/.el-popper{
|
|
font-size: 32px;
|
|
float: right;
|
|
}
|
|
|
|
}
|
|
.el-tree::before{
|
|
content: '';
|
|
margin-top: 50px;
|
|
height: calc(100% - 100px);
|
|
position: absolute;
|
|
width: 30px;
|
|
border-right: 1px dashed rgba(0, 255, 205, 0.5);
|
|
}
|
|
.zy{
|
|
position: relative;
|
|
}
|
|
.zy:before{
|
|
position: absolute;
|
|
content: '';
|
|
height: 40px;
|
|
width: 48px;
|
|
transform: translate(-65px,-17px);
|
|
border-bottom: 1px dashed rgba(0, 255, 205, .7);
|
|
}
|
|
///deep/.el-tree-node__expand-icon {
|
|
// padding-right: 20px;
|
|
// font-size: 32px;
|
|
// color: #00FFCC;
|
|
//}
|
|
/deep/.el-tree-node__content{
|
|
height: 100px;
|
|
|
|
.el-tree-node__label{
|
|
font-size: 32px;
|
|
color: #00FFCC;
|
|
padding-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
/deep/.el-tree-node__children{
|
|
padding-left: 30px;
|
|
.el-tree-node__content{
|
|
height: 100px;
|
|
display: flex;
|
|
.el-icon{
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
.el-tree-node__label{
|
|
font-size: 30px;
|
|
width: 450px;
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
}
|
|
.imageArea{
|
|
width: 3190px;
|
|
height: 100%;
|
|
margin-top: 40px;
|
|
margin-left: 30px;
|
|
.closeArea{
|
|
width: 100%;
|
|
height: 100px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding-top: 20px;
|
|
img{
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
}
|
|
.imgArea {
|
|
height: 1900px;
|
|
width: 3190px;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-content: space-between;
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
}
|
|
/deep/.el-icon{
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-right: 10px;
|
|
margin-left: 10px;
|
|
background: url('@/assets/images/ss.png');
|
|
background-size: 100% 100% !important;
|
|
}
|
|
|
|
/deep/ .expanded{
|
|
background: url('@/assets/images/zk.png');
|
|
background-size: 100% 100% !important;
|
|
}
|
|
/deep/ .is-leaf{
|
|
background-image: none;
|
|
background-size: 100% 100% !important;
|
|
}
|
|
/deep/ .el-tree-node__expand-icon {
|
|
transform: initial;
|
|
transition: auto;
|
|
}
|
|
|
|
</style>
|