chengdandan
/
xinjiangTunnel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
xinjiangTunnel/src/views/view/index.vue

5257 lines
185 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="big-main" style="width: 100%; height: 100%; color: #d5e0ee; position: relative">
<div v-show="!main2DShow" class="metadigiee-video-player" id="metadigiee-video-player"></div>
<div style="
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
pointer-events: none;
">
<div class="header" style="pointer-events: auto">
<div style="height: 100%">
<div style="
float: left;
width: 550px;
height: 100%;
margin-left: 500px;
position: relative;
z-index: 10;
">
<el-row :gutter="20" style="width: 550px; margin-top: 25px">
<el-col :span="8" v-for="item in areaList" :key="item.id">
<div @click="tunnelClick(item.id)" :class="searchForm.area == item.id
? 'tunnel-item-active tunnel-item'
: 'tunnel-item'
">
{{ item.name }}
</div>
</el-col>
</el-row>
</div>
<!-- <div style="height: 100%;float:right;">
<div style="text-align: right;padding: 30px 20px 0 0;color: white">
<span style="font-family: DINPro;font-weight: bold;font-size: 33px;margin-right: 10px">{{nowTime.split(' ')[1]}}</span>{{nowTime.split(' ')[0]}}
</div>
</div>-->
</div>
</div>
<div class="main">
<div style="width: 100%; height: 60px; pointer-events: auto">
<div style="float: left; width: calc(100% - 250px); overflow-x: scroll">
<div style="width: 800px; white-space: nowrap">
<div @click="deviceTypeClick(item)" v-for="item in deviceBarTypeList" :key="item.id"
class="main-type-item">
<el-link v-if="item.id == '12' || item.id == '17'">{{
item.name
}}</el-link>
<span v-else>{{ item.name }}</span>
</div>
</div>
</div>
<div style="float: right; width: 250px; position: relative">
<el-row style="width: 250px" class="input-box">
<el-col :span="5" style="min-height: 1px">
<img v-show="!main2DShow" @click="handlePatrol()" src="../../assets/images/icon/main-right5.png"
style="cursor: pointer; width: 100%" />
</el-col>
<el-col :span="5" @click.native="planDisposalClick(searchForm)">
<img src="../../assets/images/icon/main-right1.png" style="cursor: pointer; width: 100%" />
</el-col>
<!-- <el-col :span="5">
<img
@click="handle2D()"
src="../../assets/images/icon/main-right2.png"
style="cursor: pointer; width: 100%"
/>
</el-col> -->
<!-- <el-col :span="5">
<img
@click="handle3D()"
src="../../assets/images/icon/main-right3.png"
style="cursor: pointer; width: 100%"
/>
</el-col> -->
<el-col :span="5">
<el-popover :popper-append-to-body="false" popper-class="popper-dropdown" width="110" placement="bottom"
trigger="click">
<div @click="typeClick(item.id)" v-for="item in deviceTypeList1" :key="item.id">
<div :class="searchForm.deviceType == item.id
? 'dropdown-item dropdown-item-active'
: 'dropdown-item'
">
{{ item.name }}
</div>
</div>
<img slot="reference" src="../../assets/images/icon/main-right4.png"
style="cursor: pointer; width: 100%" />
</el-popover>
</el-col>
</el-row>
<div v-show="patrolShow && !main2DShow" style="
position: relative;
background-color: rgba(255, 255, 255, 0.7);
border-radius: 4px;
padding: 5px 10px;
width: 300px;
right: 320px;
top: -50px;
color: black;
">
<el-row :gutter="30" class="input-box">
<el-col :span="5" @click.native="patrolClick('pause')" style="cursor: pointer"><img
src="../../assets/images/icon/pause.png" style="width: 30px" />暂停</el-col>
<el-col :span="5" @click.native="patrolClick('play')" style="cursor: pointer"><img
src="../../assets/images/icon/play.png" style="width: 30px" />继续</el-col>
<el-col :span="5" @click.native="patrolClick('end')" style="cursor: pointer"><img
src="../../assets/images/icon/end.png" style="width: 32px" />结束</el-col>
<el-col :span="5" @click.native="patrolClick('tunnelLeft')" style="cursor: pointer"><img
src="../../assets/images/icon/tunnel.png" style="width: 32px" />左洞</el-col>
<el-col :span="5" @click.native="patrolClick('tunnelRight')" style="cursor: pointer"><img
src="../../assets/images/icon/tunnel.png" style="width: 32px" />右洞</el-col>
</el-row>
</div>
</div>
</div>
<div style="
width: 100%;
height: calc(100% - 60px);
pointer-events: none;
position: relative;
">
<div v-show="main2DShow" @click="scrollClick(1)" style="
position: absolute;
top: 45%;
left: 160px;
width: 30px;
height: 30px;
background-color: rgba(255, 255, 255, 0.2);
text-align: center;
line-height: 30px;
cursor: pointer;
z-index: 10;
pointer-events: auto;
">
<i class="el-icon-arrow-left"></i>
</div>
<div v-show="main2DShow" @click="scrollClick(2)" style="
position: absolute;
top: 45%;
right: -10px;
width: 30px;
height: 30px;
background-color: rgba(255, 255, 255, 0.2);
text-align: center;
line-height: 30px;
cursor: pointer;
z-index: 10;
pointer-events: auto;
">
<i class="el-icon-arrow-right"></i>
</div>
<div class="device-main" v-show="main2DShow" style="width: 98%; height: 100%; pointer-events: auto">
<div style="width: 250px; height: 100%; float: left">
<div style="height: 50%; text-align: center">
<img src="../../assets/images/toLeft.png" style="padding-top: 60%" />
<p class="main-item-p">下行</p>
<p style="font-size: 18px">
{{ pileNumMap[searchForm.area].length2 }}米
</p>
</div>
<div style="height: calc(50% - 30px); text-align: center">
<img src="../../assets/images/toRight.png" style="padding-top: 25%" />
<p class="main-item-p">上行</p>
<p style="font-size: 18px">
{{ pileNumMap[searchForm.area].length1 }}米
</p>
</div>
</div>
<div ref="scrollContainer" style="width: calc(100% - 250px); height: 670px; overflow: auto">
<div class="device-View" :style="{
width: `${pileNumMap[searchForm.area].width}px`,
}">
<div style="width: 100%; height: 60px">
<div class="dot-container">
<div class="dot" v-for="(item, index) in pileNumList" :key="index">
<div class="dot-span">{{ item }}</div>
<div class="dot-circle"></div>
</div>
</div>
</div>
<div class="device-View-main" style="width: 100%">
<div style="width: 100%; height: 100%; position: absolute">
<template v-if="searchForm.area != '3'">
<img src="../../assets/images/icon/area1.2.png" style="margin-top: 30px; height: 225px" />
<img src="../../assets/images/icon/area2.2.png" style="margin-top: 30px; height: 225px" />
</template>
<template v-else>
<!-- <img src="../../assets/images/icon/area3.png" style="margin-top: 30px;width: 100%">-->
<img src="../../assets/images/icon/area1.2.png" style="margin-top: 30px; height: 225px" />
<img src="../../assets/images/icon/area2.2.png" style="margin-top: 30px; height: 225px" />
</template>
</div>
<div style="
width: calc(100% - 304px);
height: 100%;
position: absolute;
z-index: 2;
left: 152px;
">
<div class="drap-container" @dragover.prevent @mousedown="laryerMouseDown">
<div v-for="(item, index) in componentsList" class="drap-container-item" :class="{
'drap-container-item-active':
curControl && item.deviceId == curControl.deviceId,
}" :key="index" :style="{
top: `${item.position.y}px`,
left: `${item.position.x}px`,
'z-index': `${item.zIndex}`,
}" @click="handleClick(item, 1)">
<!-- <div class="drap-container-name">{{ item.name }}</div>-->
<!-- <template v-if="item.deviceType == '15' && item.content">
<div class="drap-container-div"
:style="{
width: `${item.position.w}px`,
height: `${item.position.h}px`,
}">
<div style="padding: 1px 3px">
{{ item.content }}
</div>
</div>
</template>-->
<template>
<img slot="reference" class="drap-container-img" :style="{
width: `${item.position.w}px`,
height: `${item.position.h}px`,
opacity: `${item.opacity}`,
}" :src="item.imgUrl" draggable="false" :alt="item.deviceName" />
</template>
</div>
<div class="wave" v-for="(item, index) in componentsWarnList" :style="{
width: `${item.position.w}px`,
height: `${item.position.h}px`,
top: `${item.position.y}px`,
left: `${item.position.x}px`,
position: 'absolute',
'z-index': '3',
}" :key="index">
<div class="circle" v-if="warnControl && item.id == warnControl.id"></div>
<div class="drap-container-item" :key="index">
<img slot="reference" class="drap-container-img" :style="{
width: `${item.position.w}px`,
height: `${item.position.h}px`,
}" :src="item.imgUrl" draggable="false" :alt="item.id" />
</div>
</div>
</div>
</div>
</div>
<div style="width: 100%; height: 60px">
<div class="dot-container2">
<div class="dot" v-for="(item, index) in pileNumList" :key="index">
<div class="dot-circle2"></div>
<div class="dot-span">{{ item }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer" style="pointer-events: auto">
<el-row style="height: 100%">
<el-col :span="6" style="height: 100%; padding: 0 30px">
<div class="title_div">预警列表</div>
<div class="footer-item">
<el-row :gutter="30" style="height: 100%">
<el-col :span="12" style="height: 100%">
<div class="device-bg" @click="handleWarnClick('3,8')">
<div style="text-align: center">
<p style="color: #5dd5c8; font-size: 38px">
{{ statsticInfo.warn_count_done }}
</p>
<p style="font-size: 14px; margin-top: 10px">已处理</p>
</div>
</div>
</el-col>
<el-col :span="12" style="height: 100%">
<div class="device-bg device-bg2" @click="handleWarnClick('2')">
<div style="text-align: center">
<p style="color: #dfb756; font-size: 38px">
{{ statsticInfo.warn_count_todo }}
</p>
<p style="font-size: 14px; margin-top: 10px">
待处理<img src="../../assets/images/daiqueren.png" height="14px" style="margin-left: 10px" />
</p>
</div>
</div>
</el-col>
</el-row>
</div>
</el-col>
<el-col :span="6" style="height: 100%; padding: 0 30px">
<div class="title_div">事件</div>
<div class="footer-item" style="cursor: pointer">
<el-row :gutter="30" style="height: 100%">
<el-col :span="12" style="height: 100%">
<div class="device-bg">
<div style="text-align: center">
<p style="color: #5dd5c8; font-size: 38px">0</p>
</div>
</div>
</el-col>
<el-col :span="12" style="height: 100%">
<div class="device-bg device-bg3">
<div style="text-align: center">
<p style="color: #df565a; font-size: 38px">0</p>
</div>
</div>
</el-col>
</el-row>
</div>
</el-col>
<el-col :span="12" style="height: 100%; padding: 0 30px">
<div style="width: 50%">
<div class="title_div">交通流量</div>
</div>
<div class="footer-item" id="liuliangLineId"></div>
</el-col>
<!-- <el-col :span="6" style="height: 100%;padding: 0 30px">
<div class="title_div">视频画面</div>
<div class="footer-item">
<video autoplay controls loop muted width="100%" height="100%" style="background: black">
<source src="../../assets/maoliling.mp4" type="video/mp4">
</video>
</div>
</el-col>-->
</el-row>
</div>
<transition name="el-zoom-in-top">
<div class="warn-item" v-show="warnShow && false">
<div class="title">预警信息</div>
<div @click="warnClose()" style="
position: absolute;
right: 29px;
top: 26px;
width: 30px;
height: 30px;
cursor: pointer;
"></div>
<div style="
width: 340px;
height: 580px;
margin: 25px auto 20px;
overflow: auto;
">
<div style="width: 335px">
<div @click="warnClick(item)" :class="warnForm.id == item.id
? 'item-one-block item-one-block2'
: 'item-one-block'
" style="
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
padding: 20px;
" v-for="item in warnList" :key="item.id">
<el-row>
<el-col :span="2">
<div style="height: 25px; line-height: 36px">
<img v-show="item.status == 2" :src="require('../../assets/images/icon/warn1.png')" />
<img v-show="item.status == 1" :src="require('../../assets/images/icon/warn2.png')" />
</div>
</el-col>
<el-col :span="6">
<div style="font-size: 18px; font-weight: bold">
<span v-if="item.status == 1">疑似火灾</span>
<span v-else-if="item.status == 2">火灾</span>
<span v-else>{{
filedFomatter(item.type, warnTypeList)
}}</span>
</div>
</el-col>
<el-col :span="16" style="text-align: right">
<div class="warnBtu" v-show="item.status == 1 || item.status == 2" @click="verifyClick(item)">
人工确认
</div>
<div class="warnBtu" v-show="item.status == 2" @click="warnPlanClick(item)"
style="margin-left: 14px">
预案处置
</div>
</el-col>
<el-col :span="16" v-show="item.status == 3 || item.status == 8">
<p style="text-align: right; margin-top: 5px; color: #cccccc">
{{ filedFomatter(item.status, warnStatusList) }}
</p>
</el-col>
</el-row>
<el-row style="margin-top: 20px">
<el-col :span="10">
{{ filedFomatter(item.area, areaList) }}
</el-col>
<el-col :span="8">
{{ filedFomatter(item.direction, directionList) }}
</el-col>
<el-col :span="6" style="text-align: right">
{{ item.pileNum }}
</el-col>
</el-row>
<el-row style="margin-top: 10px">
<el-col :span="24" style="text-align: right">
{{ dateTimeFormat(item.warnTime) }}
</el-col>
</el-row>
</div>
</div>
</div>
</div>
</transition>
<transition name="el-zoom-in-top">
<div class="plan-item" v-show="warnDetailShow">
<div style="
padding: 15px 20px 0px;
height: 25px;
line-height: 35px;
font-size: 16px;
">
<div style="float: left">
<span style="
float: left;
width: 10px;
height: 10px;
background: #2b6bb6;
margin: 14px 5px 0 0;
"></span>预案详情
</div>
<div v-show="planSuccess" style="
float: left;
margin-left: 100px;
font-size: 14px;
margin-top: 5px;
">
状态同步中
</div>
<div @click="warnDetailClose()" style="
float: right;
width: 20px;
text-align: center;
cursor: pointer;
">
X
</div>
<div style="float: right; margin-right: 10px; width: 105px">
<div style="float: left; margin-top: 17px">
<div v-loading="planLoading" element-loading-spinner="el-icon-loading"></div>
</div>
<el-button type="primary" @click="handleCommitPlanClick(2)" size="mini"
style="float: right">一键发送</el-button>
</div>
</div>
<div style="margin: 10px 20px; border-bottom: 1px solid #4694ff33"></div>
<div style="
padding: 0 20px 20px;
width: calc(100% - 40px);
height: calc(100% - 80px);
">
<div style="width: 100%; height: 100%; overflow: auto">
<div v-for="item1 in planDeviceType" :key="item1" style="margin-bottom: 10px">
<div v-if="item1 == '13'">
<p style="font-size: 16px; font-weight: bold; color: #b3ddef">
{{ filedFomatter(item1, deviceTypeList) }}控制
</p>
<p style="margin-top: 5px">上游</p>
<div style="
padding-left: 10px;
line-height: 25px;
margin-top: 5px;
">
<p v-for="item in planDetailMap[item1]" v-if="item.stream == '1'" :key="item.id">
{{ filedFomatter(item.direction, directionList) }}
{{ item.id }}（{{ item.pileNum }}） 指令:{{ item.stream }}
<span style="color: #ee9837">{{
filedFomatter(item.cmd, taskEnum[item1].taskList)
}}</span>
<span style="margin-left: 10px" v-show="item.ret != undefined">
状态:
<span v-if="item.ret == -1 || item.ret == null">执行中</span>
<span style="color: #12b76d" v-else>{{
filedFomatter(item.ret, taskEnum[item1].taskList)
}}</span>
</span>
</p>
</div>
<p style="margin-top: 5px">下游</p>
<div style="
padding-left: 10px;
line-height: 25px;
margin-top: 5px;
">
<p v-for="item in planDetailMap[item1]" v-if="item.stream == '2'">
{{ filedFomatter(item.direction, directionList) }}
{{ item.id }}（{{ item.pileNum }}） 指令:{{ item.stream }}
<span style="color: #ee9837">{{
filedFomatter(item.cmd, taskEnum[item1].taskList)
}}</span>
<span style="margin-left: 10px" v-show="item.ret != undefined">
状态:
<span v-if="item.ret == -1 || item.ret == null">执行中</span>
<span style="color: #12b76d" v-else>{{
filedFomatter(item.ret, taskEnum[item1].taskList)
}}</span>
</span>
</p>
</div>
</div>
<div v-else-if="item1 == '15'">
<p style="font-size: 16px; font-weight: bold; color: #b3ddef">
{{ filedFomatter(item1, deviceTypeList) }}控制
</p>
<!-- <div
style="
padding-left: 10px;
line-height: 25px;
margin-top: 5px;
"
v-show="planDetailMap[item1].length > 0"
>
<p v-for="item in planDetailMap[item1]" :key="item.id">
{{ filedFomatter(item.direction, directionList) }}
{{ item.id }}（{{ item.pileNum }}）
</p>
<el-select
v-model="templateObj"
clearable
placeholder="请选择"
size="small"
style="width: 80%"
:popper-append-to-body="false"
>
<el-option
v-for="item in infoBoardTemplateList"
:key="item.id"
:label="item.textInfo"
:value="item.id"
>
</el-option>
</el-select>
</div> -->
<!-- <el-tree
class="filter-tree"
:data="treeData"
:props="defaultProps"
default-expand-all
:filter-node-method="filterNode"
ref="tree"
show-checkbox
@check-change="handleCheckChange"
v-model="textInfoList"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<el-tooltip :content="node.label" placement="top">
<span class="label">{{ node.label }}</span>
</el-tooltip>
<span style="color: #a8a8a8; font-size: 12px"
v-if="node.displaySize">宽高:{{ node.displaySize }}
字体大小:{{ node.fontSize }}
字体颜色:{{node.fontColor}}</span>
<div class="icon">
<i
class="el-icon-plus node-actions"
:style="node.level == 1 ? 'display:none' : ''"
@click.self="handleAddToTable(node, data)"
></i>
</div>
</span>
</el-tree> -->
</div>
<div v-else>
<p style="font-size: 16px; font-weight: bold; color: #b3ddef">
{{ filedFomatter(item1, deviceTypeList) }}控制
</p>
<div style="
padding-left: 10px;
line-height: 25px;
margin-top: 5px;
">
<p v-for="item in planDetailMap[item1]" :key="item.id">
{{ filedFomatter(item.direction, directionList) }}
{{ item.id }}（{{ item.pileNum }}） 指令:
<span style="color: #ee9837">{{
filedFomatter(item.cmd, taskEnum[item1].taskList)
}}</span>
<span style="margin-left: 10px" v-show="item.ret != undefined">
状态:
<span v-if="item.ret == -1 || item.ret == null">执行中</span>
<span style="color: #12b76d" v-else>
<template v-if="item1 == '19'">
{{
filedFomatter(item.ret, taskEnum[item1].taskList2)
}}
</template>
<template v-else>
{{
filedFomatter(item.ret, taskEnum[item1].taskList)
}}
</template>
</span>
</span>
</p>
</div>
</div>
</div>
<div style="min-height: 200px">
<p style="
font-size: 16px;
font-weight: bold;
color: #b3ddef;
margin-bottom: 10px;
">
广播控制
</p>
<div style="padding-left: 10px; line-height: 25px; margin-top: 5px">
<el-select v-model="mediaObj" clearable value-key="id" placeholder="请选择" size="small"
style="width: 80%" :popper-append-to-body="false" disabled>
<el-option v-for="item in listMedia" :key="item.id" :label="item.name" :value="item">
</el-option>
</el-select>
</div>
</div>
</div>
</div>
</div>
</transition>
<transition name="el-zoom-in-top">
<div class="warn-item" v-show="planShow">
<div class="title">事件预案处置</div>
<div @click="planClose()" style="
position: absolute;
right: 29px;
top: 26px;
width: 30px;
height: 30px;
cursor: pointer;
"></div>
<div style="
width: 340px;
height: 580px;
margin: 25px auto 20px;
overflow: auto;
">
<div style="width: 335px">
<div @click="planClick(item)" :class="planForm.planId == item.planId
? 'item-one-block item-one-block2'
: 'item-one-block'
" style="
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
padding: 20px;
cursor: pointer;
" v-for="(item, index) in planList" :key="index">
<el-row>
<el-col :span="12">
<div style="font-size: 18px; font-weight: bold">
{{ item.planName }}
</div>
</el-col>
<el-col :span="12" style="text-align: right">{{
filedFomatter(item.planType, warnTypeList)
}}</el-col>
</el-row>
<p>{{ item.desp }}</p>
<el-row style="margin-top: 10px">
<el-col :span="12">
{{ filedFomatter(item.area, areaList) }}
</el-col>
<el-col :span="12" style="text-align: right">
{{ dateTimeFormat(item.createTime) }}
</el-col>
</el-row>
</div>
</div>
</div>
</div>
</transition>
<transition name="el-zoom-in-top">
<div class="plan-item" v-show="planDetailShow">
<div style="
padding: 15px 20px 0px;
height: 25px;
line-height: 35px;
font-size: 16px;
">
<div style="float: left">
<span style="
float: left;
width: 10px;
height: 10px;
background: #2b6bb6;
margin: 14px 5px 0 0;
"></span>预案详情
</div>
<div v-show="planSuccess" style="
float: left;
margin-left: 100px;
font-size: 14px;
margin-top: 5px;
">
状态同步中
</div>
<div @click="planDetailClose()" style="
float: right;
width: 20px;
text-align: center;
cursor: pointer;
">
X
</div>
<div style="float: right; margin-right: 20px; width: 105px">
<div style="float: left; margin-top: 17px">
<div v-loading="planLoading" element-loading-spinner="el-icon-loading"></div>
</div>
<el-button type="primary" @click="handleCommitPlanClick(1)" size="mini"
style="float: right">一键发送</el-button>
</div>
</div>
<div style="margin: 10px 20px; border-bottom: 1px solid #4694ff33"></div>
<div style="
padding: 0 20px 20px;
width: calc(100% - 40px);
height: calc(100% - 80px);
">
<div style="width: 100%; height: 100%; overflow: auto">
<div v-for="(item1, index1) in planDetailData" :key="index1" v-show="item1.data.length > 0"
style="margin-bottom: 10px">
<p style="font-size: 16px; font-weight: bold; color: #b3ddef">
{{ filedFomatter(item1.type, deviceTypeList) }}控制
</p>
<div style="padding-left: 10px; line-height: 25px; margin-top: 5px">
<p v-for="item in item1.data" :key="item.id">
{{ filedFomatter(item.direction, directionList) }}
{{ item.id }}（{{ item.pileNum }}） 指令:
<span style="color: #12b7b2">{{
filedFomatter(item.cmd, taskEnum[item1.type].taskList)
}}</span>
<span style="margin-left: 10px" v-show="item.ret != undefined">
状态:
<span v-if="item.ret == -1 || item.ret == null">执行中</span>
<span style="color: #12b76d" v-else>{{
filedFomatter(item.ret, taskEnum[item1.type].taskList)
}}</span>
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</transition>
<transition name="el-fade-in-linear">
<div v-show="deviceRunShow" class="deviceRun-item">
<div class="title">设备运行情况</div>
<div @click="deviceRunShow = false" style="
position: absolute;
right: 25px;
top: 25px;
width: 30px;
height: 30px;
cursor: pointer;
"></div>
<div style="height: 150px">
<div class="select-down" style="
width: 430px;
margin: 0 auto;
font-size: 16px;
padding-top: 50px;
">
类型<el-select v-model="deviceType" @change="loadDevice" clearable placeholder="请选择"
:popper-append-to-body="false">
<el-option v-for="item in deviceTypeList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</div>
</div>
<div style="
width: calc(100% - 50px);
margin: 0px auto 20px;
height: calc(100% - 270px);
">
<el-row :gutter="30" style="
text-align: center;
width: calc(100% - 20px);
margin: 0 auto 20px;
">
<el-col :span="7">
<div class="runColBg">设备类型</div>
</el-col>
<el-col :span="7">
<div class="runColBg">设备编号</div>
</el-col>
<el-col :span="5">
<div class="runColBg">桩号</div>
</el-col>
<el-col :span="5">
<div class="runColBg">状态</div>
</el-col>
</el-row>
<div style="width: 100%; height: calc(100% - 30px); overflow: auto">
<div style="width: calc(100% - 20px); margin: 0 auto">
<el-row @click.native="deviceRunClick(item)" class="runRowBg" v-for="item in deviceData"
:key="item.deviceId">
<el-col :span="7" style="min-height: 1px">{{
filedFomatter(item.deviceType, deviceTypeList)
}}</el-col>
<el-col :span="7" style="min-height: 1px">{{
item.deviceId
}}</el-col>
<el-col :span="5" style="min-height: 1px">{{
item.pileNum
}}</el-col>
<el-col :span="5" style="min-height: 1px; color: #5dd5c8">{{
filedFomatter(item.status, statusList)
}}</el-col>
</el-row>
</div>
</div>
</div>
</div>
</transition>
<el-dialog style="pointer-events: auto" :title="addOrUpdateTitle" :visible.sync="deviceDialogVisible"
width="1000px" :close-on-click-modal="false" v-if="deviceDialogVisible" @close="deviceClose">
<div v-show="deviceLoading" style="
position: absolute;
z-index: 9999;
left: calc(50% - 60px);
top: 48%;
background: #ce811b;
padding: 10px 20px;
border-radius: 5px;
">
正在发送指令...
</div>
<div v-loading="deviceLoading" element-loading-text="" element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.5)">
<div v-show="dataForm.deviceType != 22" style="min-height: 70px; color: #1afff7">
<div style="
display: inline-block;
vertical-align: top;
padding: 10px;
border-right: 2px solid rgb(20 164 180);
height: 50px;
">
<img src="../../assets/images/device.png" />
</div>
<!-- <div style="display: inline-block;vertical-align: top;padding: 0 30px;border-right: 2px solid rgb(20 164 180);min-width: 130px;height: 70px">
&lt;!&ndash; <p style="font-size: 23px;color: #1AFFF7;margin-bottom: 10px">
{{ filedFomatter(dataForm.status,statusList) }}
<span v-show="!dataForm.status">暂无状态</span>
</p>&ndash;&gt;
<p style="font-size: 22px;color: #1AFFF7;">
状态：在线&lt;!&ndash;<span v-if="dataForm.taskName == -1">离线</span>
<span v-else>{{ filedFomatter(dataForm.taskName,taskList) }}</span>&ndash;&gt;
</p>
</div>-->
<div style="
display: inline-block;
vertical-align: top;
width: calc(100% - 300px);
">
<template v-if="dataForm.deviceType == '15'">
<div style="height: 60px; padding: 10px 0 0 10px; overflow: auto">
<div style="display: inline-block; vertical-align: top" v-html="templateInfoHtml"></div>
</div>
</template>
<template v-else-if="dataForm.deviceType == '26'">
<el-row style="
min-height: 30px;
font-size: 16px;
padding: 20px 0 0 10px;
">
<el-col :span="10">风向：{{ dataForm.direction26 }}</el-col>
<el-col :span="11">风速：{{ dataForm.speed26
}}<span v-show="dataForm.speed26">(m/s)</span></el-col>
</el-row>
</template>
<template v-else-if="dataForm.deviceType == '27'">
<el-row style="
min-height: 30px;
font-size: 16px;
padding: 20px 0 0 10px;
">
<el-col :span="15">co 浓度值：{{ dataForm.co27
}}<span v-show="dataForm.co27">(PPM)</span></el-col>
<el-col :span="9">vi 能见度：{{ dataForm.vi27
}}<span v-show="dataForm.vi27"></span></el-col>
</el-row>
</template>
<template v-else-if="dataForm.deviceType == '28'">
<el-row style="
min-height: 30px;
font-size: 16px;
padding: 20px 0 0 10px;
">
<el-col :span="15">光强：{{ dataForm.light28 }}</el-col>
</el-row>
</template>
<template v-else-if="dataForm.deviceType == '43'">
<div style="min-height: 30px; font-size: 16px; padding: 20px">
<p>
水位高度：{{ dataForm.height43
}}<span v-show="dataForm.height43">(m)</span>
</p>
</div>
</template>
<template v-else-if="
dataForm.deviceType == '40' ||
dataForm.deviceType == '41' ||
dataForm.deviceType == '42'
">
<div style="min-height: 30px; font-size: 16px; padding: 0px 20px">
<p v-for="(item, index) in iotKeyData" :key="index">
<span style="display: inline-block; width: 100px">
{{ item.name }}
</span>
<span v-for="(item1, index1) in item.data" :key="index1"
style="display: inline-block; width: 100px">
{{ item1.name }}
</span>
</p>
</div>
</template>
<template v-else>
<div v-show="dataForm.taskName != -1" style="
min-height: 30px;
font-size: 16px;
padding: 20px 0 0 10px;
">
<template v-if="dataForm.deviceType == '19'">{{
filedFomatter(dataForm.taskName, taskEnum['19'].taskList2)
}}</template>
<template v-else>{{
filedFomatter(dataForm.taskName, taskList)
}}</template>
</div>
<!-- <div v-show="dataForm.taskName == -1" style="min-height: 30px;font-size: 16px;padding: 20px 0 0 10px;font-size: 22px;color: #1AFFF7;">
暂无反馈
</div>-->
</template>
</div>
</div>
<el-divider></el-divider>
<el-row style="min-height: 280px">
<el-col :span="8">
<p style="margin-bottom: 10px; font-size: 16px">
<span style="
float: left;
width: 10px;
height: 10px;
background: #2b6bb6;
margin: 7px 5px 0 0;
"></span>设备基本信息
</p>
<el-descriptions title="" :column="1" :labelStyle="{
width: '80px',
'text-align': 'right',
display: 'block',
color: '#D5E0EE',
}" :contentStyle="{ width: '95%' }">
<el-descriptions-item label="设备类型">{{
filedFomatter(dataForm.deviceType, deviceTypeList)
}}</el-descriptions-item>
<el-descriptions-item label="所属隧道">{{
filedFomatter(dataForm.area, areaList)
}}</el-descriptions-item>
<el-descriptions-item label="设备编号">{{
dataForm.deviceId
}}</el-descriptions-item>
<el-descriptions-item label="物联key">{{
dataForm.iotKey
}}</el-descriptions-item>
<el-descriptions-item label="modelId">{{
dataForm.modelId
}}</el-descriptions-item>
<el-descriptions-item label="所属方向">{{
filedFomatter(dataForm.direction, directionList)
}}</el-descriptions-item>
<el-descriptions-item label="桩号">{{
dataForm.pileNumShow
}}</el-descriptions-item>
<el-descriptions-item label="桩号">{{
dataForm.pileNum
}}</el-descriptions-item>
<el-descriptions-item label="断面位置">{{
filedFomatter(dataForm.lane, laneList)
}}</el-descriptions-item>
</el-descriptions>
</el-col>
<el-col :span="16">
<div style="
width: calc(100% - 20px);
border-left: 2px solid rgba(70, 148, 255, 0.42);
padding: 0 10px;
">
<!-- 电伴热设备 -->
<div v-if="dataForm.deviceType == '47'">
<p style="margin-bottom: 10px; font-size: 16px">
<span style="
float: left;
width: 10px;
height: 10px;
background: #2b6bb6;
margin: 7px 5px 0 0;
"></span>设备控制
<el-button type="primary" style="float: right; margin-right: 20px" size="mini" @click="ChangeDBRdevocte()">
发送
</el-button>
</p>
<div style="padding-left: 20px">
<div v-if="iotDBRInfo.status !== '异常'"></div>
<el-row style="margin-bottom: 10px;">
<el-col :span="4">电伴热设备:</el-col>
<el-col :span="8" >
<el-switch v-model="iotDBRInfo.online" active-color="#20488F" active-text="开" inactive-text="关">
</el-switch>
</el-col>
</el-row>
</div>
</div>
<div v-else-if="dataForm.deviceType == 22" style="
width: 75%;
height: 340px;
background: black;
margin-left: 5%;
">
<flv-player :videoUrl="videoUrl"></flv-player>
</div>
<div v-else-if="
dataForm.deviceType == 26 ||
dataForm.deviceType == 27 ||
dataForm.deviceType == 28 ||
dataForm.deviceType == 39 ||
dataForm.deviceType == 43
">
<p style="margin-bottom: 10px; font-size: 16px">
<span style="
float: left;
width: 10px;
height: 10px;
background: #2b6bb6;
margin: 7px 5px 0 0;
"></span>设备控制
</p>
<div style="
min-height: 200px;
padding-bottom: 20px;
padding-top: 10px;
">
无
</div>
</div>
<div v-else>
<p style="margin-bottom: 10px; font-size: 16px">
<span style="
float: left;
width: 10px;
height: 10px;
background: #2b6bb6;
margin: 7px 5px 0 0;
"></span>设备控制
<el-button type="primary" @click="handleCommitClick(0)" size="mini"
style="float: right; margin-right: 20px">发送</el-button>
</p>
<div style="
min-height: 200px;
padding-bottom: 20px;
padding-top: 10px;
">
<div v-if="dataForm.deviceType == '12'" style="padding-left: 20px">
<el-row>
<el-col :span="3">控制：</el-col>
<el-col :span="21">
<el-radio-group v-model="dataForm.command" style="padding-top: 3px">
<el-radio :label="item.id" v-for="item in taskList" :key="item.id">{{ item.name
}}</el-radio>
</el-radio-group>
</el-col>
</el-row>
<el-row style="margin-top: 5px">
<el-col :span="3" style="line-height: 36px">亮度：</el-col>
<el-col :span="21">
<el-slider style="width: calc(100% - 100px)" v-model="dataFormBody.light"></el-slider>
</el-col>
</el-row>
</div>
<div v-else-if="dataForm.deviceType == '15'" style="padding-left: 20px">
<el-row>
<el-col :span="3">控制：</el-col>
<el-col :span="21" class="temlCheckClass">
<!-- <div v-for="item in infoBoardTemplateList">
<div style="height: 30px">
<p style="float: left"><el-radio v-model="dataFormBody.templateId" :label="item.id"><span></span></el-radio></p><p style="float: left" @input="addComment($event,item)" v-html="item.templateHtml"></p>
</div>
</div>-->
<!-- <el-checkbox-group v-model="textInfoList">
<div
v-for="item in infoBoardTemplateList"
:key="item.programId"
style="margin-bottom: 5px"
>
<el-checkbox :label="item.programId">
<span
@input="addComment($event, item)"
v-html="item.templateHtml"
></span
><br />
<span style="color: #a8a8a8; font-size: 12px"
>宽高:{{ item.displaySize }}
字体大小:{{ item.fontSize }} 字体颜色:{{
item.fontColor
}}</span
>
</el-checkbox>
</div>
</el-checkbox-group> -->
<el-tree class="filter-tree" :data="treeData" :props="defaultProps"
:filter-node-method="filterNode" ref="tree" show-checkbox @check-change="handleCheckChange"
v-model="textInfoList" @check="handleCheck">
<div class="custom-tree-node" slot-scope="{ node, data }">
<el-tooltip :content="node.label" placement="top">
<span class="label" v-if="node.level === 1">{{ data.name }}</span>
<span class="label" v-if="node.level !== 1">{{ data.content }}</span>
</el-tooltip>
<br />
<span style="color: #a8a8a8; font-size: 12px" v-if="node.level !== 1">高宽:{{
data.displaySize }}
字体大小:{{ data.fontSize }} 字体颜色:{{ getColor(data.fontColor) }}</span>
</div>
</el-tree>
</el-col>
</el-row>
</div>
<div v-else-if="
dataForm.deviceType == '40' ||
dataForm.deviceType == '41' ||
dataForm.deviceType == '42'
" style="padding-left: 20px">
<div style="float: left; width: 35%">
<el-row>
<el-col :span="5">设备：</el-col>
<el-col :span="19">
<el-checkbox-group v-model="dataForm.iotKeys">
<el-checkbox v-for="item in iotKeyList" v-show="item.show" :label="item.id"
:key="item.id">{{
item.name }}</el-checkbox>
</el-checkbox-group>
</el-col>
</el-row>
</div>
<div style="float: left; width: 55%">
<el-row>
<el-col :span="5">控制：</el-col>
<el-col :span="19">
<el-radio-group v-model="dataForm.command" style="padding-top: 3px">
<el-radio :label="item.id" v-for="item in taskList" :key="item.id">{{ item.name
}}</el-radio>
</el-radio-group>
</el-col>
</el-row>
</div>
</div>
<div v-else-if="13" style="padding-left: 20px">
<el-row>
<el-col :span="3">控制：</el-col>
<el-col :span="21">
<el-radio-group v-model="dataForm.command" style="padding-top: 3px">
<el-radio :label="item.id" v-for="item in taskList" :key="item.id">{{ item.name
}}</el-radio>
</el-radio-group>
</el-col>
</el-row>
</div>
<div v-else style="padding-left: 20px">
<el-row>
<el-col :span="3">控制2：</el-col>
<el-col :span="21">
<el-radio-group v-model="dataForm.command" style="padding-top: 3px">
<el-radio :label="item.id" v-for="item in taskList" :key="item.id">{{ item.name
}}</el-radio>
</el-radio-group>
</el-col>
</el-row>
</div>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
<!-- <span slot="footer" class="dialog-footer">
<el-button @click="deviceDialogVisible = false" size="small">取 消</el-button>
<el-button type="primary" @click="addOrUpdateSub" size="small">确 定</el-button>
</span>-->
</el-dialog>
<transition name="el-zoom-in-top">
<div class="control-item" v-show="deviceControlShow && !main2DShow">
<div style="
padding: 15px 20px 0px;
height: 25px;
line-height: 35px;
font-size: 16px;
">
<div style="float: left">
<span style="
float: left;
width: 10px;
height: 10px;
background: #2b6bb6;
margin: 14px 5px 0 0;
"></span>{{ addOrUpdateTitle }}
</div>
<div @click="deviceClose" style="
float: right;
width: 20px;
text-align: center;
cursor: pointer;
">
X
</div>
</div>
<div style="margin: 10px 20px; border-bottom: 1px solid #4694ff33"></div>
<div style="
padding: 0 20px 20px;
width: calc(100% - 40px);
height: calc(100% - 80px);
">
<div style="width: 100%; height: 100%; overflow: auto">
<div v-show="deviceLoading" style="
position: absolute;
z-index: 9999;
left: calc(50% - 60px);
top: 48%;
background: #ce811b;
padding: 10px 20px;
border-radius: 5px;
">
正在发送指令...
</div>
<div v-loading="deviceLoading" element-loading-text="" element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.5)">
<div v-show="dataForm.deviceType != 22" style="min-height: 60px; color: #1afff7">
<div style="
display: inline-block;
vertical-align: top;
width: 100%;
">
<template v-if="dataForm.deviceType == '15'">
<div style="height: 60px; padding-left: 10px; overflow: auto">
<div style="display: inline-block; vertical-align: top" v-html="templateInfoHtml"></div>
</div>
</template>
<template v-else-if="dataForm.deviceType == '26'">
<el-row style="
min-height: 30px;
font-size: 16px;
padding-left: 10px;
">
<el-col :span="10">风向：{{ dataForm.direction26 }}</el-col>
<el-col :span="11">风速：{{ dataForm.speed26
}}<span v-show="dataForm.speed26">(m/s)</span></el-col>
</el-row>
</template>
<template v-else-if="dataForm.deviceType == '27'">
<el-row style="
min-height: 30px;
font-size: 16px;
padding-left: 10px;
">
<el-col :span="15">co 浓度值：{{ dataForm.co27
}}<span v-show="dataForm.co27">(PPM)</span></el-col>
<el-col :span="9">vi 能见度：{{ dataForm.vi27
}}<span v-show="dataForm.vi27"></span></el-col>
</el-row>
</template>
<template v-else-if="dataForm.deviceType == '28'">
<el-row style="
min-height: 30px;
font-size: 16px;
padding-left: 10px;
">
<el-col :span="15">光强：{{ dataForm.light28 }}</el-col>
</el-row>
</template>
<template v-else-if="dataForm.deviceType == '43'">
<div style="
min-height: 30px;
font-size: 16px;
padding-left: 10px;
">
<p>
水位高度：{{ dataForm.height43
}}<span v-show="dataForm.height43">(m)</span>
</p>
</div>
</template>
<template v-else-if="
dataForm.deviceType == '40' ||
dataForm.deviceType == '41' ||
dataForm.deviceType == '42'
">
<div style="
min-height: 30px;
font-size: 16px;
padding-left: 10px;
">
<p v-for="(item, index) in iotKeyData" :key="index">
<span style="display: inline-block; width: 100px">
{{ item.name }}
</span>
<span v-for="(item1, index1) in item.data" :key="index1"
style="display: inline-block; width: 100px">
{{ item1.name }}
</span>
</p>
</div>
</template>
<template v-else>
<div v-show="dataForm.taskName != -1" style="
min-height: 30px;
font-size: 16px;
padding-left: 10px;
">
<template v-if="dataForm.deviceType == '19'">{{
filedFomatter(
dataForm.taskName,
taskEnum['19'].taskList2
)
}}</template>
<template v-else>{{
filedFomatter(dataForm.taskName, taskList)
}}</template>
</div>
<!-- <div v-show="dataForm.taskName == -1" style="min-height: 30px;font-size: 16px;padding: 20px 0 0 10px;font-size: 22px;color: #1AFFF7;">
暂无反馈
</div>-->
</template>
</div>
</div>
<div class="item-frame">
<div class="item-frame-title">设备基本信息</div>
<div style="padding: 20px">
<el-descriptions title="" :column="1" :labelStyle="{
width: '60px',
'text-align': 'right',
display: 'block',
color: '#D5E0EE',
}" :contentStyle="{ width: '95%' }">
<el-descriptions-item label="设备类型">{{
filedFomatter(dataForm.deviceType, deviceTypeList)
}}</el-descriptions-item>
<el-descriptions-item label="所属隧道">{{
filedFomatter(dataForm.area, areaList)
}}</el-descriptions-item>
<el-descriptions-item label="设备编号">{{
dataForm.deviceId
}}</el-descriptions-item>
<el-descriptions-item label="物联key">{{
dataForm.iotKey
}}</el-descriptions-item>
<el-descriptions-item label="modelId">{{
dataForm.modelId
}}</el-descriptions-item>
<el-descriptions-item label="所属方向">{{
filedFomatter(dataForm.direction, directionList)
}}</el-descriptions-item>
<el-descriptions-item label="桩号">{{
dataForm.pileNumShow
}}</el-descriptions-item>
<el-descriptions-item label="断面位置">{{
filedFomatter(dataForm.lane, laneList)
}}</el-descriptions-item>
</el-descriptions>
</div>
</div>
<div class="item-frame" style="margin-top: 20px">
<div class="item-frame-title">设备控制</div>
<div style="padding: 20px">
<div v-if="dataForm.deviceType == 22" style="
width: 75%;
height: 340px;
background: black;
margin-left: 5%;
">
<flv-player :videoUrl="videoUrl"></flv-player>
</div>
<div v-else-if="
dataForm.deviceType == 26 ||
dataForm.deviceType == 27 ||
dataForm.deviceType == 28 ||
dataForm.deviceType == 39 ||
dataForm.deviceType == 43
">
<div style="
min-height: 200px;
padding-bottom: 20px;
padding-top: 10px;
">
无
</div>
</div>
<div v-else style="position: relative">
<el-button type="primary" @click="handleCommitClick(0)" size="mini"
style="position: absolute; right: 0px; top: -20px">发送</el-button>
<div style="
min-height: 100px;
padding-bottom: 20px;
padding-top: 10px;
">
<div v-if="dataForm.deviceType == '12'">
<el-row>
<el-col :span="4">控制：</el-col>
<el-col :span="20">
<el-radio-group v-model="dataForm.command" style="padding-top: 3px">
<el-radio :label="item.id" v-for="item in taskList" :key="item.id">{{ item.name
}}</el-radio>
</el-radio-group>
</el-col>
</el-row>
<el-row style="margin-top: 5px">
<el-col :span="4" style="line-height: 36px">亮度：</el-col>
<el-col :span="20">
<el-slider style="width: calc(100% - 100px)" v-model="dataFormBody.light"></el-slider>
</el-col>
</el-row>
</div>
<div v-else-if="dataForm.deviceType == '15'">
<el-row>
<el-col :span="4">控制：</el-col>
<el-col :span="20" class="temlCheckClass">
<!-- <div v-for="item in infoBoardTemplateList">
<div style="height: 30px">
<p style="float: left"><el-radio v-model="dataFormBody.templateId" :label="item.id"><span></span></el-radio></p><p style="float: left" @input="addComment($event,item)" v-html="item.templateHtml"></p>
</div>
</div>-->
<!-- <el-checkbox-group v-model="textInfoList">
<div
v-for="item in infoBoardTemplateList"
:key="item.id"
style="margin-bottom: 5px"
>
<el-checkbox :label="item.id">
<span
@input="addComment($event, item)"
v-html="item.templateHtml"
></span
><br />
<span
style="color: #a8a8a8; font-size: 12px"
>宽:{{ item.cmsWidth }} 高:{{
item.cmsHeight
}}
字体大小:{{ item.fontSize }} 字体颜色:{{
item.fontColor
}}</span>
</el-checkbox>
</div>
</el-checkbox-group> -->
</el-col>
</el-row>
</div>
<div v-else-if="
dataForm.deviceType == '40' ||
dataForm.deviceType == '41' ||
dataForm.deviceType == '42'
">
<div style="float: left; width: 35%">
<el-row>
<el-col :span="4">设备：</el-col>
<el-col :span="20">
<el-checkbox-group v-model="dataForm.iotKeys">
<el-checkbox v-for="item in iotKeyList" v-show="item.show" :label="item.id"
:key="item.id">{{
item.name }}</el-checkbox>
</el-checkbox-group>
</el-col>
</el-row>
</div>
<div style="float: left; width: 55%">
<el-row>
<el-col :span="4">控制：</el-col>
<el-col :span="20">
<el-radio-group v-model="dataForm.command" style="padding-top: 3px">
<el-radio :label="item.id" v-for="item in taskList" :key="item.id">{{ item.name
}}</el-radio>
</el-radio-group>
</el-col>
</el-row>
</div>
</div>
<div v-else>
<el-row>
<el-col :span="4">控制：</el-col>
<el-col :span="20">
<el-radio-group v-model="dataForm.command" style="padding-top: 3px">
<el-radio :label="item.id" v-for="item in taskList" :key="item.id">{{ item.name
}}</el-radio>
</el-radio-group>
</el-col>
</el-row>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</transition>
<el-dialog top="8vh" style="pointer-events: auto" title="设备" :visible.sync="deviceDialogVisible2" width="1000px"
:close-on-click-modal="false" v-if="deviceDialogVisible2" @close="deviceClose">
<el-row>
<el-col :span="14" style="border-right: 1px solid #cccccc">
<el-table size="small" :data="deviceData2" height="500px" @selection-change="handleSelectionChange"
style="width: 100%">
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column prop="deviceType" label="设备类型" :formatter="(row) => filedFomatter(row.deviceType, deviceTypeList)
">
</el-table-column>
<el-table-column prop="deviceId" label="设备编号" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="pileNumShow" label="桩号" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="direction" label="方向" :formatter="(row) => filedFomatter(row.direction, directionList)
" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="task" label="状态" show-overflow-tooltip>
<template slot-scope="scope">
<span v-if="scope.row.task">
<span v-if="JSON.parse(scope.row.task).command != -1">
<template v-if="scope.row.deviceType == '19'">{{
filedFomatter(
JSON.parse(scope.row.task).command,
taskEnum['19'].taskList2
)
}}</template>
<template v-else>{{
filedFomatter(
JSON.parse(scope.row.task).command,
taskList
)
}}</template>
</span>
</span>
</template>
</el-table-column>
<!-- <el-table-column
fixed="right"
label="操作"
width="80">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text">控制</el-button>
</template>
</el-table-column>-->
</el-table>
</el-col>
<el-col :span="10" v-show="controlShow" style="padding-left: 5px">
<p style="margin-bottom: 10px; font-size: 16px">
<span style="
float: left;
width: 10px;
height: 10px;
background: #2b6bb6;
margin: 7px 5px 0 0;
"></span>批量控制
<el-button type="primary" @click="handleCommitClick(1)" size="mini"
style="float: right; margin-right: 20px">发送</el-button>
</p>
<div v-loading="deviceLoading" element-loading-text="正在发送指令..." element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.5)"
style="padding-bottom: 20px; margin-top: 15px; min-height: 100px">
<div v-if="dataForm.deviceType == '12'" style="padding-left: 20px">
<el-row>
<el-col :span="3">控制：</el-col>
<el-col :span="21">
<el-radio-group v-model="dataForm.command">
<el-radio :label="item.id" v-for="item in taskList" :key="item.id">{{ item.name }}</el-radio>
</el-radio-group>
</el-col>
</el-row>
<el-row style="margin-top: 5px">
<el-col :span="3" style="line-height: 36px">亮度：</el-col>
<el-col :span="21">
<el-slider style="width: calc(100% - 100px)" v-model="dataFormBody.light"></el-slider>
</el-col>
</el-row>
</div>
<div v-else-if="dataForm.deviceType == '15'" style="padding-left: 20px">
<el-row>
<el-col :span="3">控制：</el-col>
<el-col :span="21" class="temlCheckClass">
<!-- <div v-for="item in infoBoardTemplateList">
<div style="height: 30px">
<p style="float: left"><el-radio v-model="dataFormBody.templateId" :label="item.id"><span></span></el-radio></p><p style="float: left" @input="addComment($event,item)" v-html="item.templateHtml"></p>
</div>
</div>-->
<!-- <el-checkbox-group v-model="textInfoList">
<div
v-for="item in infoBoardTemplateList"
:key="item.id"
style="margin-bottom: 5px"
>
<el-checkbox :label="item.id">
<span
@input="addComment($event, item)"
v-html="item.templateHtml"
></span
><br />
<span style="color: #a8a8a8; font-size: 12px"
>宽:{{ item.cmsWidth }} 高:{{
item.cmsHeight
}}
字体大小:{{ item.fontSize }} 字体颜色:{{
item.fontColor
}}</span
>
</el-checkbox>
</div>
</el-checkbox-group> -->
<el-tree class="filter-tree" :data="treeData" :props="defaultProps" :filter-node-method="filterNode"
ref="tree" show-checkbox @check-change="handleCheckChange" v-model="textInfoList"
@check="handleCheck">
<div class="custom-tree-node" slot-scope="{ node, data }">
<el-tooltip :content="node.label" placement="top">
<span class="label" v-if="node.level === 1">{{ data.name }}</span>
<span class="label" v-if="node.level !== 1">{{ data.content }}</span>
</el-tooltip>
<br />
<span style="color: #a8a8a8; font-size: 12px;" v-if="node.level !== 1">高宽:{{ data.displaySize }}
</span>
<span style="color: #a8a8a8; font-size: 12px;" v-if="node.level !== 1">
大小:{{ data.fontSize }} 颜色:{{ getColor(data.fontColor) }}</span>
</div>
</el-tree>
</el-col>
</el-row>
</div>
<div v-else style="padding-left: 20px">
<el-row>
<el-col :span="3">控制：</el-col>
<el-col :span="21">
<el-radio-group v-model="dataForm.command">
<el-radio :label="item.id" v-for="item in taskList" :key="item.id">{{ item.name }}</el-radio>
</el-radio-group>
</el-col>
</el-row>
</div>
</div>
</el-col>
</el-row>
</el-dialog>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import cookies from 'js-cookie'
var dataList = {}
import {
addOrModDevice,
iotControl,
newIotControl,
newIotControlS,
playManuallyTriggered,
getIotDeviceStatus,
getDbrIotDeviceList,
deviceList,
deviceList1,
batchControl,
deviceStatus,
infoBoardTemplateList,
warnList,
statsticWhole,
getPlayAddressByPid,
deviceStatusBatch,
changeDbrIotDeviceStatus,
planList,
} from '@/api'
import { dateTimeFormat, filedFomatter } from '../../utils/utils'
import FlvPlayer from '@/components/FlvPlayer.vue'
import { connectWebsocket } from '@/utils/websocket'
import {
addBroadcast,
flowStatistic,
getEmployeeList,
getMediaList,
latestWarnList,
planDetail,
planExecute,
verify,
getProgramTree
} from '../../api'
import { tunnelLeftList, tunnelRightList } from '../../utils/pathJson'
export default {
name: 'index',
components: {
FlvPlayer,
},
data() {
return {
// 电伴热设备列表
iotDBRInfo: {},
nowTime: '',
searchForm: {
area: '2',
editable: '2',
},
treeData: [],
filterText: "",
areaList: window.config.areaList,
deviceTypeList: window.config.deivceTypeList,
deviceTypeList1: [
{ id: '11', name: '风机' },
{ id: '13', name: '车道指示灯' },
{ id: '14', name: '交通信号灯' },
{ id: '15', name: '情报板' },
{ id: '19', name: '卷帘门' },
{ id: '21', name: '消防水池' },
{ id: '25', name: '微波车辆检测器' },
{ id: '26', name: '风速风向' },
{ id: '27', name: '一氧化碳能见度' },
{ id: '28', name: '光强传感器' },
{ id: '39', name: '配电房' },
{ id: '40', name: '消防泵房' },
{ id: '41', name: '污水泵房' },
{ id: '42', name: '雨水泵房' },
{ id: '45', name: '可变限速标志' },
],
laneList: window.config.laneList,
directionList: window.config.directionList,
statusList: window.config.statusList,
colorList: [
{ id: 'c255000000000', name: '红' },
{ id: 'c255255000000', name: '黄' },
{ id: 'c000255000000', name: '绿' },
],
warnTypeList: window.config.warnTypeList,
warnStatusList: window.config.warnStatusList,
deviceBarTypeList: [
{ id: '15', name: '情报板' },
{ id: '11', name: '风机' },
{ id: '13', name: '车道指示灯' },
{ id: '14', name: '交通信号灯' },
{ id: '19', name: '卷帘门' },
{ id: '40', name: '消防泵房' },
{ id: '41', name: '污水泵房' },
/*{id: '16', name: '报警器'},*/
// {
// id: '17',
// name: '广播电话系统',
// url: window.config.typeUrlLink['17'],
// },
// { id: '12', name: '照明系统', url: window.config.typeUrlLink['12'] }
// ,
],
taskEnum: window.config.taskEnum,
totalWidth: 1562,
totalHeight: 560,
// 保存拖拽的元素的列表
componentsList: [],
componentsOldList: [],
deviceId: '', // 当前项的 唯一标识
curControl: null, //
warnControl: null,
flag: '',
containerMoveObj: {
type: '',
x: '',
y: '',
},
scale: 1,
dataForm: {},
dataFormBody: {},
deviceDialogVisible: false,
addOrUpdateTitle: '',
rules: {
deviceId: [{ required: true, message: '请输入', trigger: 'blur' }],
deviceType: [{ required: true, message: '请选择', trigger: 'change' }],
},
pileNumMap: {
1: {
left: 'K30+600',
right: 'K34+800',
// length1: '4000',
// length2: '2616',
length1: '2616',
length2: '2606',
width: 5000,
pileNumData: ['K31+294', 'K33+916'],
n: 10,
},
2: {
left: 'K58+176',
right: 'K60+976',
// length1: '2800',
length1: '2200',
length2: '2200',
width: 5000,
pileNumData: ['K58+476', 'K60+676'],
n: 10,
},
// 1: {
// left: 'K9+720',
// right: 'K11+076',
// length1: '960',
// length2: '624',
// width: 1893,
// pileNumData: ['K9+933', 'K10+595'],
// n: 5,
// },
// 2: {
// left: 'K16+650',
// right: 'K18+150',
// length1: '965.647',
// length2: '965.647',
// width: 1993,
// pileNumData: ['K17+015', 'K17+935'],
// n: 5,
// },
// 3: {
// left: 'K18+220',
// right: 'K21+250',
// length1: '2897.232',
// length2: '2897.232',
// width: 6000,
// pileNumData: ['K18+302', 'K20+990'],
// n: 19,
// },
},
pileNumList: [],
deviceForm: {},
warnShow: true,
planShow: false,
planList: [],
planDetailShow: false,
warnDetailShow: false,
planForm: {},
planDetailData: [],
planDetailMap: {
11: [],
13: [],
14: [],
15: [],
19: [],
},
deviceRunShow: false,
main2DShow: true,
deviceType: '',
marks: 10, // 刻度的数量
markWidth: 100, // 每个刻度的宽度
deviceData: [],
taskList: [],
deviceData2: [],
deviceDialogVisible2: false,
infoBoardTemplateList: [],
textInfoList: [],
tempMap: {},
controlShow: false,
multipleSelection: [],
warnList: [{
id: '1',
status: 1,
type: ''
}, {
id: '2',
status: 2,
type: ''
}],
componentsWarnList: [],
statusTimer: null,
deviceLoading: false,
warnMap: {},
templateHtmlList: [],
templateInfoHtml: '',
statsticInfo: {
warn_count_done: 0,
device_error: 0,
warn_count_todo: 0,
device_count: 0,
},
videoForm: window.config.videoForm,
videoUrl: '',
iotKeyList: [],
iotKeyData: [],
warnForm: {},
planLoading: false,
planSuccess: false,
planDeviceType: ['14', '13', '11', '15', '19'],
defaultProps: {
children: "children",
label: "name",
name: "name",
content: "content",
// displaySize: "displaySize",
},
listMedia: [
/*{
id:20,
"name":"1前方隧道施工，请按车道指示灯行驶",
"path":"/soft/upload/audio/e5ccbd29-3788-4480-9d83-8ad0a5d5a320.mp3",
"type":1
},
{
id:4,
"name":"1前方隧道施工",
"path":"/soft/upload/audio/36ebd0f5-4c3a-4585-8d25-3afa9f3dc7ca.mp3",
"type":1
}*/
],
mediaObj: null,
templateObj: '',
deviceControlShow: false,
deviceIds15: [],
deviceIds: [],
deviceDataId: [],
patrolShow: false,
}
},
mounted() {
console.log(this.$route.params.area, this.$route, 'xxxxxxx');
if (this.$route.params.area) {
this.searchForm.area = this.$route.params.area
}
this.init()
this.handleLinkClient()
},
methods: {
// 改变电伴热设备状态
async ChangeDBRdevocte() {
if (this.iotDBRInfo.status == '异常' || !this.iotDBRInfo.device_id) {
this.$message.warning('设备异常，不能操作')
return
}
console.log(this.iotDBRInfo.online, '开关状态');
let res = await changeDbrIotDeviceStatus({
device_id: this.iotDBRInfo.device_id,
action: this.iotDBRInfo.online ? 'open' : 'close',
})
if (res?.data?.message) {
this.$message.success(res.data.message)
}
},
dateTimeFormat,
init() {
var that = this
//sessionStorage.setItem("indexBreadcrumbList", JSON.stringify(["/control","/"]))
setInterval(() => {
that.nowTime = that.getNowTime()
}, 1000)
that.loadWarnList()
that.warnTimer = setInterval(() => {
that.loadWarnList()
}, 15000)
setTimeout(() => {
if (that.warnList.length > 0) {
that.warnShow = true
} else {
that.warnShow = false
}
that.tunnelClick(this.searchForm.area)
}, 400)
that.statsticWhole()
},
scrollClick(index) {
var that = this
if (index == 1) {
that.$refs.scrollContainer.scrollLeft =
that.$refs.scrollContainer.scrollLeft - 800
} else {
that.$refs.scrollContainer.scrollLeft =
that.$refs.scrollContainer.scrollLeft + 800
}
},
statsticWhole() {
var that = this
statsticWhole().then((res) => {
if (res.status == 200) {
if (res.data.retCode == 0) {
that.statsticInfo['warn_count_done'] =
res.data.result.warn_count_done
that.statsticInfo['device_count'] = res.data.result.device_count
that.statsticInfo['device_error'] = res.data.result.device_error
} else {
that.$message.warning(res.data.message)
}
}
})
},
tunnelClick(id) {
var that = this
/*if(that.searchForm.area == id){
return;
}*/
that.searchForm.area = id
that.loadWarnMarker(that.warnMap[that.searchForm.area])
if (!that.main2DShow) {
that.main2DShow = true
that.deviceClose()
}
var form = that.pileNumMap[that.searchForm.area]
var km1 = form.left.replace('K', '').replace('+', '.')
var km2 = form.right.replace('K', '').replace('+', '.')
console.log('form', form)
var num = that.pileNumMap[that.searchForm.area].n
var average = (Number(km2) - Number(km1)) / num
that.pileNumList = []
for (var i = 0; i < num; i++) {
let a = (Number(km1) + i * average).toFixed(3)
that.pileNumList.push('K' + a.replace('.', '+'))
}
that.pileNumList.push(form.right)
/*var a = (Number(km1) + average).toFixed(3)
that.pileNumList = [form.left,'K'+a.replace(".", "+"),form.right]*/
console.log('that.pileNumList', that.pileNumList)
that.scale = (form.width - 304) / 1000 / (Number(km2) - Number(km1))
that.loadTable()
flowStatistic({ area: that.searchForm.area }).then((res) => {
if (res.status == 200) {
if (res.data.retCode == 0) {
that.liuliangLine(res.data.result)
} else {
that.$message.warning(res.data.message)
}
}
})
},
loadTable() {
var that = this
deviceList1(that.searchForm).then((res) => {
console.log(res, 'reeessss')
if (res.status == 200) {
// if (res.data.retCode == 0) {
that.tableData = res.data.data
console.log(that.tableData, 'ttttttttttttttt')
that.loadMarker()
that.deviceDataId = []
that.tableData.forEach((item) => {
if (
item.deviceType == '11' ||
item.deviceType == '13' ||
item.deviceType == '14'
) {
that.deviceDataId.push(item.deviceId)
}
})
that.dataForm.deviceId = that.deviceDataId.toString()
if (that.warnShow) {
clearTimeout(that.statusTimer)
that.statusTimer = null
} else {
that.deviceStatusBatch()
}
} else {
that.$message.warning(res.data.message)
}
// }
})
},
loadMarker() {
var that = this
that.componentsList = []
that.componentsOldList = []
that.deviceIdOptions = []
that.tableData.forEach((item, index) => {
// console.log(item, 'iiittteeemmm')
if (item.pileNum) {
var json = item
let imgForm = window.config.drapLeftElMap[item.deviceType]
if (!imgForm) {
return
}
that.deviceIdOptions.push(item.deviceId)
json.imgUrl =
item.deviceType == 13
? imgForm['url' + item.direction]
: imgForm.url
var x = 0,
y = 0
if (item.deviceType == 13) { //车道指示灯 根据状态 展示不同方向的图片 direction 2是下行左箭头 1是上行右箭头
console.log(item, item.direction, 'xxxxxxxxxx')
if (item.direction == 2) { //下行
if (item.rotationDirection == null || item.rotationDirection == '正向通行') {
json.imgUrl = './lib/icon/132.png'
} else if (item.rotationDirection == '反向通行') {
json.imgUrl = './lib/icon/131.png'
} else if (item.rotationDirection == '封道') {
json.imgUrl = './lib/icon/133.png'
} else if (item.rotationDirection == '正向左转') {
json.imgUrl = './lib/icon/135.png'
}
// else if(item.rotationDirection == '反向左转'){
// json.imgUrl = './lib/icon/135.png'
// }
} else if (item.direction == 1) { //上行
if (item.rotationDirection == null || item.rotationDirection == '正向通行') {
json.imgUrl = './lib/icon/131.png'
} else if (item.rotationDirection == '反向通行') {
json.imgUrl = './lib/icon/132.png'
} else if (item.rotationDirection == '封道') {
json.imgUrl = './lib/icon/133.png'
} else if (item.rotationDirection == '正向左转') {
json.imgUrl = './lib/icon/134.png'
}
// else if(item.rotationDirection == '反向左转'){
// json.imgUrl = './lib/icon/134.png'
// }
}
}
//风机
if (item.deviceType == 11) { //车道指示灯 根据状态 展示不同方向的图片 direction 2是下行左箭头 1是上行右箭头
// console.log(item,item.direction,'xxxxxxxxxx')
if (item.direction == 2) { //下行
if (item.rotationDirection == null || item.rotationDirection == '正转') {
json.imgUrl = './lib/icon/111.gif'
} else if (item.rotationDirection == '反转') {
json.imgUrl = './lib/icon/112.gif'
} else if (item.rotationDirection == '停止') {
json.imgUrl = './lib/icon/11.png'
}
console.log("json.imgUrl", json.imgUrl)
} else if (item.direction == 1) { //上行
if (item.rotationDirection == null || item.rotationDirection == '正转') {
json.imgUrl = './lib/icon/111.gif'
} else if (item.rotationDirection == '反转') {
json.imgUrl = './lib/icon/112.gif'
} else if (item.rotationDirection == '停止') {
json.imgUrl = './lib/icon/11.png'
}
console.log("json.imgUrl", json.imgUrl)
}
}
//交通信号灯
if (item.deviceType == 14) { //车道指示灯 根据状态 展示不同方向的图片 direction 2是下行左箭头 1是上行右箭头
// console.log(item,item.direction,'xxxxxxxxxx')
if (item.direction == 2) { //下行
if (item.rotationDirection == null || item.rotationDirection == '变绿灯') {
json.imgUrl = './lib/icon/143.png'
} else if (item.rotationDirection == '变黄灯') {
json.imgUrl = './lib/icon/142.png'
} else if (item.rotationDirection == '变红灯') {
json.imgUrl = './lib/icon/141.png'
}
} else if (item.direction == 1) { //上行
if (item.rotationDirection == null || item.rotationDirection == '变绿灯') {
json.imgUrl = './lib/icon/143.png'
} else if (item.rotationDirection == '变黄灯') {
json.imgUrl = './lib/icon/142.png'
} else if (item.rotationDirection == '变红灯') {
json.imgUrl = './lib/icon/141.png'
}
}
}
json.position = {
x: 0,
y: 0,
w: imgForm.w,
h: imgForm.h,
bg: '#fff',
}
let km = item.pileNum.replace('K', '').replace('+', '.')
let km1 = that.pileNumMap[that.searchForm.area].left
.replace('K', '')
.replace('+', '.')
let subtract = Number(km) - Number(km1)
json.position.x = subtract * 1000 * that.scale - imgForm.w / 2
x = subtract * 1000 * that.scale - imgForm.w / 2
if (item.lane == 0) {
json.position.y = 265 - imgForm.h / 2
y = 265 - imgForm.h / 2
} else {
if (item.direction == '2') {
let newLane = that.distanceFromNine(Number(item.lane))
json.position.y = newLane * 24 + 13 - imgForm.h / 2
y = newLane * 24 + 13 - imgForm.h / 2
} else {
json.position.y = item.lane * 24 + 271 - imgForm.h / 2
y = item.lane * 24 + 271 - imgForm.h / 2
}
}
json.temp = {
position: {
x: x,
y: y,
},
}
json.opacity = 1
json.zIndex = 4
if (item.deviceType == '15' || item.deviceType == '51') {
json.zIndex = 3
} else if (item.deviceType == '55' || item.deviceType == '56') {
json.zIndex = 2
}
// console.log(json, 'ooooooooooooooooooooooooooooooooooooooo')
if (item.task) {
var j = JSON.parse(item.task)
if (item.deviceType == '11') {
if (j.command != -1) {
json.imgUrl = imgForm['url' + j.command]
}
} else if (item.deviceType == '13') {
if (j.command != -1) {
json.imgUrl =
imgForm['url' + item.direction + '' + item.direction][
j.command
]
}
} else if (item.deviceType == '14') {
if (j.command != -1) {
json.imgUrl = imgForm['urls'][j.command]
}
}
console.log(json, 'jjjjjjjjjjjjjjjjjjjjjjjjjj')
if (j.body) {
var b = JSON.parse(j.body)
if (item.deviceType == '12') {
//that.$set(that.dataForm, 'light', b.light)
json.opacity = b.light / 100
} /*else if (item.deviceType == '15') {
infoBoardTemplateList().then(res => {
if (res.status == 200) {
if (res.data.retCode == 0) {
res.data.result.forEach((item,i)=>{
if(item.id == b.templateId){
json.content = that.domRender(item.textInfo,b.value,item.id,1)
}
})
} else {
that.$message.warning(res.data.message);
}
}
})
}*/
}
}
that.componentsOldList.push(json)
}
})
setTimeout(() => {
that.componentsList = JSON.parse(JSON.stringify(that.componentsOldList))
console.log(that.componentsList, 'that.componentsList')
}, 1000)
},
deviceTypeClick(item) {
console.log('pppppppppppppppppppp', item)
var that = this
that.deviceClose()
if (item.id == '12' || item.id == '17') {
window.open(item.url)
return
}
that.controlShow = false
that.dataForm = {
deviceType: item.id,
}
that.dataFormBody = {}
if (that.dataForm.deviceType == '15') {
that.loadinfoBoardTemplate(0)
/*infoBoardTemplateList().then(res => {
if (res.status == 200) {
if (res.data.retCode == 0) {
res.data.result.forEach((item,i)=>{
var form = {
...item,
templateHtml:that.domRender(item.textInfo),
}
that.infoBoardTemplateList.push(form)
})
} else {
that.$message.warning(res.data.message);
}
}
})*/
}
that.taskList = that.taskEnum[item.id].taskList
that.loadDevice2(item.id)
that.deviceDialogVisible2 = true
},
handleSelectionChange(val) {
this.$set(this.dataForm, 'command', '')
this.multipleSelection = val
if (this.multipleSelection.length > 0) {
this.controlShow = true
} else {
this.controlShow = false
}
},
loadDevice2(deviceType) {
var that = this
deviceList({
deviceType: deviceType,
area: that.searchForm.area,
editable: '2',
}).then((res) => {
if (res.status == 200) {
if (res.data.retCode == 0) {
that.deviceData2 = res.data.result
if (deviceType != '15') {
var ids = []
that.deviceData2.forEach((item) => {
ids.push(item.deviceId)
})
that.dataForm.deviceId = ids.toString()
that.deviceStatusBatch()
}
} else {
that.$message.warning(res.data.message)
}
}
})
},
typeClick(id) {
var that = this
if (that.searchForm.deviceType == id) {
id = ''
}
that.searchForm.deviceType = id
that.loadTable()
},
handle2D() {
var that = this
that.main2DShow = true
that.patrolShow = false
that.deviceClose()
},
handle3D() {
var that = this
if (that.searchForm.area == '2') {
that.main2DShow = false
deviceList({ area: that.searchForm.area, editable: '2' }).then(
(res) => {
if (res.status == 200) {
if (res.data.retCode == 0) {
var data = res.data.result
var model13 = []
data.forEach((item) => {
if (item.task) {
var j = JSON.parse(item.task)
if (j.command != -1) {
if (item.deviceType == '13' && item.modelId) {
let model13 = {}
if (j.command == 0) {
model13 = {
modelId: [item.modelId],
frontType: 2,
backType: 3,
}
} else if (j.command == 1) {
model13 = {
modelId: [item.modelId],
frontType: 3,
backType: 2,
}
} else if (j.command == 2) {
model13 = {
modelId: [item.modelId],
frontType: 3,
backType: 3,
}
}
that.setLaneStatusIndicator(model13)
} else if (item.deviceType == '14' && item.modelId) {
let a = {
id: '304',
status: 'N',
isFlash: false,
remainTime: 55,
}
let b = {
id: '305',
status: 'N',
isFlash: false,
remainTime: 55,
}
if (j.command == 1) {
a.status = 'R'
} else if (j.command == 2) {
a.status = 'Y'
} else if (j.command == 3) {
a.status = 'G'
} else if (j.command == 4) {
b.status = 'G'
}
that.updateTrafficSignal([a, b])
} else if (item.deviceType == '15' && item.modelId) {
if (j.body) {
j.dataFormBody = JSON.parse(j.body)
console.log("j.dataFormBody", j.dataFormBody)
that.loadinfoBoardTemplate(
3,
j.dataFormBody.textInfoList,
item.modelId
)
}
}
}
}
})
} else {
that.$message.warning(res.data.message)
}
}
}
)
}
},
handlePatrol() {
var that = this
that.patrolShow = !that.patrolShow
//that.setCameraRoaming(tunnelRightList)
},
setCameraRoaming(data) {
let params = {
coordType: 0,
coordTypeZ: 1,
loopMode: false,
visualMode: 1,
pitch: 1,
speed: 50,
pointDistance: 0,
point: data,
}
// js 形式
try {
window.MetaDigieeApi.Camera.setCameraRoaming(params)
//成功返回
} catch (err) {
//异常处理
}
},
patrolClick(val) {
var that = this
var params = {
movingState: 'pause',
}
switch (val) {
case 'pause':
params = {
movingState: 'pause',
}
window.MetaDigieeApi.Camera.setCameraRoamingState(params)
break
case 'play':
params = {
movingState: 'continue',
}
window.MetaDigieeApi.Camera.setCameraRoamingState(params)
break
case 'end':
params = {
movingState: 'stop',
}
window.MetaDigieeApi.Camera.setCameraRoamingState(params)
break
case 'tunnelLeft':
that.setCameraRoaming(tunnelLeftList)
break
case 'tunnelRight':
that.setCameraRoaming(tunnelRightList)
break
}
},
async handleLinkClient() {
var that = this
that.passrecordList = []
const params = window.config.mapParams
try {
let res = await window.MetaDigieeApi.Service.openService(params)
console.log(res)
if (res.code == 200) {
let params2 = {
pitchRotSpeed: 10,
yawRotSpeed: 10,
scaleSpeed: 10,
translateSpeed: 10,
}
window.MetaDigieeApi.Camera.setCameraSpeedInfo(params2)
let params3 = {
intersectionId: ['Cross01'],
state: true,
}
window.MetaDigieeApi.TrafficSignal.setTrafficSignalState(params3)
setTimeout(() => {
that.setVehicleTrackState() //开启车辆实时轨迹
}, 1000)
let res = await window.MetaDigieeApi.Event.addMouseEventListener(
(event) => {
if (event.data.modelId && event.data.eventType === 'click') {
that.dataForm = {}
that.addOrUpdateTitle = ''
deviceList({ modelId: event.data.modelId }).then((res) => {
if (res.status == 200) {
if (res.data.retCode == 0) {
if (res.data.result.length > 0) {
that.handleClick(res.data.result[0], 0)
//that.addInfoWindow(event.data.modelId,`./iframe/event.html?deviceId=${item.deviceId}&deviceType=${item.deviceType}&pileNumShow=${item.pileNumShow}&direction=${item.direction}`,[540,360],[20,-330])
/*setTimeout(()=>{
that.addInfoWindow(event.data.modelId,item)
},400)*/
} else {
that.deviceClose()
}
} else {
that.$message.warning(res.data.message)
}
}
})
}
}
)
} else {
that.$message.warning(res.message)
}
} catch (err) {
that.$message.warning(err)
}
},
async addInfoWindow(modelId, item) {
var that = this
var taskName = ''
if (item.task) {
var j = JSON.parse(item.task)
taskName = that.filedFomatter(
j.command,
that.taskEnum[item.deviceType].taskList
)
}
console.log(taskName)
try {
let params = {
modelId: modelId,
windowDoc:
'<div style="border: 1px solid #27bebe;background: rgba(19,110,206,0.5);padding: 0 20px;font-size: 14px;line-height: 25px;color: white">' +
'<div><span style="font-weight: 300;">设备类型：' +
filedFomatter(item.deviceType, that.deviceTypeList) +
'</span></div>' +
'<div><span style="font-weight: 300;;word-wrap: break-word">modelId：' +
item.modelId +
'</span></div>' +
'<div><span style="font-weight: 300;;word-wrap: break-word">物联key：' +
item.iotKey +
item.modelId +
item.modelId +
'</span></div>' +
'<div><span style="font-weight: 300;">桩号：' +
item.pileNumShow +
'</span></div>' +
'<div><span style="font-weight: 300;">运行状态：' +
taskName +
'</span></div>' +
'</div>',
infoWindowId: 'infoWindow01',
windowSize: [400, 200],
windowOffset: [0, 0],
dismissible: true,
}
window.MetaDigieeApi.InfoWindow.addInfoWindow(params)
//成功返回
} catch (err) {
//异常处理
}
},
async setLaneStatusIndicator(model13) {
var that = this
try {
let params = model13
//成功返回
let res = await window.MetaDigieeApi.LSIS.setLaneStatusIndicator(params)
} catch (e) { }
},
async updateTrafficSignal(phase) {
var that = this
const params = {
effectSignalVisible: false,
}
const res =
await window.MetaDigieeApi.TrafficSignal.setEffectTrafficSignalVisibility(
params
)
try {
let params = [
{
intersectionId: 'Cross01',
changeTime: '2023-02-16 12:00:00',
phase: phase,
},
]
//成功返回
let res = await window.MetaDigieeApi.TrafficSignal.updateTrafficSignal(
params
)
} catch (e) { }
},
async updateVMSInfo(data) {
var that = this
try {
let params = data
let res = await window.MetaDigieeApi.VMS.updateVMSInfo(params)
//成功返回
} catch (err) {
//异常处理
console.log(err)
}
},
async setVehicleTrackState() {
var that = this
try {
const params = {
modelId: ['mec0'],
isAdsorbed: true,
mode: 0,
state: true,
}
let res123 =
await window.MetaDigieeApi.VehicleTrack.setVehicleTrackState(params)
let params1 = {
plateVisible: true,
}
window.MetaDigieeApi.VehicleTrack.setVehiclePlateVisibility(params1) //显示车牌
let params2 = {
speedVisible: true,
}
window.MetaDigieeApi.VehicleTrack.setVehicleSpeedVisibility(params2) //显示车速
if (res123.code == 200) {
setTimeout(() => {
that.loadData()
}, 200)
}
} catch (err) {
//异常处理
console.log(err)
}
},
loadData() {
var that = this
connectWebsocket(
// 测试地址
window.config.wsUrl,
// 传递给后台的数据
'',
// { openexe: 'openexe' },
// 成功拿到后台返回的数据的回调函数
(data) => {
if (data) {
dataList = JSON.parse(data)
console.log(dataList)
if (dataList.facilityId) {
that.updateVehicleTrack(dataList)
}
}
},
// websocket连接失败的回调函数
(err) => {
console.log('失败的回调函数', err)
dataList = {}
}
)
},
async updateVehicleTrack(vehicleList) {
try {
let params = vehicleList
let res = await window.MetaDigieeApi.VehicleTrack.updateVehicleTrack(
params
)
//成功返回
console.log(res)
} catch (err) {
//异常处理
console.log(err)
}
},
handleWarnClick(index) {
console.log(index, 'xxxxxxxxxxxxxxxxxxx')
var that = this
clearTimeout(that.statusTimer)
that.statusTimer = null
that.planClose()
that.warnList = []
if (index == '2') {
latestWarnList().then((res) => {
if (res.status == 200) {
if (res.data.retCode == 0) {
that.warnList = res.data.result
that.statsticInfo.warn_count_todo = res.data.total
} else {
//that.$message.warning(res.data.message);
}
}
})
} else {
warnList({ status: index }).then((res) => {
if (res.status == 200) {
if (res.data.retCode == 0) {
that.warnList = res.data.result
} else {
that.$message.warning(res.data.message)
}
}
})
}
that.warnShow = true
},
loadWarnList() {
var that = this
latestWarnList().then((res) => {
if (res.status == 200) {
if (res.data.retCode == 0) {
that.warnList = res.data.result
that.statsticInfo.warn_count_todo = res.data.total
var warnList = res.data.result
that.warnMap = {}
var arr1 = []
var arr2 = []
var arr3 = []
warnList.forEach((item) => {
if (item.area == 1) {
arr1.push(item)
} else if (item.area == 2) {
arr2.push(item)
} else if (item.area == 3) {
arr3.push(item)
}
})
that.warnMap = {
1: arr1,
2: arr2,
3: arr3,
}
that.loadWarnMarker(that.warnMap[that.searchForm.area]) ////加载报警图标
} else {
//that.$message.warning(res.data.message);
}
}
}) /*
warnList({status:'1,2'}).then(res=>{
if (res.status == 200) {
if (res.data.retCode == 0) {
that.warnList = res.data.result
if(that.warnList.length > 0){
that.warnShow = true;
}
var warnList = res.data.result
that.warnMap = {}
var arr1 = []
var arr2 = []
var arr3 = []
warnList.forEach(item=>{
if(item.area == 1){
arr1.push(item)
}else if(item.area == 2){
arr2.push(item)
}else if(item.area == 3){
arr3.push(item)
}
})
that.warnMap = {
'1':arr1,
'2':arr2,
'3':arr3
}
//that.loadWarnMarker(that.warnMap[that.searchForm.area])
} else {
that.$message.warning(res.data.message);
}
}
})*/
},
handleCheckChange(data, checked, indeterminate) {
console.log(data, checked, indeterminate);
// this.addComment(data,data.programId)
},
handleCheck(checkedNodes) {
console.log(checkedNodes, "cscscscs");
// 这里可以处理选中项的逻辑，比如更新checkedKeys等。
// this.textInfoList = checkedNodes.push() // 根据需要更新checkedKeys数组，例如只保留id等。
this.textInfoList.push(checkedNodes.programId)
console.log(this.textInfoList, "cscscscs");
},
loadWarnMarker(data) {
var that = this
that.componentsWarnList = []
that.componentsOldWarnList = []
that.warnIdOptions = []
if (!data) {
return
}
data.forEach((item, index) => {
if (item.pileNum) {
that.warnIdOptions.push(item.id)
let imgForm = window.config.drapWarnElMap[item.type]
var json = item
json.imgUrl = imgForm.url
var x = 0,
y = 0
json.position = {
x: 0,
y: 0,
w: imgForm.w,
h: imgForm.h,
bg: '#fff',
}
let km = item.pileNum.replace('K', '').replace('+', '.')
let km1 = that.pileNumMap[that.searchForm.area].left
.replace('K', '')
.replace('+', '.')
let subtract = Number(km) - Number(km1)
json.position.x = subtract * 1000 * that.scale - imgForm.w / 2
x = subtract * 1000 * that.scale - imgForm.w / 2
if (item.lane == 0) {
json.position.y = 265 - imgForm.h / 2
y = 265 - imgForm.h / 2
} else {
if (item.direction == '2') {
let newLane = that.distanceFromNine(Number(item.lane))
json.position.y = newLane * 24 + 13 - imgForm.h / 2
y = newLane * 24 + 13 - imgForm.h / 2
} else {
json.position.y = item.lane * 24 + 271 - imgForm.h / 2
y = item.lane * 24 + 271 - imgForm.h / 2
}
}
json.temp = {
position: {
x: x,
y: y,
},
}
that.componentsOldWarnList.push(json)
}
})
setTimeout(() => {
that.componentsWarnList = JSON.parse(
JSON.stringify(that.componentsOldWarnList)
)
}, 1000)
},
warnClose() {
this.warnShow = false
this.warnForm = {}
this.warnControl = null
this.warnDetailClose()
},
warnDetailClose() {
this.warnDetailShow = false
if (this.statusTimer) {
clearTimeout(this.statusTimer)
this.statusTimer = null
}
this.dataForm.deviceId = this.deviceDataId.toString()
this.deviceStatusBatch()
},
planDetailClose() {
this.planDetailShow = false
if (this.statusTimer) {
clearTimeout(this.statusTimer)
this.statusTimer = null
}
this.dataForm.deviceId = this.deviceDataId.toString()
this.deviceStatusBatch()
},
planClose() {
this.planShow = false
this.planDetailClose()
},
warnClick(row) {
var that = this
that.warnForm = JSON.parse(JSON.stringify(row))
if (that.warnForm.area != that.searchForm.area) {
that.tunnelClick(that.warnForm.area)
}
that.warnControl = that.warnForm
},
planDisposalClick(item) {
var that = this
that.warnDetailClose()
that.planShow = true
planList({ status: '1', area: item.area, planType: item.type }).then(
(res) => {
if (res.status == 200) {
if (res.data.retCode == 0) {
that.planList = res.data.result
} else {
that.$message.warning(res.data.message)
}
}
}
)
},
warnPlanClick(row) {
var that = this
if (that.statusTimer) {
clearTimeout(that.statusTimer)
that.statusTimer = null
}
that.dataForm = {}
that.planLoading = false
that.planSuccess = false
that.warnDetailShow = true
that.planDetailMap = {
11: [],
13: [],
14: [],
15: [],
19: [],
}
that.planForm = JSON.parse(JSON.stringify(row))
that.deviceIds = []
that.deviceIds15 = []
that.templateObj = ''
that.mediaObj = null
that.listMedia = []
deviceList({
area: that.planForm.area,
editable: '2',
deviceType: that.planDeviceType.toString(),
direction: that.planForm.direction,
}).then((res) => {
that.loading = false
if (res.status == 200) {
if (res.data.retCode == 0) {
that.planDetailMap = {
11: [],
13: [],
14: [],
15: [],
19: [],
}
var km1 = that.planForm.pileNum.replace('K', '').replace('+', '.')
res.data.result.forEach((item) => {
var km2 = item.pileNum.replace('K', '').replace('+', '.')
var obj = {
id: item.deviceId,
pileNum: item.pileNum,
stream: '0',
}
if (item.deviceType == '11') {
if (Math.abs(km1 - km2) < 0.05) {
//小于50米
obj.cmd = '0'
} else {
obj.cmd = '1'
}
} else if (item.deviceType == '14') {
obj.cmd = '1'
} else if (item.deviceType == '13') {
if (item.direction == 1) {
if (km1 < km2) {
obj.stream = '2'
} else {
obj.stream = '1'
}
} else {
if (km1 < km2) {
obj.stream = '1'
} else {
obj.stream = '2'
}
}
if (obj.stream == '1') {
obj.cmd = '2'
} else {
obj.cmd = '0'
}
} else if (item.deviceType == '15') {
that.deviceIds15.push(item.deviceId)
} else if (item.deviceType == '19') {
obj.cmd = '1'
}
that.planDetailMap[item.deviceType].push(obj)
that.deviceIds.push(item.deviceId)
/*that.planDetailData.push({
type:item.deviceType,
data:p[key]
})*/
})
that.loadinfoBoardTemplate(2)
console.log(that.planDetailMap)
} else {
that.$message.warning(res.data.message)
}
}
})
// 预案处置中广播的下拉列表暂时屏蔽
// getMediaList().then((res) => {
// if (res.status == 200) {
// if (res.data.code == 200) {
// that.listMedia = res.data.data.listMedia
// that.mediaObj = that.listMedia[0]
// } else {
// that.$message.warning(res.data.message)
// }
// }
// })
},
handleCommitPlanClick(index) {
var that = this
console.log(index, that.planForm, ' ///////////////////')
var json = {}
if (that.deviceIds15.length > 0) {
var obj = {
deviceType: '15',
command: '15_01',
deviceId: that.deviceIds15.toString(),
body: JSON.stringify({
textInfoList: [{ id: that.templateObj, fillInfo: '' }],
}),
}
var url = '/json/iot/iotControlBatch'
iotControl(obj, url).then((res) => { })
}
if (index == 2) {
// json = {
// planType: '2',
// warnType: that.planForm.type,
// area: that.planForm.area,
// direction: that.planForm.direction,
// plan: JSON.stringify(that.planDetailMap),
// }
json = {
plc: [],
}
console.log(that.planDeviceType, that.planDetailMap[13], '13车道指示灯', that.planDetailMap[14], '14', 'planDeviceTypeplanDeviceType')
that.planDetailMap[13].forEach((item) => { // 车道指示灯
let operationInstructions = filedFomatter(item.cmd, that.taskEnum[13].taskList)
json.plc.push({
deviceId: item.id,
operationInstructions: operationInstructions,
writeOrRead: 'W'
})
})
that.planDetailMap[14].forEach((item) => { //交通信号控制灯
let operationInstructions = filedFomatter(item.cmd, that.taskEnum[14].taskList)
console.log(operationInstructions, '141414')
json.plc.push({
deviceId: item.id,
operationInstructions: operationInstructions,
writeOrRead: 'W'
})
})
that.planSuccess = false
that.planLoading = true
batchControl(json).then((res) => {
that.planLoading = false
that.planSuccess = true
console.log(res)
if (res.data.code == 200) {
that.$message.success('操作成功')
that.warnDetailShow = false
verify({ id: that.planForm.id, status: '8' }).then((res) => {
if (res.status == 200) {
if (res.data.retCode == 0) {
that.loadWarnList()
that.statsticWhole()
}
}
})
} else {
that.$message.success(res.data.msg)
}
})
} else if (index == 1) {
json = {
planType: '1',
warnType: that.planForm.warnType,
planId: that.planForm.planId,
area: that.planForm.area,
}
that.planSuccess = false
that.planLoading = true
planExecute(json).then((res) => {
that.planLoading = false
if (res.status == 200) {
if (res.data.retCode == 0) {
that.$message.success('成功')
that.planSuccess = true
setTimeout(() => {
that.dataForm.deviceId = that.deviceIds.toString()
that.deviceStatusBatch(index)
}, 2000)
} else {
that.$message.warning(res.data.message)
}
}
})
}
if (that.mediaObj.id) {
var extens = []
getEmployeeList().then((res) => {
if (res.status == 200) {
if (res.data.code == 200) {
res.data.data.employeeList.forEach((item) => {
extens.push(item.exten)
})
var obj = {
name: that.mediaObj.name,
extenNums: extens.toString(),
AudioSourceType: that.mediaObj.type,
}
if (that.mediaObj.type == '1') {
obj.audioStr = that.mediaObj.id
} else {
obj.textContent = ''
}
addBroadcast(obj).then((res) => {
if (res.status == 200) {
if (res.data.code == 200) {
} else {
that.$message.warning(res.data.message)
}
}
})
} else {
that.$message.warning(res.data.message)
}
}
})
}
},
planClick(row) {
var that = this
that.dataForm = {}
that.planLoading = false
that.planSuccess = false
that.planDetailShow = true
that.planDetailData = []
that.planForm = JSON.parse(JSON.stringify(row))
that.deviceIds = []
if (that.statusTimer) {
clearTimeout(that.statusTimer)
that.statusTimer = null
}
planDetail({ planId: row.planId }).then((res) => {
if (res.status == 200) {
if (res.data.retCode == 0) {
var p = JSON.parse(res.data.result.plan)
for (let key in p) {
that.planDetailData.push({
type: key,
data: p[key],
})
p[key].forEach((item) => {
that.deviceIds.push(item.id)
})
}
} else {
that.$message.warning(res.data.message)
}
}
})
},
verifyClick(row) {
var that = this
that
.$confirm('已确认?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
verify({ id: row.id, status: '3' }).then((res) => {
if (res.status == 200) {
if (res.data.retCode == 0) {
that.$message.success('成功')
that.loadWarnList()
that.statsticWhole()
} else {
that.$message.warning(res.data.message)
}
}
})
})
.catch(() => {
that.$message.info('已取消删除')
})
},
handleDeviceRunClick() {
var that = this
that.loadDevice()
that.deviceRunShow = true
},
loadDevice() {
var that = this
deviceList({
deviceType: that.deviceType,
area: that.searchForm.area,
editable: '2',
}).then((res) => {
if (res.status == 200) {
if (res.data.retCode == 0) {
that.deviceData = res.data.result
} else {
that.$message.warning(res.data.message)
}
}
})
},
deviceRunClick(row) {
var that = this
that.curControl = row
},
async handleClick(row, i) {
var that = this
if (row.deviceType == '55' || row.deviceType == '56') {
return ''
}
that.dataForm = {}
that.textInfoList = []
that.dataFormBody = {}
that.dataForm = JSON.parse(JSON.stringify(row))
that.addOrUpdateTitle =
that.filedFomatter(that.dataForm.area, that.areaList) +
' / ' +
that.filedFomatter(that.dataForm.deviceType, that.deviceTypeList) +
' / ' +
that.dataForm.deviceId
that.tempMap = {}
that.templateInfoHtml = ''
that.iotKeyList = []
console.log(that.taskEnum, '点击事件', that.dataForm)
that.taskList = that.taskEnum[that.dataForm.deviceType].taskList
if (that.dataForm.refresh == '1') {
that.deviceStatus()
}
// 13 车道指示灯
console.log('1111111111111111111111111', that.dataForm.deviceType)
if (that.dataForm.deviceType == '15') {
console.log("that.dataFormBody", that.dataFormBody)
if (that.dataForm.task) {
var j = JSON.parse(that.dataForm.task)
console.log("j.dataFormBody", j.dataFormBody)
that.$set(that.dataForm, 'taskName', j.command)
if (j.body) {
j.dataFormBody = JSON.parse(j.body)
that.loadinfoBoardTemplate(1, j.dataFormBody.textInfoList)
}
}
that.loadinfoBoardTemplate(0)
} else if (that.dataForm.deviceType == '22') {
if (that.dataForm.iotKey) {
that.videoForm.pid = that.dataForm.iotKey
that.videoUrl = ''
getPlayAddressByPid(that.videoForm).then((res) => {
if (res.status == 200) {
if (res.data.ret == 0) {
that.videoUrl = res.data.data.flv
} else {
that.$message.warning(res.data.message)
}
}
})
}
} else if (
that.dataForm.deviceType == '40' ||
that.dataForm.deviceType == '41' ||
that.dataForm.deviceType == '42'
) {
that.$set(that.dataForm, 'iotKeys', [])
var arr = that.dataForm.iotKey.split('|')
arr.forEach((item) => {
var arr1 = item.split(':')
var name = window.config.pumpMap[arr1[0]]
var arr2 = arr1[1].split(',')
arr2.forEach((item2, i) => {
var json = {}
if (arr1[0] == 'ps' || arr1[0] == 'hs') {
json.show = false
} else {
json.show = true
}
json.name = name + (i + 1)
json.id = arr1[0] + ':' + item2
that.iotKeyList.push(json)
})
})
}
if (that.dataForm.deviceType == '13') {
// 获取 lane 对应的显示文本
const laneText = filedFomatter(that.dataForm.lane, that.laneList)
const directionText = filedFomatter(that.dataForm.direction, that.directionList)
const deviceTypeText = filedFomatter(that.dataForm.deviceType, that.deviceTypeList)
const areaText = filedFomatter(that.dataForm.area, that.areaList)
console.log(laneText, directionText, deviceTypeText, that.textInfoList, 'sssssssssssssssssssssssss')
// 如果 laneText 是 "车道一" 并且 directionText 是 "上行"，则在 taskList 尾部添加一个选项
if (areaText === '五一隧道') {
if (laneText === "车道一" && deviceTypeText === "车道指示灯" && that.dataForm.deviceName != 'YLS1' && (directionText === "上行" || directionText === "下行")) {
that.taskList = [
{ id: '0', name: '正向通行' },
{ id: '1', name: '反向通行' },
{
id: '2',
name: '封道',
}, { id: '3', name: '正向左转' }
// ,{id: '4', name: '反向左转'},
// { id: '3', name: '左转' },
]
} else {
that.taskList = [
{ id: '0', name: '正向通行' },
{ id: '1', name: '反向通行' },
{
id: '2',
name: '封道',
} /*{id: '3', name: '正向转向'},{id: '4', name: '反向转向'}*/,
]
}
} else if (areaText === '西山隧道') {
if (laneText === "车道一" && deviceTypeText === "车道指示灯" && (directionText === "上行" || directionText === "下行")) {
that.taskList = [
{ id: '0', name: '正向通行' },
{ id: '1', name: '反向通行' },
{
id: '2',
name: '封道',
},
// {id: '3', name: '正向左转'},{id: '4', name: '反向左转'},
{ id: '3', name: '左转' },
]
} else {
that.taskList = [
{ id: '0', name: '正向通行' },
{ id: '1', name: '反向通行' },
{
id: '2',
name: '封道',
} /*{id: '3', name: '正向转向'},{id: '4', name: '反向转向'}*/,
]
}
}
console.log('//////////////')
// 获取设备状态
getIotDeviceStatus({
deviceId: that.dataForm.deviceId,
deviceType: that.dataForm.deviceType
})
.then(res => {
const { code, data } = res?.data || {};
if (code === 200) {
// that.dataForm.command = data?.status || '';
let command = data?.status || '';
that.$set(that.dataForm, 'command', command)
}
// this.$forceUpdate();
console.log(that.dataForm.command)
})
.catch(error => {
console.error('Error fetching device status:', error);
});
} else if (that.dataForm.deviceType == '26' || that.dataForm.deviceType == '27' || that.dataForm.deviceType == '28') {
//风速风向和covi展示的
getIotDeviceStatus({
deviceId: that.dataForm.deviceId,
deviceType: that.dataForm.deviceType
})
.then(res => {
const { code, data } = res?.data || {};
if (code === 200) {
console.log(data, that.dataForm, 'ddddddddddddd')
if (data.statusJson) {
const json = JSON.parse(data.statusJson);
if (json.covi && that.dataForm.deviceType == '27') { // covi
that.$set(that.dataForm, 'vi27', json.covi.vi)
that.$set(that.dataForm, 'co27', json.covi.co)
} else if (json.covi && that.dataForm.deviceType == '26') { // 风速风向
that.$set(that.dataForm, 'speed26', json.covi.fs)
that.$set(that.dataForm, 'direction26', json.covi.fx)
} else if (json.covi && that.dataForm.deviceType == '28') { // 光强
that.$set(that.dataForm, 'light28', json.covi.BD)
// that.$set(that.dataForm, 'direction26', json.covi.BD)
}
}
}
})
.catch(error => {
console.error('Error fetching device status:', error);
});
} else if (that.dataForm.deviceType == '14' || that.dataForm.deviceType == '19') { // 获取回显状态
// 获取设备状态
getIotDeviceStatus({
deviceId: that.dataForm.deviceId,
deviceType: that.dataForm.deviceType
})
.then(res => {
const { code, data } = res?.data || {};
if (code === 200) {
let command = data?.status || '';
that.$set(that.dataForm, 'command', command)
}
// this.$forceUpdate();
console.log(that.dataForm.command)
})
.catch(error => {
console.error('Error fetching device status:', error);
});
} else if (that.dataForm.deviceType == '11') { //风机
// 获取设备状态
getIotDeviceStatus({
deviceId: that.dataForm.deviceId,
deviceType: that.dataForm.deviceType
})
.then(res => {
const { code, data } = res?.data || {};
if (code === 200) {
let command = data?.status || '';
that.$set(that.dataForm, 'command', command)
}
// this.$forceUpdate();
console.log(that.dataForm.command)
})
.catch(error => {
console.error('Error fetching device status:', error);
});
} else if (that.dataForm.deviceType == '47') { // 电伴热
that.$set(that.dataForm, 'iotKeys', [])
console.log("电伴热", that.dataForm)
// 获取电伴热设备状态
let dev_id = that.dataForm.iotKey.split(':')[1]
let res = await getDbrIotDeviceList(dev_id)
console.log("电伴热2", res)
if (res?.status == 200) {
console.log("电伴热3", res.data)
this.iotDBRInfo = res.data
}
}
if (i) {
that.deviceDialogVisible = true
} else {
that.deviceControlShow = true
}
},
/*initTimer(){
var that = this
that.statusTimer = setInterval(_ => {
that.deviceStatus()
}, 2000)
},*/
deviceClose() {
var that = this
console.log('clear')
if (that.statusTimer) {
clearTimeout(that.statusTimer)
that.statusTimer = null
}
that.deviceControlShow = false
that.deviceDialogVisible = false
that.deviceDialogVisible2 = false
that.dataForm.deviceId = that.deviceDataId.toString()
that.deviceStatusBatch()
},
deviceStatus() {
var that = this
deviceStatus({
deviceId: that.dataForm.deviceId,
deviceType: that.dataForm.deviceType,
}).then((res) => {
if (res.status == 200) {
if (res.data.retCode == 0) {
that.$set(that.dataForm, 'status', res.data.result.status)
if (res.data.result.task) {
that.$set(that.dataForm, 'task', res.data.result.task)
var j = JSON.parse(that.dataForm.task)
that.$set(that.dataForm, 'taskName', j.command)
if (j.command != -1) {
let imgForm =
window.config.drapLeftElMap[that.dataForm.deviceType]
if (that.dataForm.deviceType == '11') {
that.componentsList.forEach((item) => {
if (item.deviceId == that.dataForm.deviceId) {
item.imgUrl = imgForm['url' + j.command]
}
})
} else if (that.dataForm.deviceType == '13') {
that.componentsList.forEach((item) => {
if (item.deviceId == that.dataForm.deviceId) {
item.imgUrl =
imgForm['url' + item.direction + '' + item.direction][
j.command
]
}
})
} else if (that.dataForm.deviceType == '14') {
that.componentsList.forEach((item) => {
if (item.deviceId == that.dataForm.deviceId) {
item.imgUrl = imgForm['urls'][j.command]
}
})
} else if (
that.dataForm.deviceType == '40' ||
that.dataForm.deviceType == '41' ||
that.dataForm.deviceType == '42'
) {
that.iotKeyData = []
const str1 = that.dataForm.iotKey.split('|')
const str2 = that.dataForm.taskName.split('|')
str1.forEach((item, i) => {
const [name, values] = item.split(':')
const name1 = window.config.pumpMap[name]
const [name2, values2] = str2[i].split(':')
var arr = values.split(',')
var arr2 = values2.split(',')
var arr3 = []
arr.forEach((item2, i2) => {
if (name == 'ps' || name == 'hs') {
arr3.push({
id: `${name}:${item2}`,
name: i2 + 1 + '#：' + arr2[i2],
})
} else {
arr3.push({
id: `${name}:${item2}`,
name:
i2 +
1 +
'#：' +
that.filedFomatter(arr2[i2], that.taskList),
})
}
})
that.iotKeyData.push({
name: name1,
data: arr3,
})
})
}
}
//that.$set(that.dataForm,'command',j.command)
if (j.body) {
j.dataFormBody = JSON.parse(j.body)
}
if (that.dataForm.deviceType == '15') {
// that.loadinfoBoardTemplate(1,j.dataFormBody.textInfoList);
} else if (that.dataForm.deviceType == '26') {
that.dataForm.speed26 = j.speed
that.dataForm.direction26 = j.direction == '0' ? '正向' : '反向'
} else if (that.dataForm.deviceType == '27') {
that.dataForm.co27 = j.co
that.dataForm.vi27 = j.vi
} else if (that.dataForm.deviceType == '28') {
that.dataForm.light28 = j.light
} else if (that.dataForm.deviceType == '43') {
that.dataForm.height43 = j.height
}
}
if (that.statusTimer) {
clearTimeout(that.statusTimer)
that.statusTimer = null
}
if (that.deviceDialogVisible || that.deviceControlShow) {
console.log('deviceStatus2')
that.statusTimer = setTimeout(() => {
that.deviceStatus()
}, 2000)
}
} else {
that.$message.warning(res.data.message)
}
}
})
},
deviceStatusBatch(index) {
var that = this
deviceStatusBatch({
deviceId: that.dataForm.deviceId,
deviceType: that.dataForm.deviceType,
}).then((res) => {
if (res.status == 200) {
if (res.data.retCode == 0) {
res.data.result.forEach((item) => {
that.deviceData2.forEach((item1) => {
if (item.deviceId == item1.deviceId) {
item1.task = item.task
}
})
if (item.task) {
that.$set(that.dataForm, 'task', item.task)
var j = JSON.parse(item.task)
if (index == 2) {
that.planDeviceType.forEach((p1) => {
that.planDetailMap[p1].forEach((p2) => {
if (p2.id == item.deviceId) {
p2.ret = j.command
}
})
})
that.planDetailMap = JSON.parse(
JSON.stringify(that.planDetailMap)
)
} else if (index == 1) {
that.planDetailData.forEach((p1) => {
if (p1.type == item.deviceType) {
p1.data.forEach((p2) => {
if (p2.id == item.deviceId) {
p2.ret = j.command
}
})
}
})
that.planDetailData = JSON.parse(
JSON.stringify(that.planDetailData)
)
}
//that.$set(that.dataForm,'taskName',j.command)
if (j.command != -1) {
let imgForm = window.config.drapLeftElMap[item.deviceType]
if (item.deviceType == '11') {
that.componentsList.forEach((item2) => {
if (item2.deviceId == item.deviceId) {
item2.imgUrl = imgForm['url' + j.command]
}
})
} else if (item.deviceType == '13') {
that.componentsList.forEach((item2) => {
if (item2.deviceId == item.deviceId) {
item2.imgUrl =
imgForm[
'url' + item2.direction + '' + item2.direction
][j.command]
}
})
} else if (item.deviceType == '14') {
that.componentsList.forEach((item2) => {
if (item2.deviceId == item.deviceId) {
item2.imgUrl = imgForm['urls'][j.command]
}
})
}
}
//that.$set(that.dataForm,'command',j.command)
if (j.body) {
j.dataFormBody = JSON.parse(j.body)
}
}
})
if (that.statusTimer) {
clearTimeout(that.statusTimer)
that.statusTimer = null
}
if (
that.deviceDialogVisible2 ||
that.planDetailShow ||
that.warnDetailShow
) {
console.log('deviceStatusBatch2')
that.statusTimer = setTimeout(() => {
that.deviceStatusBatch(index)
}, 2000)
} else {
console.log('deviceStatusBatch15')
that.statusTimer = setTimeout(() => {
that.deviceStatusBatch()
}, 15000)
}
} else {
//that.$message.warning(res.data.message);
}
}
})
},
loadinfoBoardTemplate(index, list, modelId) {
console.log("index", index)
var that = this
getProgramTree({ name: this.filterText }).then((res) => {
console.log("this.treeData", res.data.data)
console.log("res.code", res.data.code)
if (res.data.code == 200) {
console.log("this.treeData", res.data.data)
res.data.data.forEach((item) => {
// this.count += item.children.length;
if (item.children) {
item.children.forEach((child) => {
if (child.dynamicValueNum > 0) {
console.log("大于0");
for (let i = 0; i < child.dynamicValueNum; i++) {
child["contentValue" + (i + 1)] =
child.dynamicValueList.length > 0
? child.dynamicValueList[i]
: "";
}
}
});
}
});
// this.treeData = res.data;
this.treeData = res.data.data;
// this.infoBoardTemplateList = res.data.data
console.log("this.treeData", this.treeData)
this.infoBoardTemplateList = []
const newArray = res.data.data.flatMap(item => item.children);
console.log("newArray", newArray)
this.infoBoardTemplateList = newArray
// res.data.data.forEach((item, i) => {
//
// var form = {
// ...item,
// templateHtml: that.domRender(item.textInfo),
// }
// that.infoBoardTemplateList.push(form)
// })
}
});
infoBoardTemplateList().then((res) => {
if (res.status == 200) {
if (res.data.retCode == 0) {
if (index == 1) {
that.templateHtmlList = []
console.log("res.data.result111111111111", res.data.result)
res.data.result.forEach((item, i) => {
list.forEach((item1) => {
if (item.id == item1.id) {
var str = that.domRender(
item.textInfo,
item1.fillInfo,
item.id,
1
)
var html = ''
var backColor = ''
var fontColor = ''
var fontFormat = ''
var fontFormatUpDown = ''
let fontSize = item.fontSize.split('*')[0]
switch (item.backColor) {
case '红色':
backColor = 'red'
break
case '黄色':
backColor = 'yellow'
break
case '绿色':
backColor = 'green'
break
case '黑色':
backColor = 'black'
break
}
switch (item.fontColor) {
case '红色':
fontColor = 'red'
break
case '黄色':
fontColor = 'yellow'
break
case '绿色':
fontColor = 'green'
break
case '黑色':
fontColor = 'black'
break
}
switch (item.fontFormat) {
case '居中':
fontFormat = 'center'
break
case '居左':
fontFormat = 'left'
break
case '居右':
fontFormat = 'right'
break
}
switch (item.fontFormatUpDown) {
case '居中':
fontFormatUpDown = 'center'
break
case '居左':
fontFormatUpDown = 'left'
break
case '居右':
fontFormatUpDown = 'right'
break
}
html += `<div style="background-color: ${backColor};color: ${fontColor};width: ${item.cmsWidth
}px;height: ${item.cmsHeight
}px;display: flex;justify-content: ${fontFormat};align-items: ${fontFormatUpDown};font-size: ${Number(
fontSize
)}px;font-family: ${item.fontName}">${str}</div>`
that.templateHtmlList.push({
html: html,
intervaly: item.intervaly,
})
}
})
})
if (that.templateHtmlList.length > 0) {
if (that.tempTimer) {
clearTimeout(that.tempTimer)
that.tempTimer = null
}
that.templateDisplay(0) // 递归调用显示函数
}
} else if (index == 2) {
// that.infoBoardTemplateList = res.data.result
} else if (index == 3) {
that.templateHtmlList = []
res.data.result.forEach((item, i) => {
list.forEach((item1) => {
if (item.id == item1.id) {
var str = that.domRender(
item.textInfo,
item1.fillInfo,
item.id,
1
)
var fontColor = ''
let fontSize = Number(item.fontSize.split('*')[0])
switch (item.fontColor) {
case '红色':
fontColor = 'ff0000'
break
case '黄色':
fontColor = 'ffff00'
break
case '绿色':
fontColor = '008000'
break
case '黑色':
fontColor = '000000'
break
}
that.templateHtmlList.push({
VMSId: [modelId],
infoType: 'text',
imageUrl: '',
text: str,
textColor: fontColor,
textSize: fontSize,
rollingDirection: 'horizontal',
rollingSpeed: 20,
intervaly: item.intervaly,
})
}
})
})
if (that.templateHtmlList.length > 0) {
if (that.tempTimer) {
clearTimeout(that.tempTimer)
that.tempTimer = null
}
that.templateDisplay(0, 3) // 递归调用显示函数
}
} else {
// that.infoBoardTemplateList = []
// res.data.result.forEach((item, i) => {
// var form = {
// ...item,
// templateHtml: that.domRender(item.textInfo),
// }
// that.infoBoardTemplateList.push(form)
// })
}
} else {
that.$message.warning(res.data.message)
}
}
})
},
templateDisplay(index, m) {
var that = this
if (m == 3) {
that.updateVMSInfo(that.templateHtmlList[index])
} else {
that.templateInfoHtml = that.templateHtmlList[index].html // 显示当前索引的名称
}
let nextIndex = (index + 1) % that.templateHtmlList.length // 计算下一个索引
let nextTime = parseInt(that.templateHtmlList[nextIndex].intervaly) * 1000 // 下一个元素的显示时间
that.tempTimer = setTimeout(() => {
that.templateDisplay(nextIndex, m) // 递归调用显示函数
}, nextTime)
},
handleAddToTable(node, data) {
console.log("添加至表格", node, data);
// let exists = this.tableData.find(
// (obj) => obj.programId === node.data.programId
// );
// if (exists) return this.$message("该项已添加，请勿重复添加！");
// this.tableData.push(data);
// console.log("添加至表格", this.tableData);
},
filterNode(value, data) {
console.log(value, data);
if (!value) return true;
return data.name.indexOf(value) !== -1;
},
getColor(value) {
if (value == "#7b5ba1") {
return '红'
} else if (value == "#008000") {
return '绿'
} else if (value == "#FFFF00") {
return '黄'
}
},
addComment(event, row) {
this.tempMap[row.id] = {
...this.tempMap[row.id],
[event.target.attributes.idData.value]: event.target.value,
}
console.log(this.tempMap, 'this.tempMap')
},
handleCommitClick(index) {
var that = this
var url = ''
that.deviceLoading = true
/*if(that.statusTimer){
clearTimeout(that.statusTimer)
that.statusTimer = null
}*/
console.log(that.dataForm.command, 'cccccccccccccc')
var json = {
//deviceId: that.dataForm.deviceId,
deviceType: that.dataForm.deviceType,
command: that.dataForm.command,
}
console.log(json, index, 'wwwwww')
if (index) {
console.log('111')
//批量控制
if (that.multipleSelection.length > 0) {
var deviceIds = []
that.multipleSelection.forEach((item) => {
deviceIds.push(item.deviceId)
})
json.deviceId = deviceIds.toString()
} else {
that.$message.info('请选择')
return ''
}
//that.dataForm.deviceId = json.deviceId
url = '/json/iot/iotControlBatch'
} else {
console.log('222')
json.deviceId = that.dataForm.deviceId
url = '/xjIotApi/iotServiceCommon/ServiceApiCommon'
}
console.log('333', url, that.dataForm.deviceType)
if (that.dataForm.deviceType == '12') {
json.body = JSON.stringify(that.dataFormBody)
} else if (that.dataForm.deviceType == '15') {
json.command = '15_01'
var ids = Object.keys(this.tempMap)
var arr = []
that.textInfoList.forEach((item1) => {
var a = {
id: item1,
fillInfo: '',
}
ids.forEach((item) => {
if (item == item1) {
var fillInfos = Object.values(this.tempMap[item])
a.fillInfo = fillInfos.join(';')
}
})
arr.push(a)
})
json.body = JSON.stringify({ textInfoList: arr })
} else if (
that.dataForm.deviceType == '40' ||
that.dataForm.deviceType == '41' ||
that.dataForm.deviceType == '42'
) {
const convertedArray = that.dataForm.iotKeys.reduce((acc, curr) => {
const [key, value] = curr.split(':')
const existing = acc.find((item) => item.startsWith(key))
if (existing) {
const index = acc.indexOf(existing)
acc[index] = `${existing},${value}`
} else {
acc.push(`${key}:${value}`)
}
return acc
}, [])
json.iotKey = convertedArray.join('|')
}
console.log(json, url, 'urlurl')
if (that.dataForm.deviceType == '13' || that.dataForm.deviceType == '14' || that.dataForm.deviceType == '15' || that.dataForm.deviceType == '19' || that.dataForm.deviceType == '11') { //单独走的控制接口
if (index) { //批量控制
console.log(json, that.multipleSelection, '批量')
let data = []
if (that.multipleSelection.length > 0) {
that.multipleSelection.forEach((item) => {
let operationInstruction = ""
if (that.dataForm.deviceType == '13') {
// operationInstruction = json.command==0 ? '正向通行' : json.command==1 ? '反向通行' : json.command==2 ? '封道' : json.command==3 ? '正向左转' : json.command==4 ? '反向左转': ''
operationInstruction = json.command == 0 ? '正向通行' : json.command == 1 ? '反向通行' : json.command == 2 ? '封道' : json.command == 3 ? '正向左转' : ''
} else if (that.dataForm.deviceType == '14') {
operationInstruction = json.command == 1 ? '变红' : json.command == 2 ? '变黄' : json.command == 3 ? '变绿' : ''
} else if (that.dataForm.deviceType == '11') {
operationInstruction = json.command == 0 ? '停止' : json.command == 1 ? '正转' : json.command == 2 ? '反转' : ''
} else if (that.dataForm.deviceType == '19') { // 卷帘门
operationInstruction = json.command == 0 ? '停止' : json.command == 1 ? '开' : json.command == 2 ? '关' : ''
}
data.push({
deviceId: item.deviceId,
writeOrRead: 'W',
operationInstructions: operationInstruction
})
})
// json.deviceId
console.log(deviceIds)
} else {
that.$message.info('请选择')
return ''
}
newIotControlS(data, '/xjIotApi/iotServiceCommon/ServiceApiCommonList').then((res) => {
that.deviceLoading = false
if (res.data.code == 200) {
that.$message.success('成功')
that.componentsList.forEach((item) => {
if (item.deviceId == that.dataForm.deviceId) {
item.imgUrl =
imgForm['url' + item.direction + '' + item.direction][
j.command
]
}
})
} else {
that.$message.error(res.data.msg)
}
})
} else { //单个控制
if (that.dataForm.deviceType == '13' || that.dataForm.deviceType == '14' || that.dataForm.deviceType == '11' || that.dataForm.deviceType == '19') {
let operationInstruction = ''
if (that.dataForm.deviceType == '13') {
// operationInstruction = json.command==0 ? '正向通行' : json.command==1 ? '反向通行' : json.command==2 ? '封道' : json.command==3 ? '正向左转' :json.command==4 ? '反向左转' : ''
operationInstruction = json.command == 0 ? '正向通行' : json.command == 1 ? '反向通行' : json.command == 2 ? '封道' : json.command == 3 ? '正向左转' : ''
} else if (that.dataForm.deviceType == '14') {
operationInstruction = json.command == 1 ? '变红' : json.command == 2 ? '变黄' : json.command == 3 ? '变绿' : ''
} else if (that.dataForm.deviceType == '11') { // 风机
operationInstruction = json.command == 0 ? '停止' : json.command == 1 ? '正转' : json.command == 2 ? '反转' : ''
} else if (that.dataForm.deviceType == '19') { // 卷帘门
operationInstruction = json.command == 0 ? '停止' : json.command == 1 ? '开' : json.command == 2 ? '关' : ''
}
let data = {
deviceId: json.deviceId,
writeOrRead: 'W',
operationInstructions: operationInstruction
}
console.log('走这里了 11 风机', data)
newIotControl(data, '/xjIotApi/iotServiceCommon/ServiceApiCommon').then((res) => {
console.log(res)
that.deviceLoading = false
if (res.data.code == 200) {
that.$message.success('成功')
that.componentsList.forEach((item) => {
if (item.deviceId == that.dataForm.deviceId) {
item.imgUrl =
imgForm['url' + item.direction + '' + item.direction][
j.command
]
}
})
} else {
that.$message.error(res.data.msg)
}
})
} else if (that.dataForm.deviceType == '15') {
console.log(that.textInfoList, that.infoBoardTemplateList, that.dataForm, that.dataForm.extraJson, 'xxxxxxxxxxxxxxxxxxxxxx')
let checkArr = [] //选中的情报板
if (that.textInfoList.length > 0) {
that.textInfoList.forEach((item1) => {
that.infoBoardTemplateList.forEach((item) => {
if (item1 == item.programId) {
checkArr.push(item)
}
})
})
}
console.log(checkArr, '555555555555')
// let arr = [
// { id: 1, textInfo: '隧道火灾，禁止驶入' },
// { id: 2, textInfo: '隧道限速{}Km/h' },
// { id: 3, textInfo: '隧道火灾，禁止驶入2' },
// { id: 4, textInfo: '隧道火灾，禁止驶入3' },
// { id: 5, textInfo: '隧道限速{}Km/h,最高速{}Km/h,最低速{}Km/h' },
// ];
let temp = this.tempMap
// 遍历 checkArr 数组
checkArr.forEach(item => {
let text = item.content;
// 如果 temp 中存在该 id 的数据
if (temp[item.programId]) {
let replacements = temp[item.programId];
let matchCount = 0;
// 替换每个 {} 占位符
text = text.replace(/{}/g, () => {
// 获取当前替换的值（按照顺序）
let replacementKey = `temp${matchCount}`;
matchCount++;
// 如果该替换值存在，进行替换
if (replacements[replacementKey]) {
return replacements[replacementKey];
}
return '{}'; // 如果没有找到对应的值，保持原样
});
}
// 更新 checkArr 中的 textInfo
item.content = text;
});
let company = ''
if (that.dataForm.extraJson) {
let extr = JSON.parse(that.dataForm.extraJson);
company = extr.belongs_company
}
let data = {
iotDeviceList: [
{ deviceId: json.deviceId, manufacturer: company }
],
playProgramlist: []
}
if (checkArr) {
checkArr.forEach((val) => {
let Size = (val.cmsWidth == 384 && val.cmsHeight == 288) ? '1' : (val.cmsWidth == 128 && val.cmsHeight == 80) ? '2' : (val.cmsWidth == 576 && val.cmsHeight == 48) ? '3' : (val.cmsWidth == 624 && val.cmsHeight == 48) ? '4' : (val.cmsWidth == 128 && val.cmsHeight == 64) ? '5' : ''
data.playProgramlist.push(
{
programId: val.programId,
name: val.name,
programType: val.programType,
type: val.type,
displaySize: val.displaySize,
displayMode: val.displayMode,
displaySpeed: val.displaySpeed,
fontFamily: val.fontFamily,
// fontSize: this.convertFontSize(val.fontSize),
// fontColor: this.getHexColor(val.fontColor),
fontSize: val.fontSize,
fontColor: val.fontColor,
alignment: val.alignment,
content: val.content
}
)
console.log("data.playProgramlist", data.playProgramlist)
})
}
playManuallyTriggered(data, '/xjIotApi/iotServiceCommon/playManuallyTriggered').then((res) => {
console.log(res, 'rrrr')
that.deviceLoading = false
})
}
}
// that.deviceLoading = false
}
else {
iotControl(json, url).then((res) => {
that.deviceLoading = false
if (res.status == 200) {
if (res.data.retCode == 0) {
that.$message.success('成功')
if (!res.data.result) {
return
}
that.dataForm.status = res.data.result.status
that.dataForm.task = res.data.result.task
if (that.dataForm.task) {
var j = JSON.parse(that.dataForm.task)
that.$set(that.dataForm, 'taskName', j.command)
//that.$set(that.dataForm,'command',j.command)
if (j.command != -1) {
let imgForm =
window.config.drapLeftElMap[that.dataForm.deviceType]
if (that.dataForm.deviceType == '11') {
that.componentsList.forEach((item) => {
if (item.deviceId == that.dataForm.deviceId) {
item.imgUrl = imgForm['url' + j.command]
}
})
} else if (that.dataForm.deviceType == '13') {
that.componentsList.forEach((item) => {
if (item.deviceId == that.dataForm.deviceId) {
item.imgUrl =
imgForm['url' + item.direction + '' + item.direction][
j.command
]
}
})
} else if (that.dataForm.deviceType == '14') {
that.componentsList.forEach((item) => {
if (item.deviceId == that.dataForm.deviceId) {
item.imgUrl = imgForm['urls'][j.command]
}
})
} else if (
that.dataForm.deviceType == '40' ||
that.dataForm.deviceType == '41' ||
that.dataForm.deviceType == '42'
) {
that.iotKeyData = []
const str1 = that.dataForm.iotKey.split('|')
const str2 = that.dataForm.taskName.split('|')
str1.forEach((item, i) => {
const [name, values] = item.split(':')
const name1 = window.config.pumpMap[name]
const [name2, values2] = str2[i].split(':')
var arr = values.split(',')
var arr2 = values2.split(',')
var arr3 = []
arr.forEach((item2, i2) => {
if (name == 'ps' || name == 'hs') {
arr3.push({
id: `${name}:${item2}`,
name: i2 + 1 + '#：' + arr2[i2],
})
} else {
arr3.push({
id: `${name}:${item2}`,
name:
i2 +
1 +
'#：' +
that.filedFomatter(arr2[i2], that.taskList),
})
}
})
that.iotKeyData.push({
name: name1,
data: arr3,
})
})
}
}
if (j.body) {
var b = JSON.parse(j.body)
if (that.dataForm.deviceType == '12') {
that.$set(that.dataForm, 'light', b.light)
} else if (that.dataForm.deviceType == '15') {
console.log("b.textInfoList", b.textInfoList)
that.loadinfoBoardTemplate(1, b.textInfoList)
}
}
}
//that.loadTable()
//that.loadDevice2(that.dataForm.deviceType)
} else {
that.$message.warning(res.data.message)
}
}
})
}
},
// 转换fontsize字段
convertFontSize(fontSize) {
const parts = fontSize.split('*');
let size = ''
if (parts.length > 1) {
size = parts[0]; // 取 * 前面的部分
} else {
size = ''; // 如果没有 * 号，返回空
}
return size + 'px'
},
getHexColor(fontColor) {
const colorMapping = {
'红色': '#FF0000',
'黄色': '#FFFF00',
'绿色': '#008000'
};
// 如果 colorMapping 中存在 fontColor 对应的值，返回其对应的 hex
let hexColor = '';
if (colorMapping[fontColor]) {
hexColor = colorMapping[fontColor];
} else {
hexColor = ''; // 如果没有匹配的颜色
}
return hexColor
},
// 点击画布的时候, 取消选择组件
laryerMouseDown() {
var that = this
that.curControl = null
},
distanceFromNine(num) {
let distance = 0
while (num !== 10) {
if (num < 10) {
num++
} else {
num--
}
distance++
}
return distance
},
liuliangLine(data) {
var that = this
var myChart1 = echarts.init(document.getElementById('liuliangLineId'))
var sdata = []
data.x.forEach((item) => {
sdata.push(item.substring(6, 8) + '日' + item.substring(8, 10) + '时')
})
myChart1.setOption({
grid: {
left: '0%',
right: '0%',
top: '10%',
bottom: '0%',
containLabel: true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
color: 'rgba(50, 216, 205, 1)',
},
},
},
/*legend: {
icon: 'circle',
right: '5%',
itemWidth: 10,
itemGap: 5,
textStyle: {
color: '#fff',
padding: [3, 0, 0, 0],
},
},*/
xAxis: [
{
type: 'category',
boundaryGap: 1,
axisLine: {
show: false,
},
axisLabel: {
color: 'rgba(255,255,255,0.7)',
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
data: sdata,
},
],
yAxis: [
{
// max: 1000,
minInterval: 1,
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255, 255, 255, 0.2)',
type: 'dashed',
},
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
margin: 10,
textStyle: {
color: 'rgba(255,255,255,0.7)',
},
},
axisTick: {
show: false,
},
},
],
series: [
{
name: '深圳方向',
type: 'line',
smooth: true,
stack: '深圳方向',
symbolSize: 5,
showSymbol: false,
itemStyle: {
normal: {
color: '#bc7f39',
lineStyle: {
color: '#bc7f39',
width: 2,
},
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(188,127,57,0.8)',
},
{
offset: 0.5,
color: 'rgba(188,127,57,0)',
},
],
false
),
},
},
data: data.y2,
},
{
name: '开平方向',
type: 'line',
smooth: true,
stack: '开平方向',
symbolSize: 5,
showSymbol: false,
itemStyle: {
normal: {
color: '#7CD6CA',
lineStyle: {
color: '#7CD6CA',
width: 2,
},
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(124, 214, 202, 0.8)',
},
{
offset: 0.5,
color: 'rgba(124, 214, 202,0)',
},
],
false
),
},
},
data: data.y1,
},
],
})
},
getNowTime() {
let dateTime
let yy = new Date().getFullYear()
let mm =
new Date().getMonth() + 1 < 10
? '0' + (new Date().getMonth() + 1)
: new Date().getMonth() + 1
let dd =
new Date().getDate() < 10
? '0' + new Date().getDate()
: new Date().getDate()
let hh =
new Date().getHours() < 10
? '0' + new Date().getHours()
: new Date().getHours()
let mf =
new Date().getMinutes() < 10
? '0' + new Date().getMinutes()
: new Date().getMinutes()
let ss =
new Date().getSeconds() < 10
? '0' + new Date().getSeconds()
: new Date().getSeconds()
var days = new Date().getDay()
switch (days) {
case 1:
days = '星期一'
break
case 2:
days = '星期二'
break
case 3:
days = '星期三'
break
case 4:
days = '星期四'
break
case 5:
days = '星期五'
break
case 6:
days = '星期六'
break
case 0:
days = '星期日'
break
}
//dateTime = yy + '/' + mm + '/' + dd + ' ' + hh + ':' + mf + ':' + ss + ' ' + days
dateTime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf
return dateTime
},
filedFomatter(value, list) {
if (value === '' || value == undefined) return ''
const item = list.find((item) => item.id == value)
return item ? item.name : value
},
domRender(str, fillInfo, id, index) {
var that = this
let strData = str
//var reg = /\{.*?\}/g
let charCount = str.split('{}').length - 1
var arr = []
if (fillInfo) {
arr = fillInfo.split(';')
}
for (var i = 0; i < charCount; i++) {
if (arr.length > 0) {
if (index) {
strData = strData.replace('{}', arr[i])
} else {
strData = strData.replace(
'{}',
'<input idData=temp' +
i +
' value="' +
arr[i] +
'" class="emptyOut" type="number" />'
)
}
that.tempMap[id] = {
...this.tempMap[id],
['temp' + i]: arr[i],
}
} else {
strData = strData.replace(
'{}',
'<input idData=temp' + i + ' class="emptyOut" type="number" />'
)
}
}
return strData
},
},
beforeDestroy() {
var that = this
if (that.warnTimer) {
clearInterval(that.warnTimer)
that.warnTimer = null
}
},
}
</script>
<style scoped lang="less">
.input-box {
.el-col-5 {
max-width: 20%;
flex: 0 0 20%;
}
}
.big-main {}
.metadigiee-video-player {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
#VideoPlayer {
width: 100%;
height: 100%;
object-fit: fill;
}
.infowindow {
position: absolute;
}
.el-tree {
padding: 10px;
}
::v-deep .el-tree-node__expand-icon {
// display: none !important;
// display: none !important;
}
.custom-tree-node {
// flex: 1;
// display: flex;
// align-items: center;
// justify-content: space-between;
font-size: 14px;
padding-right: 8px;
// line-height: 55px;
// display: inline-block;
position: relative;
.label {
flex: 1;
max-width: 200px !important;
display: inline-block;
white-space: nowrap;
/* 防止文本换行 */
overflow: hidden;
/* 隐藏溢出的文本 */
text-overflow: ellipsis;
/* 显示省略号 */
// background: saddlebrown;
}
.icon {
height: 100%;
position: absolute;
right: 10px;
z-index: 9999 !important;
}
}
.custom-tree-node:hover .node-actions {
display: block;
position: absolute;
right: 0px;
top: 3px;
z-index: 9999 !important;
}
.node-actions {
display: none;
}
.header {
width: 100%;
height: 65px;
/*background: url("~@/assets/images/headerBg.png");
background-size: auto 100%;*/
.tunnel-item {
width: 170px;
height: 42px;
font-size: 18px;
display: flex;
justify-content: center;
cursor: pointer;
background: url('~@/assets/images/herder_menuBg.png');
background-size: 100% 100%;
line-height: 42px;
}
.tunnel-item-active {
text-align: center;
color: #5dd5c8;
cursor: pointer;
background: url('~@/assets/images/herder_menuBg_c.png');
background-size: 100% 100%;
}
}
/*.titleSpan{
letter-spacing: 2px;
font-size: 26px;
color: #FFFFFF;
font-weight: 600;
background: linear-gradient(0deg, #9AD3FA, #EFFBFF);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}*/
.main {
height: 600px;
margin-top: 20px;
padding: 0 20px;
.main-type-item {
height: 41px;
text-align: center;
cursor: pointer;
float: left;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
padding: 0 20px;
background: url('~@/assets/images/main_typeBg.png');
background-size: 100% 100%;
}
.main-type-item-active {
color: #5dd5c8;
cursor: pointer;
}
.main-device-item {
border: 1px solid #ffffff;
text-align: center;
padding: 6px 20px;
float: left;
}
.main-item-p {
font-size: 16px;
margin: 10px 0;
}
.drap-container {
flex: 1;
width: 100%;
height: 100%;
position: relative;
float: left;
text-align: center;
.drap-container-item {
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
position: absolute;
user-select: none;
cursor: pointer;
border: 1px solid transparent;
.drap-item-img {
display: block;
width: 100%;
// height: 80px;
user-select: none;
}
.drap-item-name {
text-align: center;
}
}
.drap-container-item-active {
border: 1px solid skyblue;
}
.drap-container-img {
vertical-align: middle;
/*width: 28px;
height: 28px;*/
}
.drap-container-div {
background: #09253f;
border-radius: 10px;
border: 2px solid #969da2;
font-size: 12px;
display: flex;
text-align: center;
align-items: center;
/*color: #cc3232;*/
color: #ccc032;
/*color: #25bd2d;*/
}
.drap-container-name {
text-align: center;
}
}
.dot-container {
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
/* 控制横线高度 */
border-bottom: 1px solid #a5afc2;
}
.dot {
width: 104px;
height: 40px;
font-size: 12px;
background: url('~@/assets/images/main_typeBg.png');
background-size: 100% 100%;
margin: 0 100px;
}
.dot-span {
width: 100%;
height: 100%;
display: flex;
line-height: 23px;
align-items: center;
justify-content: center;
}
.dot-circle {
width: 13px;
height: 13px;
background: url('~@/assets/images/dotCircle.png');
background-size: 100% 100%;
margin: 0 auto;
}
.dot:first-child:before {
margin-left: 0;
}
.dot:last-child:before {
margin-right: 0;
}
.dot-container2 {
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
/* 控制横线高度 */
border-top: 1px solid #a5afc2;
}
.dot-circle2 {
width: 13px;
height: 13px;
background: url('~@/assets/images/dotCircle.png');
background-size: 100% 100%;
margin: -13px auto 0;
}
}
.footer {
height: calc(100% - 700px);
.title_div {
width: calc(100% - 35px);
height: 40px;
background: url('~@/assets/images/titleBg.png');
background-size: 100% 100%;
line-height: 40px;
padding-left: 35px;
font-size: 16px;
color: #aed6ff;
font-weight: bold;
letter-spacing: 1px;
}
.footer-item {
width: 100%;
height: calc(100% - 60px);
margin-top: 20px;
}
.device-bg {
width: 100%;
height: 100%;
background: url('~@/assets/images/device1.png');
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.device-bg2 {
background: url('~@/assets/images/device2.png');
background-size: 100% 100%;
}
.device-bg3 {
background: url('~@/assets/images/device3.png');
background-size: 100% 100%;
}
}
.full-screen-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5); // 设置遮罩层的背景颜色和透明度
z-index: 98; // 设置遮罩层的层级
pointer-events: auto;
}
.plan-item {
width: 480px;
height: 683px;
position: absolute;
left: 384px;
top: 130px;
z-index: 99;
background-color: rgba(13, 35, 76, 0.95);
box-shadow: inset 0px 0px 15px #0fcff1;
border-radius: 15px;
pointer-events: auto;
}
.control-item {
width: 380px;
height: 683px;
position: absolute;
right: 40px;
top: 130px;
z-index: 99;
background-color: rgba(13, 35, 76, 0.95);
box-shadow: inset 0px 0px 15px #0fcff1;
border-radius: 15px;
pointer-events: auto;
}
.item-frame {
border: 1px solid #487ef7;
border-radius: 2px;
position: relative;
}
.item-frame-title {
margin-top: -12px;
background-color: rgb(13, 36, 86);
position: absolute;
padding: 0 6px;
margin-left: 10px;
font-size: 16px;
}
.item-frame-p {
color: #cccccc;
margin-bottom: 10px;
}
.warn-item {
width: 364px;
height: 683px;
position: absolute;
left: 20px;
top: 130px;
font-family: SourceHanSansCN;
background: url('~@/assets/images/warnBg.png');
background-size: 100% 100%;
z-index: 99;
pointer-events: auto;
.title {
width: 200px;
height: 55px;
margin: -20px auto 0;
background: url('~@/assets/images/warnTitleBg.png');
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
font-weight: bold;
color: #ffffff;
}
.warnBtu {
width: 86px;
height: 28px;
text-align: center;
line-height: 25px;
font-size: 16px;
font-family: SourceHanSansCN;
background: url('~@/assets/images/warnBut.png');
background-size: 100% 100%;
display: inline-block;
cursor: pointer;
}
}
.deviceRun-item {
width: 544px;
height: 683px;
position: absolute;
left: 25px;
top: 130px;
font-family: SourceHanSansCN;
background: url('~@/assets/images/deviceRunBg.png');
background-size: 100% 100%;
z-index: 99;
pointer-events: auto;
.title {
width: 227px;
height: 58px;
margin: -20px auto 0;
background: url('~@/assets/images/deviceRunTitle.png');
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
font-weight: bold;
color: #ffffff;
}
.runColBg {
width: 100%;
background-image: url('~@/assets/images/runColBg.png');
background-size: 100% 40%;
background-position: bottom;
background-repeat: no-repeat, repeat;
padding: 5px 0;
font-family: SourceHanSansCN;
}
.runRowBg {
width: 100%;
height: 43px;
line-height: 45px;
background-image: url('~@/assets/images/runRowBg.png');
background-size: 100% 100%;
text-align: center;
color: #ffffff;
cursor: pointer;
font-size: 14px;
font-family: SourceHanSansCN;
margin-bottom: 18px;
}
}
.device-View {
height: 100%;
}
.device-View-main {
height: calc(100% - 120px);
position: relative;
margin: 0 auto;
}
/* 波动效果 */
.wave {
position: relative;
text-align: center;
}
.wave .circle {
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
opacity: 0;
background: #f36710;
}
.wave .circle:first-child {
animation: circle-opacity 1s infinite;
}
@keyframes circle-opacity {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(1.5);
}
}
// 选择框样式
/deep/.select-down .el-select {
margin-left: 30px !important;
}
/deep/.select-down .el-input__inner {
background: url('~@/assets/images/selectBg.png');
width: 365px;
height: 45px;
border: none;
color: #1afff7;
padding-left: 30px;
font-size: 16px;
}
/deep/.select-down .el-select .el-select-dropdown {
background: RGBA(28, 51, 91, 0.9);
border: 1px solid rgba(26, 255, 247, 0.4);
}
/deep/.select-down .el-popper .popper__arrow::after {
border-bottom-color: rgba(26, 255, 247, 0.4);
}
/deep/.select-down .el-popper .popper__arrow {
border-bottom-color: #1c335b;
}
/deep/.select-down .el-select-dropdown__item {
color: #ffffff;
}
/deep/.select-down .el-select-dropdown__item.selected,
/deep/.select-down .el-select .el-input .el-select__caret {
color: #1afff7;
}
/deep/.select-down .el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
background-color: #3865a9;
}
/deep/.temlCheckClass .el-checkbox__input {
vertical-align: top;
padding-top: 2px;
}
.popper-dropdown {
min-width: 80px !important;
padding: 0 !important;
}
.dropdown-item {
height: 30px;
line-height: 30px;
padding-left: 5px;
cursor: pointer;
}
.dropdown-item-active {
color: #5dd5c8;
}
.dropdown-item:hover {
background-color: rgba(26, 167, 255, 0.2);
}
.item-one-block:hover {
background-color: rgba(47, 174, 255, 0.2);
}
.item-one-block2 {
background-color: rgba(47, 174, 255, 0.2);
}
</style>
<style>
.emptyOut {
width: 60px;
margin: 0 5px;
}
@media (max-height: 1079px) {
.big-main {
zoom: 1;
}
.device-main {
zoom: 0.8;
}
}
@media (min-height: 1080px) {
.big-main {
zoom: 1.2;
}
.device-main {
zoom: 0.8;
}
#liuliangLineId {
zoom: 0.8;
}
}
.el-tree-node__content {
display: flex;
align-items: center;
height: 40px;
cursor: pointer;
}
</style>
Reference in New Issue View Git Blame Copy Permalink