sxyanzhu
/
jhbigscreen
4
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity
jhbigscreen/src/pages/safe/excavation.vue

457 lines
26 KiB
Vue
Raw Normal View History

update code
2024-03-09 01:14:29 +08:00
<template>
update code
2024-03-10 00:34:11 +08:00
<div class="project-excavation" @click="clickOutside">
<el-row>
<el-col :span="6">
<module-one-2-1 label="监测概况">
<div class="analyse-equipment" style="position: absolute;top: 10px;left: 325px;">深基坑监测</div>
<div class="czz-max">
<div class="czz-number">
<div class="czz-number-content">
<div class="czz-number-img czz-number-img-blue">
<svg class="my-svg-icon-blue"
style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3815">
<path
d="M96 334.4A48 48 0 0 0 144 288V144H288a48 48 0 0 0 0-96H96A48 48 0 0 0 48 96v192A48 48 0 0 0 96 334.4zM288 880H144V768a48 48 0 0 0-96 0v160A48 48 0 0 0 96 976h192a48 48 0 0 0 0-96zM928 687.04A48 48 0 0 0 880 736v144H736a48 48 0 0 0 0 96h192a48 48 0 0 0 48-48v-192a48 48 0 0 0-48-48.96zM928 48h-194.56a48 48 0 0 0 0 96h146.56V288a48 48 0 0 0 96 0V96A48 48 0 0 0 928 48zM522.88 194.88c-155.2 0-281.28 136-281.28 302.72 0 156.16 134.08 282.88 206.08 352 9.28 8.64 17.6 16.32 24.32 23.36a72.64 72.64 0 0 0 50.88 21.12 71.68 71.68 0 0 0 50.56-21.12c6.72-7.04 15.04-14.72 24.32-23.36 72-68.16 206.4-194.88 206.4-352 0-166.72-126.4-302.72-281.28-302.72zM544 790.4c-7.36 7.04-14.08 13.12-19.84 19.2l-20.16-19.2c-67.84-64-181.12-171.2-181.12-292.8s90.24-224 201.28-224 201.28 99.84 201.28 224S610.56 726.4 544 790.4zM529.6 370.88a123.84 123.84 0 1 0 123.84 123.84 123.84 123.84 0 0 0-123.84-123.84z m0 167.68a43.84 43.84 0 1 1 43.84-43.84 43.52 43.52 0 0 1-43.84 43.84z"
p-id="3816"></path>
</svg>
</div>
<div class="survey_content_number">
<p>监测点位数</p>
<div class="survey_content_value"><span v-html="monTotal"></span> 个</div>
</div>
</div>
<div class="czz-number-content">
<div class="czz-number-img czz-number-img-green">
<svg class="my-svg-icon-green"
style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5561">
<path
d="M636.062286 948.357007l-248.319027-0.77782-190.565895-458.913786h629.645272l-190.76035 459.691606z"
fill="#0C42B2" opacity=".8" p-id="5562"></path>
<path
d="M512 661.146981C329.01785 661.146981 191.149259 531.639954 191.149259 359.741739 191.149259 178.509685 341.07406 19.445499 512 19.445499S832.850741 178.509685 832.850741 359.741739C832.850741 531.639954 694.98215 661.146981 512 661.146981z"
fill="#1F3C78" p-id="5563"></path>
<path
d="M512 38.890999C672.619825 38.890999 813.405241 188.815799 813.405241 359.741739 813.405241 520.55602 683.898215 641.701481 512 641.701481S210.594759 520.55602 210.594759 359.741739C210.594759 188.815799 351.380175 38.890999 512 38.890999m0-38.890999C324.156476 0 171.70376 171.898215 171.70376 359.741739S324.156476 680.59248 512 680.59248 852.29624 547.585264 852.29624 359.741739 699.843524 0 512 0z"
fill="#3D79F1" p-id="5564"></path>
<path
d="M396.299278 934.939613a115.700722 79.337638 0 1 0 231.401444 0 115.700722 79.337638 0 1 0-231.401444 0Z"
fill="#0C41AD" p-id="5565"></path>
</svg>
</div>
<div class="survey_content_number">
<p>在线点位数</p>
<div class="survey_content_value survey_content_value_color_green"><span
v-html="onlineDevTotal"></span> 个</div>
</div>
</div>
</div>
<classify-bar :data="classifyBarData" :height="200"></classify-bar>
<div class="analyse-title">
<div class="analyse-text">报警分析</div>
</div>
<el-row style="margin-top:12px;">
<el-col :span="8">
<div class="time-study-value">
<p>今日报警数</p>
<div class="analyse-num"><span v-cloak>{{ todayTotal }}</span> 条</div>
</div>
<div class="time-study-value">
<p>本周报警数</p>
<div class="analyse-num"><span v-cloak>{{ weekTotal }}</span> 条</div>
</div>
</el-col>
<el-col :span="16">
<div class="survey-oil-title">
<div class="survey-oil-hr"></div>
<div class="survey-oil-text">报警类型</div>
</div>
<div class="analyse-number-max" id="afootOverflowType" @mouseout="listMinMouseoutType"
@mouseover="listMinMouseoverType">
<div class="glr-login-number-max analyse-num-max" v-for="item in warningType">
<div class="glr-login-number-bgd glr-login-number-red-bgd"></div>
<div class="glr-login-number analyse-login-numbe">
<div><img src="images/text_red_spot.png" v-cloak>{{ item.warn_context }}</div>
<div class="glr-rate-value glr-rate-red-value"><span v-cloak>{{ item.total }}</span></div>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</module-one-2-1>
</el-col>
<el-col :span="12">
<module-one-2-2 label="点位图" style="position: relative;">
<div class="sjk-icon-max" style="height: calc(100% - 80px);">
<div class="sjk-img-min" :style="{ 'background': urlImgBgd }">
</div>
<div class="sjk-icon-spot">
<img v-for="item in forBitMappedImageData" :src="item.imgUrl"
:style="{ 'top': item.top + 'px', 'left': item.left + 'px' }" v-show="item.state"
@click="onClickSpot(item.sensorType, item.sensorInfoId, item.isBase, item.status, item)"
class="icon-img">
<img v-for="item in forBitMappedImageDataPJ" :src="item.imgUrl"
:style="{ 'top': item.top + 'px', 'left': item.left + 'px' }" v-show="item.state"
@click="onClickSpotPJ(item.sensorType, item.id, item.sensorInfoId, item)" class="icon-img">
</div>
<div class="sjk-popup" :style="{ 'top': popupPosition.top + 'px', 'left': popupPosition.left + 'px' }"
id="clickPopup" v-if="popupShow">
<div class="sjk-popup-content">
<div class="sjk-popup-title">
<div v-cloak>{{ pointPositionName }}</div>
</div>
<div class="sjk-popup-time" v-cloak>{{ lineTime }}</div>
<div class="sjk-popup-table" v-if="offLine">
<table>
<tr>
<th>监测详情</th>
<th>变化量</th>
<th>预警</th>
<th>报警</th>
</tr>
<tr v-for="item in popupArrData">
<td v-cloak>{{ item.text }}</td>
<td v-cloak>{{ item.data }}</td>
<td v-cloak>{{ item.warningUp }}/{{ item.warningDown }}</td>
<td v-cloak>{{ item.policeUp }}/{{ item.policeDown }}</td>
</tr>
</table>
</div>
<div class="sjk-off-line" v-if="!offLine">
设备离线
</div>
</div>
</div>
</div>
<div class="sjk-icon-legend" style="left: 11px;bottom: 11px;width: calc(100% - 22px);">
<div class="sjk-icon-legend-color">
<div class="sjk-icon-legend-color-list">
<div class="sjk-icon-legend-color-list-box box-green"></div>
<div class="sjk-icon-legend-color-list-text">稳定</div>
</div>
<div class="sjk-icon-legend-color-list">
<div class="sjk-icon-legend-color-list-box box-red"></div>
<div class="sjk-icon-legend-color-list-text">报警</div>
</div>
<div class="sjk-icon-legend-color-list">
<div class="sjk-icon-legend-color-list-box box-orange"></div>
<div class="sjk-icon-legend-color-list-text">预警</div>
</div>
<div class="sjk-icon-legend-color-list">
<div class="sjk-icon-legend-color-list-box box-blue"></div>
<div class="sjk-icon-legend-color-list-text">基准线</div>
</div>
<div class="sjk-icon-legend-color-list">
<div class="sjk-icon-legend-color-list-box box-grey"></div>
<div class="sjk-icon-legend-color-list-text">离线</div>
</div>
</div>
<div class="sjk-icon-legend-right">
<div :class="item.class" v-for="item in legendArrData" @click="legendScreen(item.type)">
<img :src="item.url">
<span v-cloak>{{ item.text }}</span>
</div>
</div>
</div>
</module-one-2-2>
</el-col>
<el-col :span="6">
<module-one-1-1 label="监测时长">
</module-one-1-1>
<module-one-1-1 label="变化速率统计">
</module-one-1-1>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<module-one-1-2 label="基坑近7天变化趋势">
<div class="sjk-chart-line" v-loading="loading" element-loading-text="数据加载中"
element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
<div class="sjk-chart-line-title">
<div :class="btnNav == 1 ? 'active' : ''" @click="onClickPoint(1)">沉降</div>
<div :class="btnNav == 2 ? 'active' : ''" @click="onClickPoint(2)">倾斜</div>
<div :class="btnNav == 3 ? 'active' : ''" @click="onClickPoint(3)">应力</div>
</div>
<div class="trend-chart-max" v-if="btnNav == 1">
<trend-line-chart :height="220" :chartdata="CollWeiyiPointData"
:data="CollWeiyiPointDataData"></trend-line-chart>
</div>
<div v-if="btnNav == 2">
<el-row>
<el-col :span="12">
<div class="trend-chart-max">
<trend-line-chart :height="220" :chartdata="CollQingxiePointDataX"
:data="CollQingxiePointDataXdData"></trend-line-chart>
</div>
</el-col>
<el-col :span="12">
<div class="trend-chart-max">
<trend-line-chart :height="220" :chartdata="CollQingxiePointDataY"
:data="CollQingxiePointDataYdData"></trend-line-chart>
</div>
</el-col>
</el-row>
</div>
<div class="trend-chart-max" v-if="btnNav == 3">
<trend-line-chart :height="220" :chartdata="YingLiPointData"
:data="YingLiPointDataData"></trend-line-chart>
</div>
</div>
</module-one-1-2>
</el-col>
<el-col :span="12">
<module-one-1-2 label="累计变化量">
</module-one-1-2>
</el-col>
</el-row>
</div>
</template>
<script>
import '@/components/module/module-one-2-2'
import '@/components/module/module-one-1-2'
import '@/components/module/module-one-2-1'
import '@/components/classify-bar'
import '@/components/trend-line-chart'
export default {
//基坑
name: 'JhbigscreenExcavation',
data() {
return {
monTotal: 3,
onlineDevTotal: 3,
classifyBarData: [],
todayTotal: 10,
weekTotal: 99,
warningType: [],
warningTypeInterval: undefined,
warningTypeIndex: 0,
urlImgBgd: '',
forBitMappedImageData: [],
forBitMappedImageDataPJ: [],
legendArrData: [],
popupShow: false,
popupPosition: {},
pointPositionName: '',
popupArrData: [],
offLine: true,
loading: false,
btnNav: 1,
CollWeiyiPointData:[],
CollWeiyiPointDataData:[],
CollQingxiePointDataX:[],
CollQingxiePointDataXdData:[],
CollQingxiePointDataY:[],
CollQingxiePointDataYdData:[],
YingLiPointData:[],
YingLiPointDataData:[],
};
},
mounted() {
this.classifyBarData = [{ name: '沉降', total: 15, yesMonitor: 2, notMonitor: 0, unit: '个' }, { name: '倾斜', total: 15, yesMonitor: 3, notMonitor: 0, unit: '个' }, { name: '应力', total: 15, yesMonitor: 4, notMonitor: 0, unit: '个' },]
this.warningType = [{ warn_context: '报警类型A', total: 4 }, { warn_context: '报警类型B', total: 4 }, { warn_context: '报警类型C', total: 4 }, { warn_context: '报警类型D', total: 4 }, { warn_context: '报警类型E', total: 4 }, { warn_context: '报警类型F', total: 4 }, { warn_context: '报警类型G', total: 4 }, { warn_context: '报警类型H', total: 4 },]
this.urlImgBgd = "url(images/data/excavation-01.jpg) 100% 100%";
this.forBitMappedImageData = JSON.parse('[{"sensorTypeName":"位移(WY)","pointName":"位移26","drawId":"7039969819126403072","sensorInfoId":"7042034685840703494","url":"","xpixels":1492.266916,"sortValue":1,"createData":"2023-03-20 20:06:19","top":86.56728596535274,"fileSize":"2276*1280","left":607.8571428571429,"ypixels":117.403425,"sensorType":"CollWeiyiPoint","statusTime":"2024-03-09 22:40:04","otherProjectId":"1634117283072266241","isBase":"0","sensorSmallType":"24","drawName":"御井路公租房.jpg","status":"0","state":true,"imgUrl":"images/place_chenjiang_green.png"},{"sensorTypeName":"沉降(CJ)","pointName":"沉降53","drawId":"7039969819126403072","sensorInfoId":"7039970088807718912","url":"","xpixels":423.054061,"sortValue":1,"createData":"2023-03-20 20:06:19","top":152.63871453678132,"fileSize":"2276*1280","left":211.42857142857142,"ypixels":336.059302,"sensorType":"CollWeiyiPoint","statusTime":"2024-03-09 22:40:04","otherProjectId":"1634117283072266241","isBase":"1","sensorSmallType":"80","drawName":"御井路公租房.jpg","status":"0","state":true,"imgUrl":"images/place_chenjiang_blue.png"},{"sensorTypeName":"倾斜(QX)","pointName":"倾斜44","drawId":"7039969819126403072","sensorInfoId":"7039970088841273344","url":"","xpixels":387.71104,"sortValue":1,"createData":"2023-03-13 11:22:53","top":112.99585739392417,"fileSize":"2276*1280","left":317.1428571428571,"ypixels":766.483595,"sensorType":"CollQingxiePoint","statusTime":"2024-03-09 22:40:04","otherProjectId":"1634117283072266241","isBase":"0","sensorSmallType":"33","drawName":"御井路公租房.jpg","status":"0","state":true,"imgUrl":"images/place_qingxie_green.png"}]')
this.forBitMappedImageDataPJ = JSON.parse('[{"top":205.49585739392415,"left":224.64285714285714,"fileSize":"2276*1280","pointName":"倾斜45","sensorType":"CollQingxiePoint","id":1831,"otherProjectId":"1634117283072266241","project_name":"XXXXX项目EPC总承包项目","sensorInfoId":"7052577632253038592","url":"","status":"2","state":true,"imgUrl":"images/pj_grey.png"},{"top":271.56728596535277,"left":179.71428571428572,"fileSize":"2276*1280","pointName":"倾斜46","sensorType":"CollQingxiePoint","id":1831,"otherProjectId":"1634117283072266241","project_name":"XXXXX项目EPC总承包项目","sensorInfoId":"7052577632253038596","url":"","status":"2","state":true,"imgUrl":"images/pj_grey.png"},{"top":337.6387145367813,"left":171.78571428571428,"fileSize":"2276*1280","pointName":"倾斜47","sensorType":"CollQingxiePoint","id":1831,"otherProjectId":"1634117283072266241","project_name":"XXXXX项目EPC总承包项目","sensorInfoId":"7052577632253038600","url":"","status":"2","state":true,"imgUrl":"images/pj_grey.png"},{"top":245.13871453678132,"left":211.42857142857142,"fileSize":"2276*1280","pointName":"倾斜48","sensorType":"CollQingxiePoint","id":1831,"otherProjectId":"1634117283072266241","project_name":"XXXXX项目EPC总承包项目","sensorInfoId":"7052896778106015744","url":"","status":"2","state":true,"imgUrl":"images/pj_grey.png"},{"top":311.2101431082099,"left":211.42857142857142,"fileSize":"2276*1280","pointName":"倾斜49","sensorType":"CollQingxiePoint","id":1831,"otherProjectId":"1634117283072266241","project_name":"XXXXX项目EPC总承包项目","sensorInfoId":"7052896778106015748","url":"","status":"2","state":true,"imgUrl":"images/pj_grey.png"},{"top":350.85300025106704,"left":185,"fileSize":"2276*1280","pointName":"倾斜50","sensorType":"CollQingxiePoint","id":1831,"otherProjectId":"1634117283072266241","project_name":"XXXXX项目EPC总承包项目","sensorInfoId":"7052896778106015752","url":"","status":"2","state":true,"imgUrl":"images/pj_grey.png"}]');
this.legendArrData = JSON.parse('[{"type":"CollWeiyiPoint","class":"sjk-icon-legend-right-icon","url":"images/legend_chenjiang.png","text":"沉降"},{"type":"CollQingxiePoint","class":"sjk-icon-legend-right-icon","url":"images/legend_qingxie.png","text":"倾斜"}]')
this.CollWeiyiPointDataData=JSON.parse('[["0","0","0","0","0","0","0"],["0","0","0","0","0","0","0"],[30,30,30,30,30,30,30,30,30,30,30,30,30,30],[-30,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30]]');
this.CollWeiyiPointData=JSON.parse('{"dataX":["2024-03-03","2024-03-04","2024-03-05","2024-03-06","2024-03-07","2024-03-08","2024-03-09"],"data":[["0","0","0","0","0","0","0"],["0","0","0","0","0","0","0"],[30,30,30,30,30,30,30,30,30,30,30,30,30,30],[-30,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30,-30]],"legend":["位移26","沉降53","阈值上限","阈值下限"],"color":["#a83836","#ffd900","#16a951","#ab4c90","#1785aa","#622a1d","#f26839","#e29c46","#808080","#067749","#8c4356","#a88e44","#88ada6","#789262","#ca6924","#a1afc9","#ae7001","#748a98","#549688","#b36d61","#426666","#a98175","#8a6c3a","#a88462","#574167","#f99070","#8a6c3a","#96cd55","#50606d","#c9dd23","#6b6883","#2e4e7d","#a88462","#b35b43","#c89b40","#cca4e3","#698aab","#9b4400","#a69abe","#725e83","#75878b","#9ba88e","#675758","#675758","#ab4c90","#ab4c90","#f39801","#7b8d43","#745398","#b3ada1"],"unit":"mm"}');
this.CollQingxiePointDataX=JSON.parse('{"dataX":["2024-03-03","2024-03-04","2024-03-05","2024-03-06","2024-03-07","2024-03-08","2024-03-09"],"data":[["0","0","0","0","0","0","0"],["0","0","0","0","0","0","0"],[1,1,1,1,1,1,1,1,1,1,1,1,1,1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1]],"legend":["位移26","沉降53","阈值上限","阈值下限"],"color":["#a83836","#ffd900","#16a951","#ab4c90","#1785aa","#622a1d","#f26839","#e29c46","#808080","#067749","#8c4356","#a88e44","#88ada6","#789262","#ca6924","#a1afc9","#ae7001","#748a98","#549688","#b36d61","#426666","#a98175","#8a6c3a","#a88462","#574167","#f99070","#8a6c3a","#96cd55","#50606d","#c9dd23","#6b6883","#2e4e7d","#a88462","#b35b43","#c89b40","#cca4e3","#698aab","#9b4400","#a69abe","#725e83","#75878b","#9ba88e","#675758","#675758","#ab4c90","#ab4c90","#f39801","#7b8d43","#745398","#b3ada1"],"unit":"°(X方向)"}');
this.CollQingxiePointDataXdData=JSON.parse('[["0","0","0","0","0","0","0"],["0","0","0","0","0","0","0"],[1,1,1,1,1,1,1,1,1,1,1,1,1,1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1]]');
this.CollQingxiePointDataY=JSON.parse('{"dataX":["2024-03-03","2024-03-04","2024-03-05","2024-03-06","2024-03-07","2024-03-08","2024-03-09"],"data":[["0","0","0","0","0","0","0"],["0","0","0","0","0","0","0"],[1,1,1,1,1,1,1,1,1,1,1,1,1,1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1]],"legend":["位移26","沉降53","阈值上限","阈值下限"],"color":["#a83836","#ffd900","#16a951","#ab4c90","#1785aa","#622a1d","#f26839","#e29c46","#808080","#067749","#8c4356","#a88e44","#88ada6","#789262","#ca6924","#a1afc9","#ae7001","#748a98","#549688","#b36d61","#426666","#a98175","#8a6c3a","#a88462","#574167","#f99070","#8a6c3a","#96cd55","#50606d","#c9dd23","#6b6883","#2e4e7d","#a88462","#b35b43","#c89b40","#cca4e3","#698aab","#9b4400","#a69abe","#725e83","#75878b","#9ba88e","#675758","#675758","#ab4c90","#ab4c90","#f39801","#7b8d43","#745398","#b3ada1"],"unit":"°(Y方向)"}');
this.CollQingxiePointDataYdData=JSON.parse('[["0","0","0","0","0","0","0"],["0","0","0","0","0","0","0"],[1,1,1,1,1,1,1,1,1,1,1,1,1,1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1]]');
this.YingLiPointData=JSON.parse('{"dataX":["2024-03-04","2024-03-05","2024-03-06","2024-03-07","2024-03-08","2024-03-09","2024-03-10"],"data":[["0","0","0","0","0","0"],["0","0","0","0","0","0"],["0","0","0","0","0","0"]],"legend":["ZD-YW-1","ZD-YW-2","ZD-YW-3"],"color":["#a83836","#ffd900","#16a951","#ab4c90","#1785aa","#622a1d","#f26839","#e29c46","#808080","#067749","#8c4356","#a88e44","#88ada6","#789262","#ca6924","#a1afc9","#ae7001","#748a98","#549688","#b36d61","#426666","#a98175","#8a6c3a","#a88462","#574167","#f99070","#8a6c3a","#96cd55","#50606d","#c9dd23","#6b6883","#2e4e7d","#a88462","#b35b43","#c89b40","#cca4e3","#698aab","#9b4400","#a69abe","#725e83","#75878b","#9ba88e","#675758","#675758","#ab4c90","#ab4c90","#f39801","#7b8d43","#745398","#b3ada1"],"unit":"KN"}');
this.YingLiPointDataData=JSON.parse('[["0","0","0","0","0","0"],["0","0","0","0","0","0"],["0","0","0","0","0","0"]]');
this.init();
},
methods: {
init() {
this.warningTypeInterval = setInterval(this.automaticRollType, 5000);
},
listMinMouseoverType() {
clearInterval(this.warningTypeInterval);
},
listMinMouseoutType() {
this.warningTypeInterval = setInterval(this.automaticRollType, 5000);
},
automaticRollType() {
var height = $(".glr-login-number-max").innerHeight()
if ($("#afootOverflowType").scrollTop() == height * this.warningType.length - $("#afootOverflowType").innerHeight()) {
this.warningTypeIndex = 0
} else {
this.warningTypeIndex = this.warningTypeIndex + 1
}
$("#afootOverflowType").animate({ scrollTop: (height * this.warningTypeIndex) + 'px' })
if ($("#afootOverflowTypePJ").scrollTop() == height * this.warningType.length - $("#afootOverflowTypePJ").innerHeight()) {
this.warningTypeIndex = 0
} else {
this.warningTypeIndex = this.warningTypeIndex + 1
}
$("#afootOverflowTypePJ").animate({ scrollTop: (height * this.warningTypeIndex) + 'px' })
},
legendScreen(type) {
var data = this.forBitMappedImageData
data.map(x => {
if (x.sensorType == type) {
if (x.state == true) {
x.state = false
} else {
x.state = true
}
}
return x
})
var legendData = this.legendArrData
legendData.map(y => {
if (y.type == type) {
if (y.class == 'sjk-icon-legend-right-icon') {
y.class = 'sjk-icon-legend-right-icon sjk-legend-filter'
} else {
y.class = 'sjk-icon-legend-right-icon'
}
}
return y
})
this.forBitMappedImageData = data
this.legendArrData = legendData
},
//点击点位事件
onClickSpot(type, id, isBase, status, it) {
this.deviceId = id
var posX = 0, posY = 0;
var event = event || window.event;
if (event.pageX || event.pageY) {
posX = event.pageX;
posY = event.pageY;
} else if (event.clientX || event.clientY) {
posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
}
var position = {}
if (type == 'CollWeiyiPoint') {
position = {
top: posY - 110,
left: posX + 30
}
} else if (type == 'CollQingxiePoint') {
position = {
top: posY - 110,
left: posX + 30
}
}
this.popupPosition = position
if (isBase) {
this.popupShow = true
if (type == "CollWeiyiPoint") {
this.pointPositionName = `沉降监测-${it.pointName}`
}
if (type == "CollQingxiePoint") {
this.pointPositionName = `倾斜监测-${it.pointName}`
}
this.popupArrData = [];
}
},
onClickSpotPJ(type, projectId, id, it) {
this.deviceId = id
var posX = 0, posY = 0;
var event = event || window.event;
if (event.pageX || event.pageY) {
posX = event.pageX;
posY = event.pageY;
} else if (event.clientX || event.clientY) {
posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
}
var position = {}
if (type == 'CollWeiyiPoint') {
position = {
top: posY - 110,
left: posX + 30
}
} else if (type == 'CollQingxiePoint') {
position = {
top: posY - 110,
left: posX + 30
}
}
this.pointPositionName = `爬架-倾斜监测-${it.pointName}`;
this.popupPosition = position
this.popupShow = true;
this.popupArrData = [];
},
// 监听点击弹窗以外的区域
clickOutside(event) {
const current = document.getElementById("clickPopup");
if (current) {
if (!current.contains(event.target)) {
if (event.target._prevClass != 'icon-img') {
this.popupShow = false
}
}
}
},
//点击点位类型
onClickPoint(n) {
this.btnNav = n
if (n == 1) {
this.sensorType = 'CollWeiyiPoint'
} else if (n == 2) {
this.sensorType = 'CollQingxiePoint'
} else if (n == 3) {
this.sensorType = 'YingLi'
}
},
},
};
</script>
<style lang="less">
.project-excavation {
.my-svg-icon-blue,
.my-svg-icon-green {
width: 28px !important;
height: 28px !important;
position: relative;
top: -10px;
}
.my-svg-icon-green * {
fill: #63F8BC !important;
}
.my-svg-icon-blue * {
fill: #7c9ce1 !important
}
.sjk-img-min {
height: 100%;
}
}
</style>