3540 lines
108 KiB
Vue
3540 lines
108 KiB
Vue
<template>
|
||
<div class="mapchild">
|
||
<div class="bg">
|
||
<transition name="myr">
|
||
<iframe
|
||
name="myframe"
|
||
frameborder="0"
|
||
width="100%"
|
||
height="100%"
|
||
style="position: absolute; background: black"
|
||
ref="iframe"
|
||
v-show="htStatus == 1"
|
||
:src="unityUrl"
|
||
allowfullscreen
|
||
></iframe>
|
||
</transition>
|
||
<transition name="my">
|
||
<iframe
|
||
name="htWeb"
|
||
v-show="htStatus != 1"
|
||
frameborder="0"
|
||
width="100%"
|
||
height="100%"
|
||
style="position: absolute; background: black"
|
||
ref="htWeb"
|
||
:src="threeUrl"
|
||
allowfullscreen
|
||
></iframe>
|
||
</transition>
|
||
</div>
|
||
<transition name="my">
|
||
<div
|
||
class="xianmodel"
|
||
v-show="xianShow"
|
||
style="
|
||
width: 1200px;
|
||
height: 700px;
|
||
position: absolute;
|
||
background: rgb(4, 35, 69);
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
z-index: 99999;
|
||
"
|
||
>
|
||
<div
|
||
class="top"
|
||
style="
|
||
width: 100%;
|
||
height: 5%;
|
||
font-size: 18px;
|
||
padding: 5px 10px 0 0;
|
||
color: #fff;
|
||
text-align: right;
|
||
cursor: pointer;
|
||
box-sizing: border-box;
|
||
"
|
||
@click="handleXianfalse"
|
||
>
|
||
x
|
||
</div>
|
||
<!-- <div class="pic" style="width: 100%; height: calc(100% - 5%)"></div> -->
|
||
<iframe :src="yiciSrc" style="width: 100%; height: calc(100% - 5%)"></iframe>
|
||
</div>
|
||
</transition>
|
||
<transition name="my">
|
||
<div
|
||
v-show="mapShow"
|
||
style="
|
||
width: 40%;
|
||
height: 50%;
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
z-index: 99999;
|
||
"
|
||
>
|
||
<div
|
||
class="mapmodels"
|
||
style="width: 100%; height: 100%; position: relative"
|
||
>
|
||
<div
|
||
style="
|
||
position: absolute;
|
||
top: 0px;
|
||
left: 42%;
|
||
width: auto;
|
||
height: 20px;
|
||
font-size: 20px;
|
||
font-size: 20px;
|
||
margin-top: 10px;
|
||
color: #ffffff;
|
||
"
|
||
>
|
||
主展馆负一楼
|
||
</div>
|
||
<div
|
||
style="
|
||
position: absolute;
|
||
top: 0px;
|
||
right: 0px;
|
||
width: 20px;
|
||
height: 20px;
|
||
color: #fff;
|
||
cursor: pointer
|
||
font-size:20px;
|
||
"
|
||
@click="handletanchuan"
|
||
></div>
|
||
<div
|
||
class="reddianno"
|
||
style="
|
||
width: 10px;
|
||
height: 10px;
|
||
position: absolute;
|
||
top: 267px;
|
||
left: 220px;
|
||
"
|
||
title="开关名称开关容量"
|
||
@click="popShow"
|
||
></div>
|
||
<div
|
||
class="reddianno"
|
||
style="
|
||
width: 10px;
|
||
height: 10px;
|
||
position: absolute;
|
||
top: 264px;
|
||
left: 234px;
|
||
"
|
||
title="上级开关"
|
||
@click="popShow"
|
||
></div>
|
||
<div
|
||
class="reddianno"
|
||
style="
|
||
width: 10px;
|
||
height: 10px;
|
||
position: absolute;
|
||
top: 257px;
|
||
left: 262px;
|
||
"
|
||
title="下级开关"
|
||
@click="popShow"
|
||
></div>
|
||
<div
|
||
style="
|
||
position: absolute;
|
||
top: 140px;
|
||
right: 320px;
|
||
width: 100px;
|
||
height: 100%;
|
||
transform: rotate(45deg);
|
||
"
|
||
>
|
||
<div
|
||
class="reddian"
|
||
style="position: absolute; top: 30px; left: 0px"
|
||
@click="handledianwei"
|
||
></div>
|
||
</div>
|
||
<div
|
||
style="
|
||
width: 216px;
|
||
height: 143px;
|
||
position: relative;
|
||
left: 39%;
|
||
top: 21%;
|
||
"
|
||
class="popmodels"
|
||
v-show="popInfoShow"
|
||
>
|
||
<div
|
||
style="
|
||
position: absolute;
|
||
top: 0px;
|
||
right: 0px;
|
||
width: 13px;
|
||
height: 20px;
|
||
color: #fff;
|
||
cursor: pointer
|
||
font-size:20px;
|
||
"
|
||
@click="handlePop"
|
||
>
|
||
x
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</transition>
|
||
<div class="host-body">
|
||
<HeaderIndex style="position: relative" :htStatus= 'htStatus' />
|
||
<div class="main">
|
||
<transition name="homeleaves">
|
||
<div class="left" v-if="homeActive">
|
||
<div class="leftmenus">
|
||
<div class="menus">
|
||
<div
|
||
class="list"
|
||
v-for="(item, index) in menusArr"
|
||
:class="css_list[index]"
|
||
:key="index"
|
||
@click="handleMenus(index)"
|
||
:style="{
|
||
backgroundImage:
|
||
menusActive != index
|
||
? 'url(' + menubg.url + ')'
|
||
: 'url(' + menubg.actUrl + ')',
|
||
}"
|
||
>
|
||
<p>{{ item.text }}</p>
|
||
<img
|
||
:src="menusActive != index ? item.pic : item.actPic"
|
||
alt=""
|
||
style="margin-right: 10px"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="menshow" style="margin-left:5px;cursor: pointer;" @click="handleMenufalse()">
|
||
<img src="@/assets/newimgs/WechatIMG2.png" alt="">
|
||
</div>
|
||
</div>
|
||
</transition>
|
||
<transition name="homeleave">
|
||
<div class="right" v-if="homeActive">
|
||
<div class="infothings" v-if="menusActive == 0" v-show="infothingsShow">
|
||
<div class="toptitle">配电房信息</div>
|
||
<div class="info">
|
||
<div
|
||
class="list"
|
||
:style="{
|
||
background:
|
||
index % 2 == 0 ? 'rgba(1,34,85,0.4)' : 'transparnt',
|
||
}"
|
||
v-for="(item, index) in infoArr"
|
||
:key="index"
|
||
>
|
||
<div>
|
||
<img :src="item.path" alt="" />
|
||
<span
|
||
style="color: #fff; margin-left: 10px; font-size: 14px"
|
||
>{{ item.name }}</span
|
||
>
|
||
</div>
|
||
<div class="text">
|
||
{{ item.text }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="infos">
|
||
<div
|
||
class="list"
|
||
:class="getBg[index]"
|
||
v-for="(item, index) in fuzaiArr"
|
||
:key="index"
|
||
>
|
||
<div class="text" :style="{'margin-left':(index%2==0?'88px':'100px')}">
|
||
<span
|
||
v-if="index == 0"
|
||
style="
|
||
color: rgb(135, 237, 15);
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin-right: 2px;
|
||
"
|
||
>{{ item.vlaue }}</span
|
||
>
|
||
<span
|
||
v-if="index == 0"
|
||
style="color: rgb(135, 237, 15); font-size: 13px"
|
||
>{{ item.icon }}</span
|
||
>
|
||
<span
|
||
v-if="index == 1"
|
||
style="
|
||
color: rgb(252, 83, 251);
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin-right: 3px;
|
||
"
|
||
>{{ item.vlaue }}</span
|
||
>
|
||
<span
|
||
v-if="(index == 1)"
|
||
style="color: rgb(252, 83, 251); font-size: 13px"
|
||
>{{ item.icon }}</span
|
||
>
|
||
<span
|
||
v-if="index == 2"
|
||
style="
|
||
color: rgb(102, 254, 255);
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin-right: 3px;
|
||
"
|
||
>{{ item.vlaue }}</span
|
||
>
|
||
<span
|
||
v-if="index == 2"
|
||
style="color: rgb(102, 254, 255); font-size: 13px"
|
||
>{{ item.icon }}</span
|
||
>
|
||
<span
|
||
v-if="index == 3"
|
||
style="
|
||
color: rgb(251, 157, 62);
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin-right: 3px;
|
||
"
|
||
>{{ item.vlaue }}</span
|
||
>
|
||
<span
|
||
v-if="index == 3"
|
||
style="color: rgb(251, 157, 62); font-size: 13px"
|
||
>{{ item.icon }}</span
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="infothings" v-if="menusActive == 0" v-show="!infothingsShow">
|
||
<div class="toptitle">配电房信息</div>
|
||
<div class="info">
|
||
<div
|
||
class="list"
|
||
:style="{
|
||
background:
|
||
index % 2 == 0 ? 'rgba(1,34,85,0.4)' : 'transparnt',
|
||
}"
|
||
v-for="(item, index) in infoArr1"
|
||
:key="index"
|
||
>
|
||
<div>
|
||
<img :src="item.path" alt="" />
|
||
<span
|
||
style="color: #fff; margin-left: 10px; font-size: 14px"
|
||
>{{ item.name }}</span
|
||
>
|
||
</div>
|
||
<div class="text">
|
||
{{ item.text }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="infos">
|
||
<div
|
||
class="list"
|
||
:class="getBg[index]"
|
||
v-for="(item, index) in fuzaiArr1"
|
||
:key="index"
|
||
>
|
||
<div class="text" :style="{'margin-left':(index%2==0?'78px':'100px')}">
|
||
<span
|
||
v-if="index == 0"
|
||
style="
|
||
color: rgb(135, 237, 15);
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin-right: 2px;
|
||
"
|
||
>{{ item.vlaue }}</span
|
||
>
|
||
<span
|
||
v-if="index == 0"
|
||
style="color: rgb(135, 237, 15); font-size: 13px"
|
||
>{{ item.icon }}</span
|
||
>
|
||
<span
|
||
v-if="index == 1"
|
||
style="
|
||
color: rgb(252, 83, 251);
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin-right: 3px;
|
||
"
|
||
>{{ item.vlaue }}</span
|
||
>
|
||
<span
|
||
v-if="(index == 1)"
|
||
style="color: rgb(252, 83, 251); font-size: 13px"
|
||
>{{ item.icon }}</span
|
||
>
|
||
<span
|
||
v-if="index == 2"
|
||
style="
|
||
color: rgb(102, 254, 255);
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin-right: 3px;
|
||
"
|
||
>{{ item.vlaue }}</span
|
||
>
|
||
<span
|
||
v-if="index == 2"
|
||
style="color: rgb(102, 254, 255); font-size: 13px"
|
||
>{{ item.icon }}</span
|
||
>
|
||
<span
|
||
v-if="index == 3"
|
||
style="
|
||
color: rgb(251, 157, 62);
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin-right: 3px;
|
||
"
|
||
>{{ item.vlaue }}</span
|
||
>
|
||
<span
|
||
v-if="index == 3"
|
||
style="color: rgb(251, 157, 62); font-size: 13px"
|
||
>{{ item.icon }}</span
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="envior" v-if="menusActive == 3" v-show="environmentShow">
|
||
<div class="toptitle">环境信息</div>
|
||
<div class="info">
|
||
<div
|
||
class="list"
|
||
:style="{
|
||
background:
|
||
index % 2 != 0 ? 'rgba(1,34,85,0.4)' : 'transparnt',
|
||
}"
|
||
v-for="(item, index) in eniorArr"
|
||
:key="index"
|
||
>
|
||
<div>
|
||
<span style="color: #fff; font-size: 13px">{{
|
||
item.name
|
||
}}</span>
|
||
<img
|
||
:src="item.path"
|
||
alt=""
|
||
style="width: 16px; height: 16px; margin-right: 20px"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<span style="color: #fff; font-size: 13px">{{
|
||
item.nametwo
|
||
}}</span>
|
||
<span
|
||
v-if="index != 2"
|
||
style="color: #fff; font-size: 13px"
|
||
>{{ item.value }}</span
|
||
>
|
||
<img
|
||
v-else
|
||
:src="item.value"
|
||
alt=""
|
||
style="width: 16px; height: 16px"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="enviorLeft">
|
||
<div class="top">
|
||
<div
|
||
class="list"
|
||
:style="{
|
||
background:
|
||
index % 2 != 0 ? 'rgba(1,34,85,0.4)' : 'transparnt',
|
||
}"
|
||
v-for="(item, index) in environmentArr"
|
||
:key="index"
|
||
>
|
||
<div style="width: 100%;display: flex;justify-content: space-between;">
|
||
<span style="color: #fff; font-size: 13px">{{
|
||
item.name
|
||
}}</span>
|
||
<img
|
||
:src="item.path"
|
||
alt=""
|
||
style="width: 16px; height: 16px; margin-right: 10px"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bottom"></div>
|
||
</div> -->
|
||
<!-- <div class="enviorRight">
|
||
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
<div class="envior1" v-if="menusActive == 3" v-show="!environmentShow">
|
||
<div class="toptitle">环境信息</div>
|
||
<div class="info">
|
||
<div
|
||
class="list"
|
||
:style="{
|
||
background:
|
||
index % 2 != 0 ? 'rgba(1,34,85,0.4)' : 'transparnt',
|
||
}"
|
||
v-for="(item, index) in eniorArr1"
|
||
:key="index"
|
||
>
|
||
<div>
|
||
<span style="color: #fff; font-size: 13px">{{
|
||
item.name
|
||
}}</span>
|
||
<img
|
||
:src="item.path"
|
||
alt=""
|
||
style="width: 16px; height: 16px; margin-right: 20px"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<span style="color: #fff; font-size: 13px">{{
|
||
item.nametwo
|
||
}}</span>
|
||
<span
|
||
v-if="index != 4"
|
||
style="color: #fff; font-size: 13px"
|
||
>{{ item.value }}</span
|
||
>
|
||
<img
|
||
v-else
|
||
:src="item.value"
|
||
alt=""
|
||
style="width: 16px; height: 16px"
|
||
/>
|
||
</div>
|
||
<!-- <div>
|
||
<span style="color: #fff; font-size: 13px">{{
|
||
item.name
|
||
}}</span>
|
||
<img
|
||
v-if="index !=3"
|
||
:src="item.path"
|
||
alt=""
|
||
style="width: 16px; height: 16px; margin-right: 15px"
|
||
/>
|
||
<span
|
||
v-else
|
||
style="color: #fff; font-size: 13px"
|
||
v-html="item.path"></span
|
||
>
|
||
</div> -->
|
||
<!-- <div>
|
||
<span style="color: #fff; font-size: 13px">{{
|
||
item.nametwo
|
||
}}</span>
|
||
|
||
<img
|
||
v-if="index != 2"
|
||
:src="item.value"
|
||
alt=""
|
||
style="width: 16px; height: 16px"
|
||
/>
|
||
<span
|
||
v-else
|
||
style="color: #fff; font-size: 13px;"
|
||
v-html="item.value"></span
|
||
>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="maptu" v-if="menusActive == 2">
|
||
<div class="toptitle">
|
||
<div :style="{width:(this.unityChange ==0?'34%':'85%')}">一次系统图</div>
|
||
<div style="width: 35%;height: 35px" class="changeselect" v-if="this.unityChange ==0">
|
||
<el-select v-model="oneValue" placeholder="请选择" @change="selectChange(oneValue)">
|
||
<el-option
|
||
v-for="item in oneOptions"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="info">
|
||
<div class="pic1" @click="handleXian1" v-if="this.unityChange == 1"></div>
|
||
<div class="pic" @click="handleXian(oneValue)" :class="{'picActive':oneValue ==2}" v-else></div>
|
||
</div>
|
||
</div>
|
||
<div class="chuplc" v-if="menusActive == 1">
|
||
<div class="toptitle">开关信息</div>
|
||
<div class="user_skills">
|
||
<el-table
|
||
:data="tableData"
|
||
stripe
|
||
:header-cell-style="{ 'text-align': 'center' }"
|
||
:cell-style="{ 'text-align': 'center' }"
|
||
:row-class-name="tableRowClassName"
|
||
style="width: 100%;overflow-y: auto;"
|
||
height="250"
|
||
>
|
||
<el-table-column prop="number" label="出线编号" width="50">
|
||
</el-table-column>
|
||
<el-table-column prop="name" label="出线名称" width="80">
|
||
</el-table-column>
|
||
<el-table-column prop="openCloseStatus" label="分合状态" width="80">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.openCloseStatus == '1'">开</span>
|
||
<span v-else>合</span>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- <el-table-column prop="date" label="时刻" width="70"> </el-table-column> -->
|
||
<el-table-column prop="rateCapacity" label="额定容量kW" width="70">
|
||
</el-table-column>
|
||
<el-table-column prop="realTimePower" label="实时功率kW" width="70">
|
||
</el-table-column>
|
||
<el-table-column prop="voltage" label="电压V" width="70">
|
||
</el-table-column>
|
||
<el-table-column prop="electricCurrent" label="电流A" width="70">
|
||
</el-table-column>
|
||
</el-table>
|
||
<div class="tabBtn" v-if="false">查看详情</div>
|
||
</div>
|
||
</div>
|
||
<div class="yunwei" v-if="(menusActive == 4)">
|
||
<div class="toptitle">运维档案</div>
|
||
<div class="info">
|
||
<!-- <div class="changeselect">
|
||
<el-select v-model="openvalue" placeholder="请选择" @change="selectPdf(openvalue)">
|
||
<el-option
|
||
v-for="item in yunweiArr1"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</div> -->
|
||
<div class="changeselect">
|
||
<el-select v-model="openvalue1" placeholder="请选择" @change="selectPdf(openvalue1)">
|
||
<el-option
|
||
v-for="item in yunweiArr2"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
<!-- <div class="changeselect">
|
||
<el-select v-model="openvalue2" placeholder="请选择" @change="selectPdf(openvalue2)">
|
||
<el-option
|
||
v-for="item in yunweiArr3"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</div> -->
|
||
<div class="changeselect">
|
||
<el-select v-model="openvalue3" placeholder="请选择" @change="selectPdf(openvalue3)">
|
||
<el-option
|
||
v-for="item in yunweiArr4"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="changeselect">
|
||
<el-select v-model="openvalue4" placeholder="请选择" @change="selectPdf(openvalue4)">
|
||
<el-option
|
||
v-for="item in yunweiArr5"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="warnnews" v-if="(menusActive == 5)">
|
||
<div class="toptitle">告警信息</div>
|
||
<div class="info">
|
||
<div style="color:#ffffff;font-size:18px;margin-top:10px">无</div>
|
||
<vue-seamless-scroll
|
||
:data="alarmListData"
|
||
class="seamless-warp"
|
||
:class-option="classOption"
|
||
v-if="alarmListData.length > 0"
|
||
>
|
||
<ul class="attentionInfo">
|
||
<li
|
||
v-for="(item, index) in alarmListData"
|
||
:key="index"
|
||
:style="{
|
||
background:
|
||
index % 2 == 0 ? 'rgba(1,34,85,0.4)' : 'transparnt',
|
||
}"
|
||
>
|
||
<div class="infolist">
|
||
<div class="attentionInfo_title" style="color: #ed6d17">
|
||
<img src="../../../assets/gj.png" alt="" />
|
||
告警
|
||
<span
|
||
style="color: #fff; float: right; margin-right: 10%"
|
||
>{{ item.time }}</span
|
||
>
|
||
</div>
|
||
<p>
|
||
{{ item.bianwei
|
||
}}<span style="color: #fff; float: right"
|
||
>发生值：{{ item.fsz }}</span
|
||
>
|
||
</p>
|
||
<p>{{ item.dizhi }}</p>
|
||
<p>
|
||
{{ item.zhan
|
||
}}<span style="color: #fff; float: right"
|
||
>侧面门禁：{{ item.cemeng }}</span
|
||
>
|
||
</p>
|
||
</div>
|
||
<div class="jiankong">
|
||
<img
|
||
src="../../../assets/newimgs/摄像头.png"
|
||
style="width: 35px; height: 32px"
|
||
alt=""
|
||
@click="openVideo()"
|
||
/>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</vue-seamless-scroll>
|
||
</div>
|
||
</div>
|
||
<div class="record" v-if="(menusActive == 6)">
|
||
<div class="toptitle">实时事件记录</div>
|
||
<div class="info">
|
||
<div class="topList">
|
||
<div class="jilu" v-for="(item,index) in record" :key="index">
|
||
<div class="warnJilu">
|
||
<div class="attentionInfo_title" style="color: red">
|
||
<img src="@/assets/gj1.png" alt="" />
|
||
事件
|
||
</div>
|
||
<p
|
||
style="color: #ffffff; margin-top: 10px; font-size: 15px"
|
||
>
|
||
{{item.operation}} {{item.operationDate}}
|
||
</p>
|
||
<!-- <p
|
||
style="color: #ffffff; margin-top: 10px; font-size: 15px"
|
||
>
|
||
动作，跳闸
|
||
</p> -->
|
||
</div>
|
||
<!-- <div class="jiankong">
|
||
<img
|
||
src="@/assets/newimgs/摄像头.png"
|
||
style="width: 35px; height: 32px"
|
||
alt=""
|
||
@click="openVideo()"
|
||
/>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
<!-- <div class="jilu" style="background: rgba(1, 34, 85, 0.4)">
|
||
<div class="warnJilu">
|
||
<div class="attentionInfo_title" style="color: red">
|
||
<img src="@/assets/gj1.png" alt="" />
|
||
事件
|
||
</div>
|
||
<p
|
||
style="color: #ffffff; margin-top: 10px; font-size: 15px"
|
||
>
|
||
1#进线失电 11-28 16:20:15
|
||
</p>
|
||
</div>
|
||
<div class="jiankong">
|
||
<img
|
||
src="@/assets/newimgs/摄像头.png"
|
||
style="width: 35px; height: 32px"
|
||
alt=""
|
||
@click="openVideo()"
|
||
/>
|
||
</div>
|
||
</div> -->
|
||
<div class="select">
|
||
<div class="seSearch">查询</div>
|
||
<div class="changeselect">
|
||
<el-select v-model="chaValue" placeholder="请选择" @change="searchChange">
|
||
<el-option
|
||
v-for="item in optionsOpen"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
</div>
|
||
<div class="bottomList">
|
||
<div class="jilu" v-for="(item,index) in siteRecord" :key="index">
|
||
<div class="warnJilu">
|
||
<div class="attentionInfo_title" style="color: red">
|
||
<img src="@/assets/gj1.png" alt="" />
|
||
事件
|
||
</div>
|
||
<p
|
||
style="color: #ffffff; margin-top: 10px; font-size: 15px"
|
||
>
|
||
{{item.operation}} {{item.operationDate}}
|
||
</p>
|
||
<!-- <p
|
||
style="color: #ffffff; margin-top: 10px; font-size: 15px"
|
||
>
|
||
动作，跳闸
|
||
</p> -->
|
||
</div>
|
||
<!-- <div class="jiankong">
|
||
<img
|
||
src="@/assets/newimgs/摄像头.png"
|
||
style="width: 35px; height: 32px"
|
||
alt=""
|
||
@click="openVideo()"
|
||
/>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
<!-- <div class="jilu" style="background: rgba(1, 34, 85, 0.4)">
|
||
<div class="warnJilu">
|
||
<div class="attentionInfo_title" style="color: red">
|
||
<img src="@/assets/gj1.png" alt="" />
|
||
事件
|
||
</div>
|
||
<p
|
||
style="color: #ffffff; margin-top: 10px; font-size: 15px"
|
||
>
|
||
2#进线失电 11-28 16:20:15
|
||
</p>
|
||
</div>
|
||
<div class="jiankong">
|
||
<img
|
||
src="@/assets/newimgs/摄像头.png"
|
||
style="width: 35px; height: 32px"
|
||
alt=""
|
||
@click="openVideo()"
|
||
/>
|
||
</div>
|
||
</div> -->
|
||
<div class="select">
|
||
<div class="seSearch">记录输入</div>
|
||
</div>
|
||
<div
|
||
class="radio"
|
||
style="
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding: 0 10px;
|
||
box-sizing: border-box;
|
||
margin: 15px 0px;
|
||
"
|
||
>
|
||
<el-radio v-model="radio" label="1" style="margin: 0"
|
||
>{{radioVal1}}</el-radio
|
||
>
|
||
<el-radio v-model="radio" label="2" style="margin: 0"
|
||
>{{radioVal2}}</el-radio
|
||
>
|
||
<el-radio v-model="radio" label="3" style="margin: 0"
|
||
>{{radioVal3}}</el-radio
|
||
>
|
||
</div>
|
||
<div class="sumbit">
|
||
<!-- <div class="leftsub" @click="handleUpate('1')">修改</div> -->
|
||
<div class="rightsub" @click="handleUpate('2')">提交</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="notice" v-if="(menusActive == 7)">
|
||
<div class="toptitle">用电检查结果通知书</div>
|
||
<div class="info">
|
||
<div class="blurInp">
|
||
<span style="margin-right: 10px">用户：</span>
|
||
<el-input v-model="input" placeholder="侵华日军南京大屠杀纪念馆"></el-input>
|
||
</div>
|
||
<div class="blurInp">
|
||
<span style="margin-right: 10px">户号：</span>
|
||
<el-input v-model="input" placeholder="3200267442021"></el-input>
|
||
</div>
|
||
<div class="blurInp">
|
||
<span style="margin-right: 10px">地址：</span>
|
||
<el-input v-model="input" placeholder="南京市建邺区水西门大街418号"></el-input>
|
||
</div>
|
||
<p style="color: #ffffff; line-height: 23px; font-size: 14px;margin-bottom: 5px;">
|
||
经检查，发现贵单位电力使用中存在下列问题：<br />
|
||
</p>
|
||
<el-checkbox-group v-model="checkList">
|
||
<el-checkbox label="1">有资质电工配置不全</el-checkbox>
|
||
<el-checkbox label="2">未能落实值班电工24小时值班</el-checkbox>
|
||
<el-checkbox label="3">运行管理规程、制度与台账记录不全</el-checkbox>
|
||
<el-checkbox label="4" >高、低压配电柜未使用双重编号</el-checkbox>
|
||
<el-checkbox label="5" >高、低压配电柜双重编号不全</el-checkbox>
|
||
<el-checkbox label="6" >现场无模拟图版</el-checkbox>
|
||
<el-checkbox label="7" >模拟图版与现场不一致</el-checkbox>
|
||
<el-checkbox label="8" >电气设备预防性试验超周期</el-checkbox>
|
||
<el-checkbox label="9" >电气设备预防性试验项目不全</el-checkbox>
|
||
<el-checkbox label="10" >继电保护装置未按期定校</el-checkbox>
|
||
<el-checkbox label="11" >电气设备未定期清扫</el-checkbox>
|
||
<el-checkbox label="12" >无功补偿装置运行异常</el-checkbox>
|
||
<el-checkbox label="13" >防小动物措施不完善</el-checkbox>
|
||
<el-checkbox label="14" >备品备件不全</el-checkbox>
|
||
<el-checkbox label="15" >两票使用情况不规范</el-checkbox>
|
||
<el-checkbox label="16" >安全工器具配置不全</el-checkbox>
|
||
<el-checkbox label="17" >安全工器具试验超周期</el-checkbox>
|
||
<el-checkbox label="18" >电房脏乱，通道不畅通</el-checkbox>
|
||
<el-checkbox label="19" >设备应按季节做好防雷、防污闪、防潮和通风散热</el-checkbox>
|
||
<el-checkbox label="20" >加强电房身边巡视 发现缺陷及时处理</el-checkbox>
|
||
</el-checkbox-group>
|
||
|
||
<p
|
||
style="
|
||
color: #ffffff;
|
||
line-height: 23px;
|
||
font-size: 14px;
|
||
margin: 10px 0;
|
||
"
|
||
>
|
||
其他问题：
|
||
</p>
|
||
<div class="textarea">
|
||
<el-input
|
||
type="textarea"
|
||
:rows="2"
|
||
placeholder="请输入内容"
|
||
v-model="textarea"
|
||
>
|
||
</el-input>
|
||
</div>
|
||
<p
|
||
style="
|
||
color: #ffffff;
|
||
line-height: 23px;
|
||
font-size: 15px;
|
||
margin-bottom: 20px;
|
||
"
|
||
>
|
||
检查结论：<br />
|
||
对于以上存在的问题和建议，希望能引起贵单位的重视，尽快安排整改
|
||
</p>
|
||
<div class="blurInp">
|
||
<div class="leftInp">
|
||
<span style="margin-right: 5px; width: 96px"
|
||
>用电检查员：</span
|
||
>
|
||
<el-input v-model="input" placeholder=""></el-input>
|
||
</div>
|
||
<div class="rightInp">
|
||
<span style="margin-right: 10px; width: 152px"
|
||
>用户签收（盖章）：</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex; justify-content: space-between;">
|
||
<span style="margin-right: 10px; width: 132px;color: #ffffff;"
|
||
>检查单位盖章：</span
|
||
>
|
||
<p
|
||
style="color: #ffffff; line-height: 23px; font-size: 14px"
|
||
v-html="
|
||
`检查日期： 年 月 日`
|
||
"
|
||
></p>
|
||
</div>
|
||
|
||
<div class="sumbit">
|
||
<div class="leftsub">取消</div>
|
||
<div class="rightsub">提交</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</transition>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="btn"
|
||
:style="{ 'justify-content': htStatus == 1 ? 'space-between' : 'center' }"
|
||
>
|
||
<img
|
||
src="@/assets/htBtn/inside.png"
|
||
alt=""
|
||
srcset=""
|
||
v-if="htStatus == 1 && unityChange == 0"
|
||
@click="handleUnity()"
|
||
title="全景浏览"
|
||
/>
|
||
<img
|
||
src="@/assets/htBtn/unity.png"
|
||
alt=""
|
||
srcset=""
|
||
v-if="htStatus != 1 && unityChange == 0"
|
||
@click="handleHtweb()"
|
||
title="3D展示"
|
||
/>
|
||
<img
|
||
src="@/assets/htBtn/location.png"
|
||
alt=""
|
||
srcset=""
|
||
@click="personShow()"
|
||
v-if="htStatus == 1"
|
||
title="人物定位"
|
||
/>
|
||
<img
|
||
src="@/assets/htBtn/Look.png"
|
||
alt=""
|
||
srcset=""
|
||
v-if="htStatus == 1"
|
||
@click="handlefushi()"
|
||
title="平面图"
|
||
/>
|
||
<!-- <img src="@/assets/htBtn/measure.png" alt="" srcset=""> -->
|
||
</div>
|
||
<div class="center" v-show="carChangeShow">
|
||
<div class="close" @click="closeVideo">关闭</div>
|
||
<Center
|
||
:dataSource="false"
|
||
style="width: 100%; height:95%;"
|
||
>
|
||
<!-- <template slot="top">
|
||
</template> -->
|
||
</Center>
|
||
</div>
|
||
<div class="selectModel">
|
||
<div
|
||
:class="{'active':routerActive==index}"
|
||
class="selectbtn"
|
||
v-for="(item, index) in selectArr"
|
||
:key="index"
|
||
style="color: #fff"
|
||
@click="handleSelect(index)"
|
||
>
|
||
{{ item }}
|
||
</div>
|
||
</div>
|
||
<transition name="homeleave">
|
||
<!-- <div class="smallmap" v-if="homeActive" @click="hanldetoukui()">
|
||
<img src="@/assets/mapInfo/地图.png" alt="" srcset="" />
|
||
</div> -->
|
||
</transition>
|
||
<div class="homexian">
|
||
<img src="@/assets/newimgs/WechatIMG2.png" alt="" v-if="homeActive == false" @click="handleMenushow">
|
||
</div>
|
||
<!-- <div v-show="fileType" class="pdf" style="width:600px;height:800px;position: fixed;z-index: 99999;top: 0;left: 0;bottom:0;right:0;margin:auto;overflow-y:scroll">
|
||
|
||
<div style="position: fixed; top:66px;left:0;width:65.6%;height:30px;text-align:right;z-index:999999;cursor: pointer;font-size:30px" @click="handleClosepdf">x</div>
|
||
<pdf v-for="i in numPages" :key="i" :page="i" :src="file"></pdf>
|
||
</div> -->
|
||
<div
|
||
class="xianmodel1"
|
||
v-show="fileType"
|
||
style="
|
||
width: 30%;
|
||
height: 80%;
|
||
position: absolute;
|
||
background: rgb(4, 35, 69);
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
overflow-y:scroll
|
||
z-index: 99999;
|
||
"
|
||
>
|
||
<div
|
||
class="top"
|
||
style="
|
||
position: fixed;
|
||
width: 30%;
|
||
height: 3%;
|
||
font-size: 18px;
|
||
padding: 5px 10px 0 0;
|
||
color: #fff;
|
||
text-align: right;
|
||
cursor: pointer;
|
||
box-sizing: border-box;
|
||
background: rgb(4, 35, 69,0.7);
|
||
z-index: 999;
|
||
"
|
||
@click="handleClosepdf"
|
||
>
|
||
x
|
||
</div>
|
||
<pdf v-for="i in numPages" :key="i" :page="i" :src="file" style="top:30px"></pdf>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import customDvScrollBoard2 from "@/components/customDvScrollBoard2";
|
||
import * as mockData from "./mock";
|
||
import drawMixin from "@/utils/drawMixin";
|
||
import headerIndex from "@/components/layout/header.vue";
|
||
import BasicBox4 from "@/components/BasicBox4";
|
||
import BasicBox2 from "@/components/BasicBox2";
|
||
import axios from "axios";
|
||
import BasicBox from "@/components/BasicBox";
|
||
import Center from "../../center";
|
||
import vueSeamlessScroll from "vue-seamless-scroll";
|
||
import pdf from 'vue-pdf'
|
||
import {getSiteInfo,getEnvironmentInfo,getSwitchInfo,getDeviceRecord,getDeviceNum,updateDeviceRecord} from "@/api/api";
|
||
export default {
|
||
mixins: [drawMixin],
|
||
data() {
|
||
return {
|
||
record:[
|
||
{
|
||
id:'',
|
||
operation:'',
|
||
operationDate:''
|
||
}
|
||
],
|
||
siteRecord:[
|
||
{
|
||
operation:'',
|
||
operationDate:'',
|
||
id:'',
|
||
}
|
||
],
|
||
yiciSrc:'http://221.226.19.85:10123/info.html?primaryGraphId=1874E7D1D0D0AE1F',
|
||
currentPage: 0, // pdf文件页码
|
||
pageCount: 0, // pdf文件总页数
|
||
fileType:false,
|
||
file: "",
|
||
numPages: 1,
|
||
infothingsShow:true,
|
||
environmentShow:true,
|
||
routerActive:0,
|
||
checkList:[],
|
||
yunweiArr1:[
|
||
{
|
||
value: '1',
|
||
label: "设备台账查询",
|
||
},
|
||
],
|
||
yunweiArr2:[
|
||
{
|
||
value:'2',
|
||
label: "10KV变压器试验记录",
|
||
},
|
||
{
|
||
value: '6',
|
||
label: "10KV真空断路器试验记录",
|
||
},
|
||
{
|
||
value: '7',
|
||
label: "低压交流耐压试验记录1",
|
||
},
|
||
{
|
||
value: '8',
|
||
label: "电缆试验记录",
|
||
},
|
||
],
|
||
yunweiArr3:[
|
||
{
|
||
value: '3',
|
||
label: "维修记录查询",
|
||
},
|
||
|
||
],
|
||
yunweiArr4:[
|
||
{
|
||
value: '4',
|
||
label: "值班人员资质",
|
||
},
|
||
|
||
],
|
||
yunweiArr5:[
|
||
{
|
||
value: '5',
|
||
label: "巡检记录查询",
|
||
},
|
||
{
|
||
value: '51',
|
||
label: "电检查结果通知书",
|
||
},
|
||
],
|
||
homeActive:true,
|
||
input: "",
|
||
textarea: "",
|
||
openvalue:'设备台账查询',
|
||
openvalue1:'试验记录查询',
|
||
openvalue2:'维修记录查询',
|
||
openvalue3:'值班人员资质',
|
||
openvalue4:'巡检记录查询',
|
||
oneValue:1,
|
||
chaValue:'',
|
||
radio: "",
|
||
radioVal1:"1#进线失电",
|
||
radioVal2:"2#进线失电",
|
||
radioVal3:"1#、2#进线同时失电",
|
||
optionsOpen: [
|
||
{
|
||
value: 1,
|
||
label: "102",
|
||
},
|
||
],
|
||
oneOptions: [
|
||
{
|
||
value: 1,
|
||
label: "10kV 一次系统图",
|
||
},
|
||
{
|
||
value: 2,
|
||
label: "400V一次系统图",
|
||
},
|
||
],
|
||
tableData: [
|
||
],
|
||
css_list: [
|
||
"css1",
|
||
"css2",
|
||
"css3",
|
||
"css4",
|
||
"css5",
|
||
"css6",
|
||
"css7",
|
||
"css8",
|
||
],
|
||
menusActive: 0,
|
||
menubg: {
|
||
url: require("@/assets/newimgs/moren.png"),
|
||
actUrl: require("@/assets/newimgs/xuanzhong.png"),
|
||
},
|
||
menusArr: [
|
||
{
|
||
pic: require("@/assets/newimgs/配电房-默认.png"),
|
||
actPic: require("@/assets/newimgs/配电房-选中.png"),
|
||
text: "配电房信息",
|
||
},
|
||
|
||
{
|
||
pic: require("@/assets/newimgs/设备出线-默认.png"),
|
||
actPic: require("@/assets/newimgs/设备出线-选中.png"),
|
||
text: "开关信息",
|
||
},
|
||
{
|
||
pic: require("@/assets/newimgs/一次系统-默认.png"),
|
||
actPic: require("@/assets/newimgs/一次系统-选中.png"),
|
||
text: "一次系统图",
|
||
},
|
||
{
|
||
pic: require("@/assets/newimgs/环境信息-默认.png"),
|
||
actPic: require("@/assets/newimgs/环境信息-选中.png"),
|
||
text: "环境信息",
|
||
},
|
||
{
|
||
pic: require("@/assets/newimgs/运维档案-默认.png"),
|
||
actPic: require("@/assets/newimgs/运维档案-选中.png"),
|
||
text: "运维档案",
|
||
},
|
||
{
|
||
pic: require("@/assets/newimgs/告警信息-默认.png"),
|
||
actPic: require("@/assets/newimgs/告警信息-选中.png"),
|
||
text: "告警信息",
|
||
},
|
||
{
|
||
pic: require("@/assets/newimgs/事件记录-默认.png"),
|
||
actPic: require("@/assets/newimgs/事件记录-选中.png"),
|
||
text: "事件记录",
|
||
},
|
||
{
|
||
pic: require("@/assets/newimgs/检查通知单-默认.png"),
|
||
actPic: require("@/assets/newimgs/检查通知单-选中.png"),
|
||
text: "检查通知单",
|
||
},
|
||
{
|
||
pic: require("@/assets/newimgs/VR-默认.png"),
|
||
actPic: require("@/assets/newimgs/VR-选中.png"),
|
||
text: "VR全景",
|
||
},
|
||
],
|
||
popInfoShow: false,
|
||
xianShow: false,
|
||
mapShow: false,
|
||
tableShow: false,
|
||
getBg: ["list1", "list2", "list3", "list4"],
|
||
infoArr: [
|
||
{
|
||
path: require("@/assets/mapInfo/资源 33.png"),
|
||
name: "站房名称",
|
||
text: "新馆",
|
||
},
|
||
{
|
||
path: require("@/assets/mapInfo/资源 30.png"),
|
||
name: "站房地址",
|
||
text: "南京市建邺区水西门大街418号",
|
||
},
|
||
{
|
||
path: require("@/assets/mapInfo/资源 31.png"),
|
||
name: "变压器数量",
|
||
text: "2",
|
||
},
|
||
{
|
||
path: require("@/assets/mapInfo/资源 32.png"),
|
||
name: "变压器容量",
|
||
text: "3200kVA",
|
||
},
|
||
// {
|
||
// path: require("@/assets/mapInfo/资源 29.png"),
|
||
// name: "进线名称",
|
||
// text: "10kv",
|
||
// },
|
||
{
|
||
path: require("@/assets/mapInfo/资源 7.png"),
|
||
name: "电气联系人",
|
||
text: "李工",
|
||
},
|
||
{
|
||
path: require("@/assets/mapInfo/资源 26.png"),
|
||
name: "联系电话",
|
||
text: "18061776824",
|
||
},
|
||
{
|
||
path: require("@/assets/mapInfo/资源 28.png"),
|
||
name: "投运时间",
|
||
text: "2015.11.12",
|
||
},
|
||
{
|
||
path: require("@/assets/mapInfo/资源 33.png"),
|
||
name: "上次试验时间",
|
||
text: "2011.11.12",
|
||
},
|
||
],
|
||
infoArr1: [
|
||
{
|
||
path: require("@/assets/mapInfo/资源 33.png"),
|
||
name: "站房名称",
|
||
text: "旧馆",
|
||
},
|
||
{
|
||
path: require("@/assets/mapInfo/资源 30.png"),
|
||
name: "站房地址",
|
||
text: "南京市建邺区水西门大街418号",
|
||
},
|
||
{
|
||
path: require("@/assets/mapInfo/资源 31.png"),
|
||
name: "变压器数量",
|
||
text: "2",
|
||
},
|
||
{
|
||
path: require("@/assets/mapInfo/资源 32.png"),
|
||
name: "变压器容量",
|
||
text: "1600kVA",
|
||
},
|
||
// {
|
||
// path: require("@/assets/mapInfo/资源 29.png"),
|
||
// name: "进线名称",
|
||
// text: "10kv",
|
||
// },
|
||
{
|
||
path: require("@/assets/mapInfo/资源 7.png"),
|
||
name: "电气联系人",
|
||
text: "李工",
|
||
},
|
||
{
|
||
path: require("@/assets/mapInfo/资源 26.png"),
|
||
name: "联系电话",
|
||
text: "18061776824",
|
||
},
|
||
{
|
||
path: require("@/assets/mapInfo/资源 28.png"),
|
||
name: "投运时间",
|
||
text: "2007.11.12",
|
||
},
|
||
{
|
||
path: require("@/assets/mapInfo/资源 33.png"),
|
||
name: "上次试验时间",
|
||
text: "2011.11.12",
|
||
},
|
||
],
|
||
environmentArr:[
|
||
{
|
||
path: require("@/assets/mapInfo/资源 37.png"),
|
||
name: "门禁1",
|
||
}
|
||
],
|
||
eniorArr: [
|
||
{
|
||
path: require("@/assets/mapInfo/资源 37.png"),
|
||
name: "门禁1",
|
||
nametwo: "温度（℃）",
|
||
value: "26",
|
||
fieldName:'doorState',
|
||
fieldNameTwo:'temperature'
|
||
},
|
||
{
|
||
path: require("@/assets/mapInfo/资源 37.png"),
|
||
name: "门禁2",
|
||
nametwo: "湿度（%RH）",
|
||
value: "40.5",
|
||
fieldName:'doorState',
|
||
fieldNameTwo:'temperature'
|
||
},
|
||
{
|
||
path: require("@/assets/mapInfo/资源 36.png"),
|
||
name: "烟感1",
|
||
nametwo: "水浸",
|
||
value: require("@/assets/mapInfo/资源 35.png"),
|
||
fieldName:'smokeSensation',
|
||
fieldNameTwo:'waterout'
|
||
},
|
||
{
|
||
path: require("@/assets/mapInfo/资源 36.png"),
|
||
name: "烟感2",
|
||
nametwo: "",
|
||
value: "",
|
||
fieldName:'smokeSensation',
|
||
fieldNameTwo:''
|
||
},
|
||
{
|
||
path: require("@/assets/mapInfo/资源 36.png"),
|
||
name: "烟感3",
|
||
nametwo: "",
|
||
value: '',
|
||
fieldName:'smokeSensation',
|
||
fieldNameTwo:''
|
||
},
|
||
{
|
||
path: require("@/assets/mapInfo/资源 36.png"),
|
||
name: "烟感4",
|
||
nametwo: "",
|
||
value: '',
|
||
fieldName:'smokeSensation',
|
||
},
|
||
],
|
||
eniorArr1:[
|
||
// {
|
||
// path: require("@/assets/mapInfo/资源 37.png"),
|
||
// name: "前门门禁",
|
||
// nametwo: "侧门门禁",
|
||
// value:require("@/assets/mapInfo/资源 37.png"),
|
||
// },
|
||
// {
|
||
// path: require("@/assets/mapInfo/资源 36.png"),
|
||
// name: "烟感1",
|
||
// nametwo: "烟感2",
|
||
// value: require("@/assets/mapInfo/资源 36.png"),
|
||
// },
|
||
// {
|
||
// path: require("@/assets/mapInfo/资源 35.png"),
|
||
// name: "水浸",
|
||
// nametwo: "温度（℃）",
|
||
// value: '24.1',
|
||
// },
|
||
// {
|
||
// path: '24.1 ',
|
||
// name: "湿度(%RH)",
|
||
// nametwo: "",
|
||
// value: '',
|
||
// },
|
||
{
|
||
path: require("@/assets/mapInfo/资源 37.png"),
|
||
name: "门禁1",
|
||
nametwo: "高压侧温度（℃）",
|
||
value: "26",
|
||
fieldName:'doorState',
|
||
fieldNameTwo:'temperature'
|
||
},
|
||
{
|
||
path: require("@/assets/mapInfo/资源 37.png"),
|
||
name: "门禁2",
|
||
nametwo: "高压侧湿度（%RH）",
|
||
value: "40.5",
|
||
fieldName:'doorState',
|
||
fieldNameTwo:'temperature'
|
||
},
|
||
{
|
||
path: require("@/assets/mapInfo/资源 36.png"),
|
||
name: "烟感1",
|
||
nametwo: "低压侧温度（℃）",
|
||
value: "24.1",
|
||
fieldName:'doorState',
|
||
fieldNameTwo:'temperature'
|
||
},
|
||
{
|
||
path: require("@/assets/mapInfo/资源 36.png"),
|
||
name: "烟感2",
|
||
nametwo: "低压侧湿度（%RH）",
|
||
value: "44.7",
|
||
fieldName:'smokeSensation',
|
||
fieldNameTwo:'temperature'
|
||
},
|
||
{
|
||
path: require("@/assets/mapInfo/资源 36.png"),
|
||
name: "烟感3",
|
||
nametwo: "水浸",
|
||
value: require("@/assets/mapInfo/资源 35.png"),
|
||
fieldName:'smokeSensation',
|
||
fieldNameTwo:'waterout'
|
||
},
|
||
{
|
||
path: require("@/assets/mapInfo/资源 36.png"),
|
||
name: "烟感4",
|
||
nametwo: "",
|
||
value: '',
|
||
fieldName:'smokeSensation',
|
||
},
|
||
{
|
||
path: require("@/assets/mapInfo/资源 36.png"),
|
||
name: "烟感4",
|
||
nametwo: "",
|
||
value: '',
|
||
fieldName:'smokeSensation',
|
||
},
|
||
],
|
||
fuzaiArr: [
|
||
{
|
||
name: "总负荷",
|
||
vlaue: "198",
|
||
icon: "",
|
||
},
|
||
{
|
||
name: "进线电压信息",
|
||
vlaue: "5.84",
|
||
icon: "",
|
||
},
|
||
{
|
||
name: "累计电量",
|
||
vlaue: "183935",
|
||
icon: "",
|
||
},
|
||
{
|
||
name: "功率因数",
|
||
vlaue: "0.98",
|
||
icon: "",
|
||
},
|
||
],
|
||
fuzaiArr1: [
|
||
{
|
||
name: "总负荷",
|
||
vlaue: "198",
|
||
icon: "",
|
||
},
|
||
{
|
||
name: "进线电压信息",
|
||
vlaue: "5.84",
|
||
icon: "",
|
||
},
|
||
{
|
||
name: "累计电量",
|
||
vlaue: "183935",
|
||
icon: "",
|
||
},
|
||
{
|
||
name: "功率因数",
|
||
vlaue: "0.98",
|
||
icon: "",
|
||
},
|
||
],
|
||
threeUrl: "",
|
||
htStatus: 1,
|
||
perSon: "1",
|
||
selectArr: ["新馆", "旧馆"],
|
||
alarmListData: [
|
||
// {
|
||
// time: "2022-11-04 08:16:46",
|
||
// bianwei: "侧门门禁2报警变位",
|
||
// dizhi: "南京软件园科技发展有限公司（腾飞大厦中心站）",
|
||
// zhan: "腾飞大厦中心站",
|
||
// fsz: "1",
|
||
// cemeng: "2",
|
||
// },
|
||
// {
|
||
// time: "2022-11-04 08:16:46",
|
||
// bianwei: "侧门门禁2报警变位",
|
||
// dizhi: "南京软件园科技发展有限公司（腾飞大厦中心站）",
|
||
// zhan: "腾飞大厦中心站",
|
||
// fsz: "1",
|
||
// cemeng: "2",
|
||
// },
|
||
// {
|
||
// time: "2022-11-04 08:16:46",
|
||
// bianwei: "侧门门禁2报警变位",
|
||
// dizhi: "南京软件园科技发展有限公司（腾飞大厦中心站）",
|
||
// zhan: "腾飞大厦中心站",
|
||
// fsz: "1",
|
||
// cemeng: "2",
|
||
// },
|
||
// {
|
||
// time: "2022-11-04 08:16:46",
|
||
// bianwei: "侧门门禁2报警变位",
|
||
// dizhi: "南京软件园科技发展有限公司（腾飞大厦中心站）",
|
||
// zhan: "腾飞大厦中心站",
|
||
// fsz: "1",
|
||
// cemeng: "2",
|
||
// },
|
||
// {
|
||
// time: "2022-11-04 08:16:46",
|
||
// bianwei: "侧门门禁2报警变位",
|
||
// dizhi: "南京软件园科技发展有限公司（腾飞大厦中心站）",
|
||
// zhan: "腾飞大厦中心站",
|
||
// fsz: "1",
|
||
// cemeng: "2",
|
||
// },
|
||
],
|
||
classOption: {
|
||
step: 0.5, // 数值越大速度滚动越快
|
||
// limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length
|
||
// hoverStop: true, // 是否开启鼠标悬停stop
|
||
// direction: 1, // 0向下 1向上 2向左 3向右
|
||
// openWatch: true, // 开启数据实时监控刷新dom
|
||
// singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
||
// singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
|
||
},
|
||
// unityUrl:"https://my.matterportvr.cn/show/?m=hEnMfFnid82&sr=-3.04&ss=32",
|
||
unityUrl: "",
|
||
toukuiShow: false,
|
||
unityChange: 0,
|
||
titleData: "",
|
||
valueData: "38",
|
||
backgroundPic: {
|
||
index: "landRes2/bg",
|
||
},
|
||
options: [],
|
||
carChangeShow: false,
|
||
locanionIp:'',
|
||
//不动产数据
|
||
workList: [],
|
||
workListData: [],
|
||
workListDatafcz: [],
|
||
//土地数据
|
||
workListNew: [],
|
||
workListFCZ: [],
|
||
fczShow: false,
|
||
config4: {
|
||
header: ["部门", "楼层", "房号", "名称"],
|
||
rowNum: 12,
|
||
data:
|
||
// [['2019', '2', '16.67%'],
|
||
// ['2021', '2', '16.67%'],
|
||
// ['2022', '5', '66.67%'],['无', '无', '无'],]
|
||
[],
|
||
columnWidth: [60],
|
||
},
|
||
type: "",
|
||
|
||
tit: "不动产产权证信息",
|
||
loading: false,
|
||
|
||
...mockData.default,
|
||
};
|
||
},
|
||
components: {
|
||
HeaderIndex: headerIndex,
|
||
BasicBox4,
|
||
BasicBox2,
|
||
BasicBox,
|
||
customDvScrollBoard2,
|
||
Center,
|
||
vueSeamlessScroll,
|
||
pdf
|
||
},
|
||
watch: {
|
||
unityChange: {
|
||
handler(newV) {
|
||
if (newV == 0) {
|
||
this.unityUrl = "/htWeb/unity.html?src=1";
|
||
this.threeUrl="http://221.226.19.85:10133/bdz_360_22_12_8/index.html"
|
||
this.searchHandle('2')
|
||
this.reachtableData('2')
|
||
} else {
|
||
this.unityUrl = "/htWeb/unity.html?src=2";
|
||
this.threeUrl="http://221.226.19.85:10133/bdz_360_22_11_11/index.html"
|
||
this.searchHandle('1')
|
||
this.reachtableData('1')
|
||
}
|
||
|
||
},
|
||
immediate: true,
|
||
},
|
||
},
|
||
mounted() {
|
||
this.init()
|
||
// //查询实时记录
|
||
window.setInterval(()=>{
|
||
getEnvironmentInfo({ siteId: "2"}).then((res)=>{
|
||
// this.eniorArr
|
||
for (const key in res.data.data) {
|
||
if (key == 'doorState') {
|
||
for (let i = 0; i < res.data.data.doorState.length; i++) {
|
||
this.eniorArr[i].name = res.data.data.doorState[i].doorName
|
||
if (res.data.data.doorState[i].isOpen == 0) {
|
||
this.eniorArr[i].path = require("@/assets/mapInfo/资源 38.png")
|
||
}else{
|
||
this.eniorArr[i].path = require("@/assets/mapInfo/资源 37.png")
|
||
}
|
||
}
|
||
|
||
}
|
||
if (key == 'smokeSensation') {
|
||
for (let i = 0; i < res.data.data.smokeSensation.length; i++) {
|
||
this.eniorArr[i + res.data.data.doorState.length].name = res.data.data.smokeSensation[i].doorName
|
||
if (res.data.data.smokeSensation[i].isOpen == 0) {
|
||
this.eniorArr[i+res.data.data.doorState.length].path = require("@/assets/mapInfo/资源 36.png")
|
||
}else{
|
||
this.eniorArr[i+res.data.data.doorState.length].path = require("@/assets/mapInfo/资源 40.png")
|
||
}
|
||
}
|
||
}
|
||
if (key == 'waterout') {
|
||
if (res.data.data.waterout == 0) {
|
||
this.eniorArr[2].value = require("@/assets/mapInfo/资源 35.png")
|
||
}else{
|
||
this.eniorArr[2].value = require("@/assets/mapInfo/资源 39.png")
|
||
}
|
||
}
|
||
if (key == 'temperature') {
|
||
for (let i = 0; i < res.data.data.temperature.length; i++) {
|
||
if (res.data.data.temperature[i].type == 3) {
|
||
this.eniorArr[0].value = res.data.data.temperature[i].value.substring(0,res.data.data.temperature[i].value.indexOf(".")+2)
|
||
}
|
||
// if (res.data.data.temperature[i].type == 2) {
|
||
// this.eniorArr[2].value = res.data.data.temperature[i].value
|
||
// }
|
||
// if (res.data.data.temperature[i].type == 3) {
|
||
// this.eniorArr1[2].value = res.data.data.temperature[i].value
|
||
// }
|
||
}
|
||
}
|
||
if (key == 'humidity') {
|
||
for (let i = 0; i < res.data.data.humidity.length; i++) {
|
||
if (res.data.data.humidity[i].type == 3) {
|
||
this.eniorArr[1].value = res.data.data.humidity[i].value.substring(0,res.data.data.humidity[i].value.indexOf(".")+2)
|
||
}
|
||
// if (res.data.data.humidity[i].type == 2) {
|
||
// this.eniorArr[3].value = res.data.data.humidity[i].value
|
||
// }
|
||
}
|
||
}
|
||
}
|
||
})
|
||
getEnvironmentInfo({ siteId: "1"}).then((res)=>{
|
||
// this.eniorArr
|
||
for (const key in res.data.data) {
|
||
if (key == 'doorState') {
|
||
for (let i = 0; i < res.data.data.doorState.length; i++) {
|
||
this.eniorArr1[i].name = res.data.data.doorState[i].doorName
|
||
if (res.data.data.doorState[i].isOpen == 0) {
|
||
this.eniorArr1[i].path = require("@/assets/mapInfo/资源 38.png")
|
||
}else{
|
||
this.eniorArr1[i].path = require("@/assets/mapInfo/资源 37.png")
|
||
}
|
||
}
|
||
|
||
}
|
||
if (key == 'smokeSensation') {
|
||
for (let i = 0; i < res.data.data.smokeSensation.length; i++) {
|
||
this.eniorArr1[i + res.data.data.doorState.length].name = res.data.data.smokeSensation[i].doorName
|
||
if (res.data.data.smokeSensation[i].isOpen == 0) {
|
||
this.eniorArr1[i+res.data.data.doorState.length].path = require("@/assets/mapInfo/资源 36.png")
|
||
}else{
|
||
this.eniorArr1[i+res.data.data.doorState.length].path = require("@/assets/mapInfo/资源 40.png")
|
||
}
|
||
}
|
||
}
|
||
if (key == 'waterout') {
|
||
if (res.data.data.waterout == 0) {
|
||
this.eniorArr1[4].value = require("@/assets/mapInfo/资源 35.png")
|
||
}else{
|
||
this.eniorArr1[4].value = require("@/assets/mapInfo/资源 39.png")
|
||
}
|
||
}
|
||
if (key == 'temperature') {
|
||
for (let i = 0; i < res.data.data.temperature.length; i++) {
|
||
if (res.data.data.temperature[i].type == 1) {
|
||
this.eniorArr1[0].value = res.data.data.temperature[i].value.substring(0,res.data.data.temperature[i].value.indexOf(".")+2)
|
||
}
|
||
if (res.data.data.temperature[i].type == 2) {
|
||
this.eniorArr1[2].value = res.data.data.temperature[i].value.substring(0,res.data.data.temperature[i].value.indexOf(".")+2)
|
||
}
|
||
// if (res.data.data.temperature[i].type == 3) {
|
||
// this.eniorArr1[2].value = res.data.data.temperature[i].value
|
||
// }
|
||
}
|
||
}
|
||
if (key == 'humidity') {
|
||
for (let i = 0; i < res.data.data.humidity.length; i++) {
|
||
if (res.data.data.humidity[i].type == 1) {
|
||
this.eniorArr1[1].value = res.data.data.humidity[i].value.substring(0,res.data.data.humidity[i].value.indexOf(".")+2)
|
||
}
|
||
if (res.data.data.humidity[i].type == 2) {
|
||
this.eniorArr1[3].value = res.data.data.humidity[i].value.substring(0,res.data.data.humidity[i].value.indexOf(".")+2)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
})
|
||
},3000)
|
||
|
||
|
||
// 环境信息
|
||
window.setInterval(()=>{
|
||
getSiteInfo({siteId:'2'}).then((res)=>{
|
||
this.infoArr[0].text = res.data.data.siteName
|
||
this.infoArr[1].text = res.data.data.siteAdress
|
||
this.infoArr[2].text = res.data.data.totalTransformationSite
|
||
this.infoArr[3].text = res.data.data.transformationCapacity+'kVA'
|
||
// this.infoArr[4].text = res.data.data.contacts
|
||
this.infoArr[5].text = res.data.data.phone
|
||
this.infoArr[6].text = res.data.data.useTime
|
||
this.infoArr[7].text = res.data.data.lastUseTime
|
||
let cos = res.data.data.cos/2
|
||
let cosString = cos.toString()
|
||
if (cosString.indexOf(".") != -1) {
|
||
this.fuzaiArr[3].vlaue = cosString.substring(0,cosString.indexOf(".")+3)
|
||
}else{
|
||
this.fuzaiArr[3].vlaue = res.data.data.cos/2
|
||
}
|
||
let totalPower = res.data.data.totalPower
|
||
let totalPowerString = totalPower.toString()
|
||
if (totalPowerString.indexOf(".") != -1) {
|
||
this.fuzaiArr[2].vlaue = totalPowerString.substring(0,totalPowerString.indexOf(".")+3)
|
||
}else{
|
||
this.fuzaiArr[2].vlaue = res.data.data.totalPower
|
||
}
|
||
let voltage = res.data.data.voltage
|
||
let voltageString = voltage.toString()
|
||
if (voltageString.indexOf(".") != -1) {
|
||
this.fuzaiArr[1].vlaue = voltageString.substring(0,voltageString.indexOf(".")+3)
|
||
}else{
|
||
this.fuzaiArr[1].vlaue = res.data.data.voltage
|
||
}
|
||
let totalLoad = res.data.data.totalLoad
|
||
let totalLoadString = totalLoad.toString()
|
||
if (totalLoadString.indexOf(".") != -1) {
|
||
this.fuzaiArr[0].vlaue = totalLoadString.substring(0,totalLoadString.indexOf(".")+3)
|
||
}else{
|
||
this.fuzaiArr[0].vlaue = res.data.data.totalLoad
|
||
}
|
||
})
|
||
getSiteInfo({siteId:'1'}).then((res)=>{
|
||
this.infoArr1[0].text = res.data.data.siteName
|
||
this.infoArr1[1].text = res.data.data.siteAdress
|
||
this.infoArr1[2].text = res.data.data.totalTransformationSite
|
||
this.infoArr1[3].text = res.data.data.transformationCapacity+'kVA'
|
||
// this.infoArr1[4].text = res.data.data.contacts
|
||
this.infoArr1[5].text = res.data.data.phone
|
||
this.infoArr1[6].text = res.data.data.useTime
|
||
this.infoArr1[7].text = res.data.data.lastUseTime
|
||
let cos = res.data.data.cos/2
|
||
let cosString = cos.toString()
|
||
if (cosString.indexOf(".") != -1) {
|
||
this.fuzaiArr1[3].vlaue = cosString.substring(0,cosString.indexOf(".")+3)
|
||
}else{
|
||
this.fuzaiArr1[3].vlaue = res.data.data.cos/2
|
||
}
|
||
let totalPower = res.data.data.totalPower
|
||
let totalPowerString = totalPower.toString()
|
||
if (totalPowerString.indexOf(".") != -1) {
|
||
this.fuzaiArr1[2].vlaue = totalPowerString.substring(0,totalPowerString.indexOf(".")+3)
|
||
}else{
|
||
this.fuzaiArr1[2].vlaue = res.data.data.totalPower
|
||
}
|
||
let voltage = res.data.data.voltage
|
||
let voltageString = voltage.toString()
|
||
if (voltageString.indexOf(".") != -1) {
|
||
this.fuzaiArr1[1].vlaue = voltageString.substring(0,voltageString.indexOf(".")+3)
|
||
}else{
|
||
this.fuzaiArr1[1].vlaue = res.data.data.voltage
|
||
}
|
||
let totalLoad = res.data.data.totalLoad
|
||
let totalLoadString = totalLoad.toString()
|
||
if (totalLoadString.indexOf(".") != -1) {
|
||
this.fuzaiArr1[0].vlaue = totalLoadString.substring(0,totalLoadString.indexOf(".")+3)
|
||
}else{
|
||
this.fuzaiArr1[0].vlaue = res.data.data.totalLoad
|
||
}
|
||
});
|
||
},3000)
|
||
|
||
|
||
// window.setInterval(()=>{
|
||
// // getSwitchInfo({siteId:'1'}).then((res)=>{
|
||
// // this.tableData = res.data.data.items
|
||
// // })
|
||
// this.reachtableData()
|
||
// },5000)
|
||
|
||
window.openVideo = this.openVideo;
|
||
this.timeFn();
|
||
this.cancelLoading();
|
||
this.titleData = this.$route.params.id.slice(0, 4);
|
||
console.log("jdMain", this.$route.params);
|
||
this.type = this.$route.params.type;
|
||
this.getJdData(this.type);
|
||
// this.getJdData()
|
||
window.OnSceneLoaded = function (scene) {
|
||
console.log("scene", scene);
|
||
window.FloorUI("true");
|
||
};
|
||
this.file.promise.then((pdf) => {
|
||
this.numPages = pdf.numPages
|
||
})
|
||
|
||
|
||
},
|
||
beforeDestroy(){
|
||
// clearInterval(this.timing);
|
||
},
|
||
methods: {
|
||
reachtableData(val){
|
||
this.tableData = []
|
||
if (this.unityChange == 0) {
|
||
val == ''
|
||
window.setInterval(()=>{
|
||
this.getTableData()
|
||
},3000)
|
||
}else {
|
||
window.setInterval(()=>{
|
||
this.getTableData()
|
||
},3000)
|
||
}
|
||
|
||
},
|
||
getTableData(){
|
||
if (this.unityChange == 0) {
|
||
getSwitchInfo({siteId:'2'}).then((res)=>{
|
||
this.tableData = res.data.data.items
|
||
for (let i = 0; i < this.tableData.length; i++) {
|
||
this.tableData[i].electricCurrent = this.tableData[i].electricCurrent.substring(0,this.tableData[i].electricCurrent.indexOf(".")+2)
|
||
this.tableData[i].voltage = this.tableData[i].voltage.substring(0,this.tableData[i].voltage.indexOf(".")+2)
|
||
this.tableData[i].realTimePower = this.tableData[i].realTimePower.substring(0,this.tableData[i].realTimePower.indexOf(".")+2)
|
||
}
|
||
|
||
})
|
||
}else{
|
||
getSwitchInfo({siteId:'1'}).then((res)=>{
|
||
this.tableData = res.data.data.items
|
||
for (let i = 0; i < this.tableData.length; i++) {
|
||
this.tableData[i].electricCurrent = this.tableData[i].electricCurrent.substring(0,this.tableData[i].electricCurrent.indexOf(".")+2)
|
||
this.tableData[i].voltage = this.tableData[i].voltage.substring(0,this.tableData[i].voltage.indexOf(".")+2)
|
||
this.tableData[i].realTimePower = this.tableData[i].realTimePower.substring(0,this.tableData[i].realTimePower.indexOf(".")+2)
|
||
}
|
||
})
|
||
}
|
||
|
||
},
|
||
searchHandle(val){
|
||
getDeviceRecord({
|
||
siteId:val,
|
||
deviceNum:''
|
||
}).then((res)=>{
|
||
for (let i = 0; i < res.data.data.length; i++) {
|
||
let date = this.$moment(res.data.data[i].operationDate).format("YYYY-MM-DD HH:mm:ss")
|
||
let dataNew = this.$moment(res.data.data[i].operationDate).format("YYYY-MM-DD")
|
||
let newDate = new Date()
|
||
let newDate1 = this.$moment(newDate).format("YYYY-MM-DD")
|
||
if (dataNew == newDate1 ) {
|
||
this.record = res.data.data
|
||
this.record[i].operationDate = date
|
||
}
|
||
|
||
}
|
||
})
|
||
//实时记录下拉框
|
||
getDeviceNum({
|
||
siteId: val
|
||
}).then((res)=>{
|
||
// console.log(res.data.data,'实时记录');
|
||
// this.optionsOpen = Object.keys(res.data.data).map((item,index)=>{
|
||
// console.log();
|
||
// // return {value:res.data.data[index].line_code,label:res.data.data[index].line_name}
|
||
// })
|
||
|
||
var obj ={}
|
||
for (let i = 0; i < res.data.data.length; i++) {
|
||
obj[i] = res.data.data[i]
|
||
}
|
||
obj.length = res.data.data.length
|
||
this.optionsOpen = Object.keys(res.data.data).map((item,index)=>{
|
||
return {value:(item++),label:res.data.data[index]}
|
||
})
|
||
this.chaValue = this.optionsOpen[0].label
|
||
this.searchChange(0)
|
||
})
|
||
},
|
||
handleUpate(val){
|
||
console.log('optionsOpen',this.optionsOpen[this.chaValue].label,this.radio,this.siteRecord[this.chaValue].id);
|
||
|
||
let params ={
|
||
deviceNum: this.optionsOpen[this.chaValue].label,
|
||
operation:'',
|
||
siteId:this.unityChange=='1'?'1':'2'
|
||
}
|
||
|
||
let paramsChange = {
|
||
deviceNum:this.optionsOpen[this.chaValue].label,
|
||
operation:'',
|
||
siteId:this.unityChange=='1'?'1':'2',
|
||
id:this.siteRecord[this.chaValue].id
|
||
}
|
||
if (this.radio == 1) {
|
||
params.operation = this.radioVal1
|
||
paramsChange.operation = this.radioVal1
|
||
}else if(this.radio == 2){
|
||
params.operation = this.radioVal2
|
||
paramsChange.operation = this.radioVal2
|
||
}else if(this.radio == 3){
|
||
params.operation = this.radioVal3
|
||
paramsChange.operation = this.radioVal3
|
||
}
|
||
if(val == '1'){
|
||
updateDeviceRecord(paramsChange).then(res=>{
|
||
this.searchChange(this.chaValue)
|
||
})
|
||
}else{
|
||
updateDeviceRecord(params).then(res=>{
|
||
this.searchChange(this.chaValue)
|
||
})
|
||
}
|
||
},
|
||
init(){
|
||
if(typeof window != 'undefined'){
|
||
var RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
|
||
if (RTCPeerConnection) (()=>{
|
||
var rtc = new RTCPeerConnection()
|
||
rtc.createDataChannel(''); //创建一个可以发送任意数据的数据通道
|
||
rtc.createOffer( offerDesc => { //创建并存储一个sdp数据
|
||
rtc.setLocalDescription(offerDesc)
|
||
}, e => { console.log(e)})
|
||
rtc.onicecandidate =(evt) => { //监听candidate事件
|
||
if (evt.candidate) {
|
||
console.log('evt:',evt.candidate.candidate)
|
||
let ip_rule = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/
|
||
var ip_addr = ip_rule.exec(evt.candidate.candidate)[1]
|
||
let pattern = /[a-zA-Z]/
|
||
if(!pattern.test(ip_addr)){
|
||
this.locanionIp = ip_addr
|
||
}
|
||
|
||
console.log('ip_addr:',ip_addr) //打印获取的IP地址
|
||
}}
|
||
})()
|
||
else{console.log("没有找到")}
|
||
}
|
||
},
|
||
//查询事件s
|
||
searchChange(val){
|
||
this.siteRecord = []
|
||
// let label = this.optionsOpen[event].label
|
||
console.log(this.optionsOpen[val].label,'chaxun');
|
||
// this.chaValue = this.optionsOpen[val].label
|
||
getDeviceRecord({
|
||
siteId:this.unityChange =='1'?'1':'2',
|
||
deviceNum: this.optionsOpen[val].label
|
||
}).then((res)=>{
|
||
// console.log(res.data.data,'实时记录');
|
||
// this.siteRecord = res.data.data
|
||
for (let i = 0; i < res.data.data.length; i++) {
|
||
let date = this.$moment(res.data.data[i].operationDate).format("YYYY-MM-DD HH:mm:ss")
|
||
this.siteRecord = res.data.data
|
||
this.siteRecord[i].operationDate = date
|
||
}
|
||
})
|
||
},
|
||
handleClosepdf(){
|
||
this.fileType = false
|
||
this.openvalue='设备台账查询';
|
||
this.openvalue1='试验记录查询';
|
||
this.openvalue2='维修记录查询';
|
||
this.openvalue3='值班人员资质';
|
||
this.openvalue4='巡检记录查询';
|
||
this.file = ''
|
||
},
|
||
//弹出pdf
|
||
selectPdf(val){
|
||
console.log(val,'mmmmmm');
|
||
this.numPages = 1
|
||
if (val == 1) {
|
||
// let fileUrl = "";
|
||
// // this.fileType = true
|
||
// this.numPages = 4
|
||
// this.file = pdf.createLoadingTask(fileUrl)
|
||
}
|
||
else if (val == 2) {
|
||
let fileUrl = "/pdf/bianyaqishiyan.pdf";
|
||
this.fileType = true
|
||
this.numPages = 2
|
||
this.file = pdf.createLoadingTask(fileUrl)
|
||
}
|
||
// else if(val == 3){
|
||
// let fileUrl = "/pdf/jiangdongpeidianOne.pdf";
|
||
// this.fileType = true
|
||
// this.numPages = 4
|
||
// this.file = pdf.createLoadingTask(fileUrl)
|
||
// }
|
||
else if(val == 4){
|
||
let fileUrl = "/pdf/zhibanrenyuan.pdf";
|
||
this.fileType = true
|
||
this.numPages = 1
|
||
this.file = pdf.createLoadingTask(fileUrl)
|
||
}else if(val == 5){
|
||
let fileUrl = "/pdf/jiangdongpeidianTwo.pdf";
|
||
this.fileType = true
|
||
this.numPages = 13
|
||
this.file = pdf.createLoadingTask(fileUrl)
|
||
}else if(val == 6){
|
||
let fileUrl = "/pdf/zhankongDuanlu.pdf";
|
||
this.fileType = true
|
||
this.numPages = 7
|
||
this.file = pdf.createLoadingTask(fileUrl)
|
||
}else if(val == 7){
|
||
let fileUrl = "/pdf/diyashiyan.pdf";
|
||
this.fileType = true
|
||
this.numPages = 1
|
||
this.file = pdf.createLoadingTask(fileUrl)
|
||
}else if(val == 8){
|
||
let fileUrl = "/pdf/dianlanshiyan.pdf";
|
||
this.fileType = true
|
||
this.numPages = 2
|
||
this.file = pdf.createLoadingTask(fileUrl)
|
||
}else if(val ==51){
|
||
let fileUrl = this.unityChange =='1'?'/pdf/jiuguanyongdian.pdf':'/pdf/xinguanyongdian.pdf';
|
||
this.fileType = true
|
||
this.numPages = 1
|
||
this.file = pdf.createLoadingTask(fileUrl)
|
||
}
|
||
|
||
},
|
||
//一次选择
|
||
selectChange(val){
|
||
console.log(val,'val');
|
||
},
|
||
handleMenushow(){
|
||
this.homeActive = true
|
||
},
|
||
handleMenufalse(){
|
||
this.homeActive = false
|
||
},
|
||
tableRowClassName({ row, rowIndex }) {
|
||
if (rowIndex % 2 != 0) {
|
||
return "success-row"; //这是类名
|
||
} else {
|
||
return "";
|
||
}
|
||
},
|
||
handleMenus(index) {
|
||
this.menusActive = index;
|
||
if (index == 8) {
|
||
this.handleUnity();
|
||
}
|
||
},
|
||
//弹窗
|
||
popShow() {
|
||
this.popInfoShow = true;
|
||
},
|
||
handleXian(val) {
|
||
if (val == 1) {
|
||
this.xianShow = true;
|
||
this.yiciSrc = 'http://221.226.19.85:10123/info.html?primaryGraphId=1874E7D1D0D0AE1F'
|
||
}else if(val == 2){
|
||
this.xianShow = true
|
||
this.yiciSrc = 'http://221.226.19.85:10123/info.html?primaryGraphId=12640A6DD8E2DAEE'
|
||
}
|
||
},
|
||
handleXian1() {
|
||
this.xianShow = true
|
||
this.yiciSrc = 'http://221.226.19.85:10123/info.html?primaryGraphId=2CD496643A1EB7D5'
|
||
},
|
||
handleXianfalse() {
|
||
this.xianShow = false;
|
||
},
|
||
handledianwei() {
|
||
this.mapShow = false;
|
||
window.parent.handledianwei();
|
||
},
|
||
handleTableClose() {
|
||
this.tableShow = false;
|
||
},
|
||
handleTable() {
|
||
this.tableShow = true;
|
||
},
|
||
hanldetoukui() {
|
||
this.mapShow = true;
|
||
},
|
||
hanldetoukuifalse() {
|
||
this.toukuiShow = false;
|
||
},
|
||
handletanchuan() {
|
||
this.mapShow = false;
|
||
},
|
||
handlePop() {
|
||
this.popInfoShow = false;
|
||
},
|
||
// 俯视
|
||
handlefushi() {
|
||
this.$refs.iframe.contentWindow.unity.g3d.setEye([0, 700, 0]); // 镜头位置
|
||
},
|
||
handleHtweb() {
|
||
this.htStatus = 1;
|
||
if (this.unityUrl.indexOf("htWeb") != -1) {
|
||
this.$refs.iframe.contentWindow.unity.g3d.setEye([0, 500, 500]);
|
||
} else {
|
||
if (this.unityChange == 0) {
|
||
this.unityUrl = "/htWeb/unity.html?src=1";
|
||
} else this.unityUrl = "/htWeb/unity.html?src=2";
|
||
}
|
||
},
|
||
handleUnity() {
|
||
this.$refs.iframe.contentWindow.unity.g3d.flyTo(
|
||
this.$refs.iframe.contentWindow.unity.models[0],
|
||
{
|
||
animation: true,
|
||
ratio: 0.9, // [0, 1]，越大相机越近,
|
||
direction: [0, 135, 0],
|
||
}
|
||
);
|
||
setTimeout(() => {
|
||
this.htStatus = 2;
|
||
// this.unityJiazai()
|
||
}, 1000 * 1.5);
|
||
},
|
||
personShow() {
|
||
if (this.perSon == "1") {
|
||
this.$refs.iframe.contentWindow.unity.models[0].setVisible(true);
|
||
this.$refs.iframe.contentWindow.unity.models[1].setVisible(true);
|
||
this.$refs.iframe.contentWindow.unity.models[2].setVisible(true);
|
||
this.$refs.iframe.contentWindow.unity.models[3].setVisible(true);
|
||
this.perSon = "2";
|
||
} else if (this.perSon == "2") {
|
||
this.$refs.iframe.contentWindow.unity.models[0].setVisible(false);
|
||
this.$refs.iframe.contentWindow.unity.models[1].setVisible(false);
|
||
this.$refs.iframe.contentWindow.unity.models[2].setVisible(false);
|
||
this.$refs.iframe.contentWindow.unity.models[3].setVisible(false);
|
||
this.perSon = "1";
|
||
}
|
||
},
|
||
unityJiazai(){
|
||
if(this.unityChange==0){
|
||
this.threeUrl="https://web-1300932214.cos.ap-nanjing.myqcloud.com/360/bdz_360_22_12_8/index.html"
|
||
}else(
|
||
this.threeUrl="https://web-1300932214.cos.ap-nanjing.myqcloud.com/360/bdz_360_22_11_11/index.html"
|
||
)
|
||
},
|
||
handleSelect(index) {
|
||
this.routerActive = index
|
||
this.unityChange = index;
|
||
if (index == 1) {
|
||
this.environmentShow = false
|
||
this.infothingsShow = false
|
||
}else{
|
||
this.environmentShow = true
|
||
this.infothingsShow = true
|
||
}
|
||
},
|
||
timeFn() {
|
||
// this.timing = setInterval(() => {
|
||
// this.dateDay = formatTime(new Date(), "HH: mm: ss");
|
||
// this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
|
||
// this.dateWeek = this.weekday[new Date().getDay()];
|
||
// }, 1000);
|
||
},
|
||
openVideo() {
|
||
if (this.unityChange == 0) {
|
||
console.log("aaa");
|
||
this.$refs.iframe.contentWindow.unity.g3d.flyTo(
|
||
this.$refs.iframe.contentWindow.unity.models[0],
|
||
{
|
||
animation: true,
|
||
ratio: 0.9, // [0, 1]，越大相机越近,
|
||
direction: [0, 135, 0],
|
||
}
|
||
);
|
||
setTimeout(() => {
|
||
// this.carChangeShow = true;
|
||
console.log(this.locanionIp,'12122');
|
||
var url = 'http://'+this.locanionIp+':5500/demo/demo_window_simple_previewNew.html'
|
||
console.log(url,'url');
|
||
window.open(url,
|
||
'baidu',
|
||
'top=200,left=450,width=1000,height=600');
|
||
console.log("bbb");
|
||
}, 1000 * 1.5);
|
||
}else{
|
||
console.log("aaa");
|
||
this.$refs.iframe.contentWindow.unity.g3d.flyTo(
|
||
this.$refs.iframe.contentWindow.unity.models[0],
|
||
{
|
||
animation: true,
|
||
ratio: 0.9, // [0, 1]，越大相机越近,
|
||
direction: [0, 135, 0],
|
||
}
|
||
);
|
||
setTimeout(() => {
|
||
// this.carChangeShow = true;
|
||
console.log(window.location.hostname,'12122');
|
||
var url = 'http://'+this.locanionIp+':5500/demo/demo_window_simple_preview.html'
|
||
console.log(url,'url');
|
||
window.open(url,
|
||
'baidu',
|
||
'top=200,left=450,width=1000,height=600');
|
||
console.log("bbb");
|
||
}, 1000 * 1.5);
|
||
}
|
||
|
||
},
|
||
closeVideo() {
|
||
this.$refs.iframe.contentWindow.unity.g3d.setEye([0, 500, 500]);
|
||
this.carChangeShow = false;
|
||
},
|
||
//获取基地数据
|
||
getJdData(val) {
|
||
if (val == "不动产") {
|
||
console.log("val", val);
|
||
this.workListData = [];
|
||
axios
|
||
.get("/json/jdData.json")
|
||
.then((result) => {
|
||
console.log("getMenuData111", result.data);
|
||
for (var i = 0; i < result.data.length; i++) {
|
||
if (result.data[i].jd == this.$route.params.id) {
|
||
console.log("result.data[i]", result.data[i]);
|
||
this.workListData.push(result.data[i]);
|
||
this.changeWorkList(result.data[i]);
|
||
}
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
console.log(error);
|
||
});
|
||
} else if (val == "土地证") {
|
||
this.tit = "土地证信息";
|
||
this.workListData = [];
|
||
this.fczShow = true;
|
||
axios
|
||
.get("/json/tdData.json")
|
||
.then((result) => {
|
||
console.log("getMenuData111", result.data);
|
||
for (var i = 0; i < result.data.length; i++) {
|
||
if (result.data[i].jd == this.$route.params.id) {
|
||
console.log("result.data[i]", result.data[i]);
|
||
this.workListData.push(result.data[i]);
|
||
this.changeWorkListTd(result.data[i]);
|
||
}
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
console.log(error);
|
||
});
|
||
this.workListDatafcz = [];
|
||
axios
|
||
.get("/json/fczData.json")
|
||
.then((result) => {
|
||
console.log("getMenuData111", result.data);
|
||
for (var i = 0; i < result.data.length; i++) {
|
||
if (result.data[i].jd == this.$route.params.id) {
|
||
console.log("result.data[i]", result.data[i]);
|
||
this.workListDatafcz.push(result.data[i]);
|
||
this.changeWorkListfcz(result.data[i]);
|
||
}
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
console.log(error);
|
||
});
|
||
}
|
||
},
|
||
//不动产
|
||
changeWorkList(data) {
|
||
var entries = Object.entries(data);
|
||
var list = entries.map(function (item) {
|
||
return {
|
||
value: item[1],
|
||
name: item[0],
|
||
};
|
||
});
|
||
for (var i = 0; i < list.length; i++) {
|
||
for (var t = 0; t < this.workList.length; t++) {
|
||
if (list[i].name == this.workList[t].name) {
|
||
this.workList[t].value = list[i].value;
|
||
}
|
||
}
|
||
}
|
||
},
|
||
//土地证
|
||
changeWorkListTd(data) {
|
||
var entries = Object.entries(data);
|
||
var list = entries.map(function (item) {
|
||
return {
|
||
value: item[1],
|
||
name: item[0],
|
||
};
|
||
});
|
||
for (var i = 0; i < list.length; i++) {
|
||
for (var t = 0; t < this.workListNew.length; t++) {
|
||
if (list[i].name == this.workListNew[t].name) {
|
||
this.workListNew[t].value = list[i].value;
|
||
}
|
||
}
|
||
}
|
||
this.workList = this.workListNew;
|
||
},
|
||
changeWorkListfcz(data) {
|
||
var entries = Object.entries(data);
|
||
var list = entries.map(function (item) {
|
||
return {
|
||
value: item[1],
|
||
name: item[0],
|
||
};
|
||
});
|
||
for (var i = 0; i < list.length; i++) {
|
||
for (var t = 0; t < this.workListFCZ.length; t++) {
|
||
if (list[i].name == this.workListFCZ[t].name) {
|
||
this.workListFCZ[t].value = list[i].value;
|
||
}
|
||
}
|
||
}
|
||
},
|
||
cancelLoading() {
|
||
setTimeout(() => {
|
||
this.loading = false;
|
||
}, 500);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.pdf{
|
||
&::-webkit-scrollbar{
|
||
width: 0;
|
||
}
|
||
}
|
||
@keyframes donghua7 {
|
||
from {
|
||
transform: translateX(100%);
|
||
}
|
||
|
||
to {
|
||
transform: translateX(0%);
|
||
}
|
||
}
|
||
@keyframes donghua8 {
|
||
from {
|
||
transform: translateX(-100%);
|
||
}
|
||
|
||
to {
|
||
transform: translateX(0%);
|
||
}
|
||
}
|
||
.homeleave-leave,.homeleave-enter-to{
|
||
animation: donghua7 1s linear;
|
||
}
|
||
|
||
.homeleave-enter,.homeleave-leave-active{
|
||
animation: donghua7 1s linear reverse;
|
||
}
|
||
.homeleaves-leave,.homeleaves-enter-to{
|
||
animation: donghua8 1s linear;
|
||
}
|
||
|
||
.homeleaves-enter,.homeleaves-leave-active{
|
||
animation: donghua8 1s linear reverse;
|
||
}
|
||
// 表格透明
|
||
.user_skills {
|
||
::v-deep .el-table--border::after {
|
||
width: 0;
|
||
}
|
||
|
||
::v-deep .el-table {
|
||
background-color: transparent !important;
|
||
border: none;
|
||
&::before {
|
||
//去除底部白线
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 0px;
|
||
}
|
||
&::-webkit-scrollbar{
|
||
width: 0;
|
||
}
|
||
}
|
||
::v-deep .el-table th {
|
||
background-color: transparent !important;
|
||
}
|
||
::v-deep .el-table__header-wrapper {
|
||
height: 48px;
|
||
border: 1px solid rgb(23, 83, 131);
|
||
}
|
||
::v-deep .el-table__header th {
|
||
border: none;
|
||
padding: 0;
|
||
height: 48px;
|
||
.cell {
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
&.el-table__cell.is-leaf {
|
||
border: none !important;
|
||
}
|
||
}
|
||
::v-deep .el-table tr {
|
||
background-color: transparent !important;
|
||
&.success-row {
|
||
background-color: rgba(23, 83, 131, 0.4) !important;
|
||
}
|
||
}
|
||
::v-deep .el-table--enable-row-transition .el-table__body td,
|
||
.el-table .cell {
|
||
background-color: transparent !important;
|
||
border: none;
|
||
color: #ffffff;
|
||
}
|
||
::v-deep .el-table__body td .cell {
|
||
// white-space: nowrap !important;
|
||
white-space: normal !important;
|
||
padding: 0;
|
||
font-size: 13px;
|
||
line-height: 14px;
|
||
// word-break: break-all;
|
||
}
|
||
::v-deep .el-table th.el-table__cell > .cell {
|
||
color: rgb(86, 254, 226);
|
||
}
|
||
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
|
||
/*width: 0;宽度为0隐藏*/
|
||
width: 0px;
|
||
}
|
||
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
||
border-radius: 2px;
|
||
height: 50px;
|
||
background: #eee;
|
||
}
|
||
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
|
||
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||
border-radius: 2px;
|
||
background: rgba(0, 0, 0, 0.4);
|
||
}
|
||
}
|
||
.xianmodel {
|
||
|
||
.pic {
|
||
background: url("../../../assets/mapInfo/资源 89.jpg") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
.xianmodel1{
|
||
&::-webkit-scrollbar{
|
||
width: 0;
|
||
}
|
||
}
|
||
.reddianno {
|
||
background: url("../../../assets/mapInfo/资源 84.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.reddian {
|
||
width: 25px;
|
||
height: 25px;
|
||
background: url("../../../assets/mapInfo/资源 84.png") no-repeat;
|
||
animation: jumpBoxHandler 20s infinite alternate;
|
||
}
|
||
@keyframes jumpBoxHandler {
|
||
0% {
|
||
left: 0;
|
||
}
|
||
50% {
|
||
left: 50px;
|
||
}
|
||
100% {
|
||
left: 90px;
|
||
}
|
||
}
|
||
.mapmodels {
|
||
background: url("../../../assets/mapInfo/弹窗1.jpg") no-repeat;
|
||
background-size: 100% 100%;
|
||
.popmodels {
|
||
background: url("../../../assets/mapInfo/弹窗信息.jpg") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
.teblecon {
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
align-items: center;
|
||
}
|
||
|
||
// @import "~@/common/var.scss";
|
||
// @import "~@/assets/scss/index.scss";
|
||
@keyframes donghua {
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
.my-leave,
|
||
.my-enter-to {
|
||
animation: donghua 1s linear;
|
||
}
|
||
|
||
.my-enter,
|
||
.my-leave-active {
|
||
animation: donghua 1s linear reverse;
|
||
}
|
||
|
||
@keyframes donghua1 {
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
.myr-leave,
|
||
.myr-enter-to {
|
||
animation: donghua1 1s linear;
|
||
}
|
||
|
||
.myr-enter,
|
||
.myr-leave-active {
|
||
animation: donghua1 1s linear reverse;
|
||
}
|
||
|
||
@keyframes donghuatan {
|
||
from {
|
||
transform: translateY(100%);
|
||
}
|
||
|
||
to {
|
||
transform: translateY(0%);
|
||
}
|
||
}
|
||
.tanchuan-enter-active {
|
||
animation: donghuatan 1s linear;
|
||
}
|
||
|
||
.tanchuan-leave-active {
|
||
animation: donghuatan 1s linear reverse;
|
||
}
|
||
// 样式
|
||
.mapchild {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
.bg {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
.host-body {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.btn {
|
||
position: fixed;
|
||
width: 160px;
|
||
height: 54px;
|
||
bottom: 10px;
|
||
left: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
img {
|
||
width: 40px;
|
||
height: 40px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.main {
|
||
width: 100%;
|
||
height: calc(100% - 76px);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
// margin-top: 76px;
|
||
position: relative;
|
||
z-index: 9;
|
||
pointer-events: none;
|
||
.left {
|
||
width: 351px;
|
||
height: 100%;
|
||
pointer-events: auto;
|
||
margin-top: 10px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
.leftmenus{
|
||
width: 301px;
|
||
height: 100%;
|
||
background: url("../../../assets/newimgs/zuoxian.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
.menus {
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
height: 580px;
|
||
.list {
|
||
width: 184px;
|
||
height: 54px;
|
||
background: url("../../../assets/newimgs/moren.png") no-repeat;
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
p {
|
||
color: #ffffff;
|
||
margin-left: 20px;
|
||
font-size: 15px;
|
||
}
|
||
&.css1 {
|
||
margin-left: 0px;
|
||
}
|
||
&.css2 {
|
||
margin-left: 10px;
|
||
}
|
||
&.css3 {
|
||
margin-left: 20px;
|
||
}
|
||
&.css4 {
|
||
margin-left: 40px;
|
||
}
|
||
&.css5 {
|
||
margin-left: 50px;
|
||
}
|
||
&.css6 {
|
||
margin-left: 40px;
|
||
}
|
||
&.css7 {
|
||
margin-left: 30px;
|
||
}
|
||
&.css8 {
|
||
margin-left: 20px;
|
||
}
|
||
&.css9 {
|
||
margin-left: 0px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
.right {
|
||
height: 100%;
|
||
pointer-events: auto;
|
||
display: flex;
|
||
padding-top: 110px;
|
||
padding-right: 10px;
|
||
box-sizing: border-box;
|
||
.infothings {
|
||
width: 427px;
|
||
height: 594px;
|
||
background: url("../../../assets/newimgs/peidianfangKuang.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
.toptitle {
|
||
width: 100%;
|
||
height: 40px;
|
||
background: url("../../../assets/newimgs/zhongyaoshebeichuxian.png")
|
||
no-repeat;
|
||
background-size: 100% 100%;
|
||
color: #ffffff;
|
||
text-indent: 40px;
|
||
line-height: 40px;
|
||
|
||
}
|
||
.info {
|
||
margin-top: 5px;
|
||
width: 100%;
|
||
padding: 0 20px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
.list {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
height: 32px;
|
||
align-items: center;
|
||
font-size: 13px;
|
||
padding: 0 10px;
|
||
box-sizing: border-box;
|
||
.text {
|
||
width: fit-content;
|
||
height: 100%;
|
||
color: #ffffff;
|
||
line-height: 27px;
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
}
|
||
.infos {
|
||
width: 100%;
|
||
padding: 0 20px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
justify-content: space-between;
|
||
margin-top: 10px;
|
||
.list {
|
||
width: 190px;
|
||
height: 105px;
|
||
margin-bottom: 10px;
|
||
.text {
|
||
height: 100%;
|
||
width: 70%;
|
||
margin-left: 90px;
|
||
line-height: 145px;
|
||
}
|
||
&.list1 {
|
||
background: url("../../../assets/mapInfo/zongfuhe.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
&.list2 {
|
||
background: url("../../../assets/mapInfo/jinxiandianya.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
&.list3 {
|
||
background: url("../../../assets/mapInfo/leijidianliang.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
&.list4 {
|
||
background: url("../../../assets/mapInfo/gonglvyiinshu.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.envior {
|
||
width: 427px;
|
||
height: 241px;
|
||
background: url("../../../assets/newimgs/huanjingxinxiKuang.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
.toptitle {
|
||
width: 100%;
|
||
height: 40px;
|
||
background: url("../../../assets/newimgs/titleBeijing.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
color: #ffffff;
|
||
text-indent: 40px;
|
||
line-height: 40px;
|
||
}
|
||
.info {
|
||
width: 100%;
|
||
height: calc(100% - 50px);
|
||
// padding: 0 10px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
// margin-top: 10px;
|
||
// .enviorLeft{
|
||
// width:50%;
|
||
// height: 100%;
|
||
// display: flex;
|
||
// flex-wrap: wrap;
|
||
// .top{
|
||
// width:100%;
|
||
// height: 50%;
|
||
// // border: 1px solid red;
|
||
// }
|
||
// .bottom{
|
||
// width:100%;
|
||
// height: 50%;
|
||
// border: 1px solid blue;
|
||
// }
|
||
// }
|
||
// .enviorRight{
|
||
// width:50%;
|
||
// height: 100%;
|
||
// border: 1px solid burlywood;
|
||
// }
|
||
.list {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
height: 32px;
|
||
align-items: center;
|
||
padding: 0 10px;
|
||
box-sizing: border-box;
|
||
& > div {
|
||
width: 50%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.envior1 {
|
||
width: 427px;
|
||
height: 241px;
|
||
background: url("../../../assets/newimgs/huanjingxinxiKuang.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
.toptitle {
|
||
width: 100%;
|
||
height: 40px;
|
||
background: url("../../../assets/newimgs/titleBeijing.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
color: #ffffff;
|
||
text-indent: 40px;
|
||
line-height: 40px;
|
||
}
|
||
.info {
|
||
width: 100%;
|
||
height: calc(100% - 50px);
|
||
padding: 0 10px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
margin-top: 10px;
|
||
.list {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
height: 32px;
|
||
align-items: center;
|
||
padding: 0 10px;
|
||
box-sizing: border-box;
|
||
& > div {
|
||
width: 50%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.maptu {
|
||
width: 427px;
|
||
height: 260px;
|
||
background: url("../../../assets/newimgs/huanjingxinxiKuang.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
|
||
.toptitle {
|
||
width: 100%;
|
||
height: 40px;
|
||
background: url("../../../assets/newimgs/titleBeijing.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
color: #ffffff;
|
||
// text-indent: 40px;
|
||
line-height: 40px;
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
.changeselect {
|
||
// width: 160px;
|
||
// height: 35px;
|
||
::v-deep .el-input__inner {
|
||
height: 35px;
|
||
background: rgba(23, 83, 131, 0.2);
|
||
}
|
||
::v-deep .el-input__inner {
|
||
height: 35px;
|
||
// height: 34px;
|
||
border-color: rgb(169,251,250);
|
||
color: #ffffff;
|
||
border-radius: 0;
|
||
}
|
||
::v-deep .el-input__icon {
|
||
line-height: 35px;
|
||
}
|
||
}
|
||
}
|
||
.info {
|
||
// display: flex;
|
||
// justify-content: center;
|
||
// align-items: center;
|
||
width: 100%;
|
||
height: calc(100% - 40px);
|
||
padding: 10px 20px;
|
||
box-sizing: border-box;
|
||
.pic {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: url("../../../assets/mapInfo/ziyuan1.jpg") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.pic1{
|
||
width: 100%;
|
||
height: 100%;
|
||
background: url("../../../assets/mapInfo/ziyuan3.jpg") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.picActive {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: url("../../../assets/mapInfo/ziyuan4.jpg") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
}
|
||
.chuplc {
|
||
width: 530px;
|
||
height: 666px;
|
||
background: url("../../../assets/newimgs/zhongyaoshebeiKuang.png")
|
||
no-repeat;
|
||
background-size: 100% 100%;
|
||
.toptitle {
|
||
width: 100%;
|
||
height: 40px;
|
||
background: url("../../../assets/newimgs/zhongyaoshebeichuxian.png")
|
||
no-repeat;
|
||
background-size: 100% 100%;
|
||
color: #ffffff;
|
||
text-indent: 40px;
|
||
line-height: 40px;
|
||
margin-left: 6px;
|
||
}
|
||
.user_skills {
|
||
width: 100%;
|
||
height: calc(100% - 80px);
|
||
padding: 20px;
|
||
margin-top: 10px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
align-items: center;
|
||
.tabBtn {
|
||
width: 126px;
|
||
height: 45px;
|
||
text-align: center;
|
||
line-height: 45px;
|
||
color: #ffffff;
|
||
letter-spacing: 1px;
|
||
background: url("../../../assets/newimgs/commitXuanzhong.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
}
|
||
.warnnews {
|
||
width: 427px;
|
||
height: 405px;
|
||
background: url("../../../assets/newimgs/waiKuang.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
.toptitle {
|
||
width: 100%;
|
||
height: 40px;
|
||
background: url("../../../assets/newimgs/titleBeijing.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
color: #ffffff;
|
||
text-indent: 40px;
|
||
line-height: 40px;
|
||
}
|
||
.info {
|
||
width: 100%;
|
||
height: calc(100% - 40px);
|
||
padding: 0px 15px 10px 15px;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
.record {
|
||
width: 427px;
|
||
height: 701px;
|
||
background: url("../../../assets/newimgs/shishiKuang.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
.toptitle {
|
||
width: 100%;
|
||
height: 40px;
|
||
background: url("../../../assets/newimgs/titleBeijing.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
color: #ffffff;
|
||
text-indent: 40px;
|
||
line-height: 40px;
|
||
}
|
||
.info {
|
||
width: 100%;
|
||
height: calc(100% - 40px);
|
||
box-sizing: border-box;
|
||
padding: 10px 15px;
|
||
margin-top: 10px;
|
||
::v-deep .el-radio{
|
||
color: #ffffff;
|
||
}
|
||
.topList{
|
||
height: 300px;
|
||
overflow-y:scroll ;
|
||
overflow-x: hidden;
|
||
&::-webkit-scrollbar{
|
||
width: 0;
|
||
}
|
||
}
|
||
|
||
.jilu {
|
||
width: 100%;
|
||
height: 100px;
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
padding: 5px 8px;
|
||
box-sizing: border-box;
|
||
.warnJilu {
|
||
width: calc(100% - 45px);
|
||
height: 100%;
|
||
}
|
||
.jiankong {
|
||
height: 100px;
|
||
width: 35px;
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
.select {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin: 10px 0;
|
||
|
||
.seSearch {
|
||
width: 216px;
|
||
height: 35px;
|
||
background: url("../../../assets/newimgs/二级菜单.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
color: #ffffff;
|
||
text-indent: 40px;
|
||
line-height: 35px;
|
||
}
|
||
.changeselect {
|
||
width: 160px;
|
||
height: 35px;
|
||
::v-deep .el-input__inner {
|
||
height: 35px;
|
||
background: rgba(23, 83, 131, 0.6);
|
||
}
|
||
::v-deep .el-input__inner {
|
||
height: 35px;
|
||
// height: 34px;
|
||
border-color: rgb(23, 83, 131);
|
||
color: #ffffff;
|
||
border-radius: 0;
|
||
}
|
||
::v-deep .el-input__icon {
|
||
line-height: 35px;
|
||
}
|
||
}
|
||
}
|
||
.bottomList{
|
||
height: 131px;
|
||
overflow-y:scroll ;
|
||
overflow-x: hidden;
|
||
&::-webkit-scrollbar{
|
||
width: 0;
|
||
}
|
||
}
|
||
.sumbit {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
margin-top: 20px;
|
||
.leftsub {
|
||
background: url("../../../assets/newimgs/morenXiugai.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
width: 123px;
|
||
height: 40px;
|
||
text-align: center;
|
||
line-height: 40px;
|
||
color: #ffffff;
|
||
}
|
||
.rightsub {
|
||
background: url("../../../assets/newimgs/commitXuanzhong.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
width: 123px;
|
||
height: 40px;
|
||
text-align: center;
|
||
line-height: 40px;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.notice {
|
||
width: 427px;
|
||
height: 721px;
|
||
background: url("../../../assets/newimgs/shishiKuang.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
.toptitle {
|
||
width: 100%;
|
||
height: 40px;
|
||
background: url("../../../assets/newimgs/titleBeijing.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
color: #ffffff;
|
||
text-indent: 40px;
|
||
line-height: 40px;
|
||
}
|
||
.info {
|
||
width: 100%;
|
||
height: calc(100% - 40px);
|
||
box-sizing: border-box;
|
||
padding: 10px 15px;
|
||
margin-top: 10px;
|
||
.blurInp {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
.leftInp{
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
|
||
align-items: center;
|
||
margin-right: 10px;
|
||
::v-deep .el-input{
|
||
width: 120px;
|
||
}
|
||
::v-deep .el-input__inner {
|
||
width: 120px;
|
||
height: 30px;
|
||
background: rgba(23, 83, 131, 0.6);
|
||
}
|
||
}
|
||
span {
|
||
display: inline-block;
|
||
width: 90px;
|
||
color: #ffffff;
|
||
}
|
||
::v-deep .el-input__inner {
|
||
width: 280px;
|
||
height: 35px;
|
||
background: rgba(23, 83, 131, 0.6);
|
||
}
|
||
::v-deep .el-input__inner {
|
||
height: 35px;
|
||
// height: 34px;
|
||
border-color: rgb(23, 83, 131);
|
||
color: #ffffff;
|
||
border-radius: 0;
|
||
}
|
||
}
|
||
.textarea {
|
||
margin: 0 0 10px 0;
|
||
::v-deep .el-textarea__inner {
|
||
width: 100%;
|
||
height: 60px;
|
||
background: rgba(23, 83, 131, 0.6);
|
||
color: #ffffff;
|
||
border-radius: 0;
|
||
border-color: rgb(23, 83, 131);
|
||
}
|
||
}
|
||
.sumbit {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
margin-top: 20px;
|
||
.leftsub {
|
||
background: url("../../../assets/newimgs/morenXiugai.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
width: 123px;
|
||
height: 40px;
|
||
text-align: center;
|
||
line-height: 40px;
|
||
color: #ffffff;
|
||
}
|
||
.rightsub {
|
||
background: url("../../../assets/newimgs/commitXuanzhong.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
width: 123px;
|
||
height: 40px;
|
||
text-align: center;
|
||
line-height: 40px;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
::v-deep .el-checkbox-group{
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
width: 100%;
|
||
height: 140px;
|
||
overflow-y: scroll;
|
||
overflow-x: hidden;
|
||
&::-webkit-scrollbar {
|
||
|
||
width:5px;
|
||
|
||
}
|
||
|
||
/* 滚动槽 */
|
||
|
||
&::-webkit-scrollbar-track {
|
||
|
||
-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
|
||
|
||
border-radius:10px;
|
||
|
||
}
|
||
|
||
/* 滚动条滑块 */
|
||
|
||
&::-webkit-scrollbar-thumb {
|
||
|
||
border-radius:10px;
|
||
|
||
background:rgba(0,0,0,0.1);
|
||
|
||
-webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
|
||
|
||
}
|
||
|
||
&::-webkit-scrollbar-thumb:window-inactive {
|
||
|
||
background:rgba(255,0,0,0.4);
|
||
|
||
}
|
||
.el-checkbox{
|
||
margin-bottom: 5px;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.yunwei{
|
||
width: 427px;
|
||
height: 491px;
|
||
background: url("../../../assets/newimgs/shishiKuang.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
.toptitle {
|
||
width: 100%;
|
||
height: 40px;
|
||
background: url("../../../assets/newimgs/titleBeijing.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
color: #ffffff;
|
||
text-indent: 40px;
|
||
line-height: 40px;
|
||
}
|
||
.info{
|
||
width: 100%;
|
||
height: calc(100% - 40px);
|
||
box-sizing: border-box;
|
||
padding: 10px 25px;
|
||
margin-top: 10px;
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
.changeselect {
|
||
width:100%;
|
||
height: 35px;
|
||
margin-bottom: 45px;
|
||
::v-deep .el-select{
|
||
width: 100%;
|
||
}
|
||
::v-deep .el-input__inner {
|
||
height: 35px;
|
||
background: rgba(23, 83, 131, 0.6);
|
||
}
|
||
::v-deep .el-input__inner {
|
||
height: 35px;
|
||
// height: 34px;
|
||
border-color: rgb(23, 83, 131);
|
||
color: #ffffff;
|
||
border-radius: 0;
|
||
}
|
||
::v-deep .el-input__icon {
|
||
line-height: 35px;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.homexian{
|
||
position: fixed;
|
||
z-index: 999;
|
||
cursor: pointer;
|
||
top:53%;
|
||
left: 10px;
|
||
margin: auto;
|
||
}
|
||
.smallmap {
|
||
width: 120px;
|
||
height: 80px;
|
||
position: fixed;
|
||
z-index: 999;
|
||
cursor: pointer;
|
||
top: 80px;
|
||
right: 20px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.selectModel {
|
||
width: 160px;
|
||
height: 50px;
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
position: fixed;
|
||
top: 120px;
|
||
left: 480px;
|
||
.selectbtn {
|
||
background: url(../../../assets/moren.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
// margin-right: 10px;
|
||
height: 34px;
|
||
width: 82px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.active{
|
||
background: url(../../../assets/xuanzhong.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
// margin-right: 10px;
|
||
height: 34px;
|
||
width: 82px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
.center {
|
||
width: 29%;
|
||
height: 45%;
|
||
padding: 0 10px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-content: flex-start;
|
||
position: fixed;
|
||
background: url("../../../assets/leftone.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
top: 0;
|
||
margin: auto;
|
||
.box {
|
||
font-size: 14px;
|
||
// background: #11223289;
|
||
background: rgba(16, 29, 37, 0.8);
|
||
border: 2px solid #29a3d3a1;
|
||
width: 23%;
|
||
margin: 1%;
|
||
text-align: center;
|
||
p {
|
||
&:first-child {
|
||
padding: 8px 0 10px 0;
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
}
|
||
|
||
&:nth-child(2) {
|
||
// color: $default-font-color;
|
||
}
|
||
|
||
padding: 5px 0;
|
||
}
|
||
}
|
||
.close {
|
||
position: absolute;
|
||
right: 6%;
|
||
top: 8%;
|
||
cursor: pointer;
|
||
color: #ffffff;
|
||
}
|
||
.box:hover {
|
||
background: rgba(76, 106, 124, 0.8);
|
||
}
|
||
}
|
||
h1 {
|
||
text-align: center;
|
||
position: absolute;
|
||
top: -40px;
|
||
left: 35%;
|
||
font-size: 22px;
|
||
color: #a5e7ed;
|
||
font-weight: bolder;
|
||
mask-image: -webkit-gradient(linear, top, bottom, from(#ecf9fa), to(#acf2f8));
|
||
}
|
||
.attentionInfo {
|
||
overflow-y: scroll;
|
||
// height: 208px;
|
||
overflow-x: hidden;
|
||
p {
|
||
display: block;
|
||
width: 93%;
|
||
margin: 2px 0;
|
||
color: #acf2f8;
|
||
font-size: 13px;
|
||
padding-right: 10px;
|
||
}
|
||
|
||
li {
|
||
height: auto;
|
||
font-size: 13px;
|
||
padding: 10px 10px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.infolist {
|
||
width: calc(100% - 45px);
|
||
}
|
||
.jiankong {
|
||
height: 100px;
|
||
width: 35px;
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
i {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
&_title {
|
||
// color: $table-header-color
|
||
}
|
||
}
|
||
.attentionInfo::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style>
|
||
|