<template>
  <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>

