<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="24">                
                <div class="analyse-number-max" id="afootOverflowType" @mouseout="listMinMouseoutType"
                  @mouseover="listMinMouseoverType">
                  <div class="warn-item" v-for="(item, idx) in warningType" :key="idx">
                    <div>
                      <span class="sp-label">告警源</span>
                      <span class="sp-data1">{{item.alarmSource}}</span>
                      <span class="sp-data2">{{ item.variety }}</span>
                    </div>
                    <el-row>
                      <el-col :span="12">
                        
                      <span class="sp-label">等级</span>
                      <span class="sp-data" :class="'sp-level-'+item.level">{{getWarnLevel(item.level) }}</span>
                    
                      </el-col>
                      <el-col :span="12">
                        <span class="sp-label">产生次数</span>
                        <span class="sp-data">{{item.numbers }}</span>
                      </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                          <span class="sp-label">产生时间</span>
                          <span  class="sp-data">{{item.gmtAlarmStart }}</span>
                        </el-col>
                        <el-col :span="12">
                          <span class="sp-label">更新时间</span>
                          <span class="sp-data">{{item.gmtModified }}</span>
                        </el-col>
                    </el-row>                                  
                  </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-list">
              <span class="icon-img" :style="{ top: item.top + 'px', left: item.left + 'px' }" v-for="(item, idx) in pointElements" :key="idx" >
                    <el-popover placement="top-start" popper-class="pit-spot-node-pop" trigger="hover">
                      <div class="spot-info">
                        <div class="pt-type">位移</div>
                        <div class="pt-data">
                          <span class="pt-data-type">X: </span>
                          <span class="pt-data-val">{{ item.displace?item.displace.toFixed(3):"-" }}</span>
                          <span class="pt-data-unit">mm</span>
                        </div>
                        <div class="pt-data">
                          <span class="pt-data-type">Y: </span>
                          <span class="pt-data-val">{{ item.displace2?item.displace2.toFixed(3):"-" }}</span>
                          <span class="pt-data-unit">mm</span>
                        </div> 
                      </div>
                      <span slot="reference" style="cursor: pointer"><img  :src="getPtImg(item)" />    
                    <span class="spot-text">{{ item.spName }}</span>   </span>
                    </el-popover>
                </span>      
            </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-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, idx) in legendArrData" @click="legendScreen(item.type)" :key="idx">
                <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-2-1 label="监测时长">
          <div style="padding: 4px">
            <div class="mon-time-row1">
              <img src="images/security1.gif" class="time-img" />
              <div class="time-info">
                <div style="color: #cbdaff; font-size: 16px">监测时长(天)</div>
                <div style="color: #5bf8b5; font-size: 24px; font-weight: bold">
                  {{ monitDays }}
                </div>
              </div>
            </div>
            <div class="analyse_title_blue analyse-title">
              <div class="analyse-text">监测点</div>
            </div>
          </div>
          <div class="sjk-chart-line-title scroll mon-points" v-if="pointElements && pointElements.length>0">
            <div v-for="(it, idx) in pointElements" :key="idx" :class="(selPoint?.spId || 0) == it.spId ? 'active' : ''"
              class="title-item" @click="selPoint = it">
              {{ it.spName }}
            </div>
          </div>
          <div style="padding: 10px" class="mon-point-info"  v-if="pointElements && pointElements.length>0">
            <div class="mon-title">监测点数据</div>
            <div v-if="selPoint" class="pt-item-line">
              <div class="glr-title mon-point-title" style="margin-top: 10px">
                {{ selPoint.spName }}
              </div>
              <el-row>
                <el-col :span="12">
                  <div class="pt-label">X方向位移</div>
                  <div>
                    <span class="pt-val">{{selPoint.displace?selPoint.displace.toFixed(3):"-" }}</span>
                    <span class="pt-unit">mm</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="pt-label">Y方向位移</div>
                  <div>
                  <span class="pt-val">{{selPoint.displace2?selPoint.displace2.toFixed(3):"-" }}</span>
                  <span class="pt-unit">mm</span></div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="pt-label">X方向累计变化量</div>
                  <div>
                    <span class="pt-val">{{selPoint.totalize?selPoint.totalize.toFixed(3):"-" }}</span>
                    <span class="pt-unit">mm</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="pt-label">Y方向累计变化量</div>
                  <div>
                    <span class="pt-val">{{selPoint.totalize2?selPoint.totalize2.toFixed(3):"-" }}</span>
                    <span class="pt-unit">mm</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="pt-label">X方向单次变化量</div>
                  <div>
                    <span class="pt-val">{{selPoint.variation?selPoint.variation.toFixed(3):"-" }}</span>
                    <span class="pt-unit">mm</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="pt-label">Y方向单次变化量</div>
                  <div>
                    <span class="pt-val">{{selPoint.variation2? selPoint.variation.toFixed(3):"-"}}</span>
                    <span class="pt-unit">mm</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="pt-label">X方向变化速率</div>
                  <div>
                    <span class="pt-val">{{selPoint.changeRate?selPoint.changeRate.toFixed(3):"-" }}</span>
                    <span class="pt-unit">mm/d</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="pt-label">Y方向变化速率</div>
                  <div>
                    <span class="pt-val">{{selPoint.changeRate2?selPoint.changeRate2.toFixed(3):"-" }}</span>
                    <span class="pt-unit">mm</span>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div v-else class="div-no-data" style="padding-top: 100px">
              <img src="images/nodata.png" style="width: 120px" />
              <div style="text-align: center; font-size: 12px; color: #888">
                暂无数据
              </div>
            </div>
          </div>
        </module-one-2-1>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <module-one-1-2 label="基坑变化趋势" style="position: relative">
          <div style="position: absolute; right: 0px; top: 4px">
            <el-date-picker class="bg-date-picker" v-model="selDate" type="daterange" popper-class="bg-date-picker-pop"
              :editable="false" @change="dtChange" :picker-options="pickerOptions" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </div>

          <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 chart-nav">
              <div :class="btnNav == 0 ? 'active' : ''" @click="onClickPoint(0)">
                X位移
              </div>
              <div :class="btnNav == 1 ? 'active' : ''" @click="onClickPoint(1)">
                X累计变化量
              </div>
              <div :class="btnNav == 2 ? 'active' : ''" @click="onClickPoint(2)">
                X单次变化量
              </div>
              <div :class="btnNav == 3 ? 'active' : ''" @click="onClickPoint(3)">
                X变化速率
              </div>
              <div :class="btnNav == 4 ? 'active' : ''" @click="onClickPoint(4)">
                Y位移
              </div>
              <div :class="btnNav == 5 ? 'active' : ''" @click="onClickPoint(5)">
                Y累计变化量
              </div>
              <div :class="btnNav == 6 ? 'active' : ''" @click="onClickPoint(6)">
                Y单次变化量
              </div>
              <div :class="btnNav == 7 ? 'active' : ''" @click="onClickPoint(7)">
                Y变化速率
              </div>
            </div>
            <div class="trend-chart-max" :key="charElIdx">
              <trend-line-chart :height="220" :chartdata="CollWeiyiPointData" :data="CollWeiyiPointData.data"
                :fn="setChartOpt"></trend-line-chart>
            </div>
          </div>
        </module-one-1-2>
      </el-col>
      <el-col :span="12">
        <module-one-1-2 label="测点统计">
          <div  class="pt-list  scroll">
           <div v-for="(it,idx) in pointElements" :key="idx" class="pt-item">
            <div class="pt-icon"><i class="el-icon-tickets"></i></div>
              <div class="pt-name">{{ it.spName }}</div>
              <div class="pt-deptname">{{ it. deptName}}</div>
              <div class="pt-type">位移</div>
              <div class="pt-data">
                <span class="pt-data-type">X: </span>
                <span class="pt-data-val">{{ it.displace?it.displace.toFixed(3):"-" }}</span>
                <span class="pt-data-unit">mm</span>
              </div>
              <div class="pt-data">
                <span class="pt-data-type">Y: </span>
                <span class="pt-data-val">{{ it.displace2?it.displace2.toFixed(3):"-" }}</span>
                <span class="pt-data-unit">mm</span>
              </div>            
           </div>
          </div>
        </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";
import debounce from "lodash.debounce";
import enginChart from "../engin/enginChart.vue";
export default {
  //基坑
  name: "JhbigscreenExcavation",
  components: { enginChart },
  data() {
    return {
      projectInfo: {},
      dept: {},
      prjs: [],
      monitDays:0,
      selPoint: null,
      monTotal: 0,
      onlineDevTotal: 0,
      classifyBarData: [],
      todayTotal: 10,
      weekTotal: 99,
      warningType: [],
      warningTypeInterval: undefined,
      warningTypeIndex: 0,
      urlImgBgd: "",
      forBitMappedImageData: [],
      forBitMappedImageDataPJ: [],
      legendArrData: [],
      popupShow: false,
      popupPosition: {},
      pointPositionName: "",
      popupArrData: [],
      offLine: true,
      loading: false,
      btnNav: 0,
      CollWeiyiPointData: {
        dataX: [],
        legend: [],
        data: [],
      },
      charElIdx: 0,
      pointElements:[],
      pointData: [],
      selDate: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },

  mounted() {
    let dt1 = this.$dt(+new Date() - 7 * 24 * 3600 * 1000);
    let dt2 = this.$dt(new Date());
    this.selDate = [dt1, dt2];

   
    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_weiyi.png","text":"位移"}]'
    );

    this.pointData = "1,2,3,4,5,6,7,8".split(",").map((d) => {
      //,9,10,11,12,13,14,15,16,17
      return {
        id: d,
        name: "监测点0" + (d < 10 ? "0" + d : "" + d),
        pN: "-14",
        pE: "-0.4",
        pZ: "-0.2",
        sedD: "-0.2",
        sedM: "12",
        sedS: "A",
        disD: "1.5",
        disM: "12",
        disS: "A",
        ratD: "0.23",
        ratM: 12,
        ratS: "D",
      };
    });
    this.selPoint = this.pointData[0];
    this.init();
    this.$bus.$on(
      "projectChange",
      debounce((res) => {
        this.projectInfo = res;
        this.dept = this.$root.dept || this.dep || {};
        this.prjs = this.$root.projects || this.prjs || [];
        this.loadData();
      })
    );
    if (this.$root.hasInitHeader) {
      this.initMe();
    }
  },

  methods: {
    getPtImg(it){
      return it.isOnline? "images/place_weiyi_green.png": "images/place_weiyi_grey.png";
    },
    getWarnLevel(lvl){
      return ["正常","超预警值","超报警值","超控制值"][lvl];
    },
    setChartOpt(opt) {//重写图表
      if (!this.CollWeiyiPointData.ok) {
        return opt;
      }
      let objs = this.CollWeiyiPointData.obj;
      let titles = ['X方向位移(mm)', 'X方向累计变化量（mm）', 'X方向单次变化量（mm）', 'X方向变化速率（mm/d）', 'Y方向位移（mm）', 'Y方向累计变化量（mm）', 'Y方向单次变化量（mm）', 'Y方向变化速率（mm/d）'];
      let field = ['displace', 'totalize', 'variation', 'changeRate', 'displace2', 'totalize2', 'variation2', 'changeRate2'];
      let o = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#57617B",
            },
          },
        },
        legend: {
          textStyle: {
            color: "#c3dbfd",
          },
          data: objs.map(it => it[0].spName),
          type: "scroll",
          animation: false,
          left: "30",
          right: "20",
          selected: [],
        },
        grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
        toolbox: { top: "6%", feature: { saveAsImage: {} } },
        dataZoom: [{ type: "slider", show: true }, { type: "inside" }],
        xAxis: {
          type: "time",
          axisLabel: {
            textStyle: {
              color: "#c5d9fc",
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#25597e",
              type: "dashed",
            },
          },
        },
        yAxis: {
          name: titles[this.btnNav],
          nameTextStyle: {
            color: "#fff",
            fontSize: 14,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#c5d9fc",
            },
          },
        },
        series: objs.map(it => {
          return {
            name: it[0].spName,
            type: "line",
            sampling: "max",
            showSymbol: false,
            animation: false,
            data: it.map(item => {
              let tmps = [];
              tmps.push(item.collectTime)
              tmps.push("" + item[field[this.btnNav]])
              return tmps;
            })
          }
        })
      };
      return o;
    },
    initMe() {
      this.projectInfo = this.$root.project || {};
      this.dept = this.$root.dept || {};
      this.prjs = this.$root.projects || [];
      this.loadData();
    },
    dtChange() {//加载图表数据
      let postData = {
        projectId: this.projectInfo.id,
        createTime: this.$dt(this.selDate[0]).format("YYYY-MM-DD HH:mm:ss"),
        updateTime: this.$dt(this.selDate[1]).format("YYYY-MM-DD HH:mm:ss"),
        dataType: "horizontal",
      };
      this.$api.pitmonit.selectByDate(postData).then((d) => {
        let obj = {};
        (d.data || []).forEach(it => {
          let name = it.spName;
          if (obj[name]) {
            obj[name].push(it);
          } else {
            obj[name] = [it];
          }
        });
        let tmps = [];
        for (let k in obj) {
          tmps.push(obj[k]);
        }
        this.CollWeiyiPointData = {
          dataX: [],
          legend: [],
          data: [],
          obj: tmps,
          ok: true
        };
        this.charElIdx++;
      });
    },
    loadData() {
      this.dtChange();
      let ajaxs = [
        this.$api.pitmonit.totalCount(this.projectInfo.id),       
        this.$api.pitmonit.getLastDataForElement(this.projectInfo.id),
        this.$api.pitmonit.monitDays(this.projectInfo.id),
        this.$api.pitmonit.alarmList(this.projectInfo.id),
      ];
      this.$api.http.all(ajaxs).then((res) => {
        this.monTotal = res[0].data.dev || 0;
        this.onlineDevTotal = res[0].data.data || 0;
        const spDate = (dt) => {
          let dt1 = this.$dt(this.$dt(new Date()).format("YYYY-MM-DD")).$d;
          let dt2 = this.$dt(dt).$d;
          return ((dt1 - dt2) * 1.0) / 1000 / 3600 / 24;
        };
        let pts = res[1].data.filter((d) => d.dataType == "horizontal").map(d=>{
          d.isOnline=d.collectTime && spDate(d.collectTime) < 3;
          d.pt=JSON.parse(d.remark||"{}");
          d.top=d.pt.x||0;
          d.left=d.pt.y||0;
          return d;
        });
        this.pointElements=pts;
        if(pts.length>0){
          this.selPoint=pts[0];
        }
        let total = pts.length;
        let onLine = pts.filter(d=>d.isOnline).length;
        this.classifyBarData = [
          {
            name: "水平位移",
            total: total,
            yesMonitor: onLine,
            notMonitor: total - onLine,
            unit: "个",
          },
        ];
        this.monitDays=res[2].data||0;
        this.showAlarmList(res[3].data||[]);
      });
    },
    showAlarmList(datas){
      this.warningType=datas;
    },
    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;
      this.dtChange();
    },
  },
};
</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%;
  }

  .mon-time-row1 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;

    .time-img {
      height: 120px;
    }

    .time-info {
      text-align: center;
      line-height: 40px;
    }
  }

  .sjk-chart-line-title.mon-points {
    display: block;
    max-height: 60px;
    overflow-y: auto;

    .title-item {
      display: inline-block;
      cursor: pointer;
      font-size: 9px;
    }
  }

  .sjk-chart-line-title.chart-nav {
    div {
      font-size: 12px;
      padding: 5px 16px;
      font-weight: bold;
    }
  }

  .mon-point-info {
    .mon-title {
      border-bottom: dotted 1px #918c8c;
      line-height: 24px;
      font-size: 14px;
      font-weight: bold
    }

    .mon-point-title {
      color: #51b5ff;
    }
    .pt-item-line{
      .el-row{
        margin-top:8px;
      .el-col{
        div{
          text-align: center;
          line-height: 30px;
        }
        .pt-label{
          font-size:16px;
          font-weight: bold;
          color:#B3E5FC;
        }
        .pt-val{
          font-size:20px;
          font-weight: bold;
          color:#03CCE0;
        }
      }
    }
    }
    
  }
  .pt-list{
    width:100%;
    overflow-x: auto;
    display: block;
    white-space: nowrap;
    padding:20px;
    .pt-item{
      width:140px;
      display: inline-block;
      background-color: #042457;
      background: linear-gradient(0deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 98%, rgba(0, 219, 255, 1) 70%);
      border: #042457 solid 1px;
      border-radius: 5px;
      margin-left:20px;
      height: 220px;
      vertical-align: middle;
      padding: 10px;
        text-align: center;
      &:first-child{
        margin-left: 0px;        
      }
      line-height: 24px;
      font-size: 12px;
      .pt-icon{
        font-size:30px;
        color:#5bf8b5;
        margin-top:10px;
      }
      .pt-name{
        margin-top:8px;
        font-size:14px;
        font-weight:bold;
      }
      .pt-deptname{
        font-size: 12px;
        white-space: break-spaces;
        padding: 0px 0px;
        line-height: 20px;
        color:#e2e2e369;
        height: 40px;
      }
      .pt-data{
        margin-top:8px;
        .pt-data-type{
          font-size:18px;
          color:#03CCE0;
        }
        .pt-data-val{
          font-size:18px;
          color:#03CCE0;
        }
      }
    }
  }
  .analyse-number-max{   
    height:200px;
    .warn-item{
      font-size:12px;
      color: #51b5ff;
      padding:10px;
      border-bottom: dotted 1px #042457;
      line-height: 22px;
      .sp-label{
        color: #5bf8b5;
        display: inline-block;
        width: 80px;
        text-align: right;
        &::after{
          content: ":";   
          display: inline-block;
          padding:0px 2px;      
        }
      }
      .sp-data{
        &.sp-level-0{
          color: #FFEBEE;
        }
        &.sp-level-1{
          color: #EF9A9A;
        }
        &.sp-level-2{
          color: #EF5350; 
        }
        &.sp-level-3{
          color: #D32F2F;
        }
      }
    }
  }
  .sjk-icon-max{
    .icon-img{
      position:absolute;
      cursor: pointer;
      &:hover{
        img{
          width:40px;
        }
        .spot-text{
          left:8px;
          color:#51b5ff;
        }
      }
      img{
        width:30px;
      }
      .spot-text{
        position: absolute;
        font-size:10px;
        font-weight: bold;
        color:#fff;
        text-shadow: 1px 1px 2px #010b2d;
        left:4px;
        top:40px;
      }
      
    }
  }
}
.pit-spot-node-pop{
  .spot-info{
        .pt-data{
        margin-top:8px;
        .pt-data-type{
          font-size:16px;
          color:#03CCE0;
        }
        .pt-data-val{
          font-size:16px;
          color:#03CCE0;
          margin-right:4px;
        }
      }
      }
}
</style>
