<template>
  <div class="content" :style="zoom">
    <div class="header">
      <div class="title"> <img src="@/assets/images/组_16@2x.png" /> 南宁北排综合生产数据平台</div>
      <div class="right">
        <span>{{ timestring }}</span>
        <el-dropdown>
          <span>{{ getters.nickName }}</span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="gobg">进入后台</el-dropdown-item>
              <el-dropdown-item @click="logout">退出系统</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <img src="@/assets/images/矩形_1@2x.png" style="position:absolute;left:0;bottom:-6px;height:6px" />
      <img src="@/assets/images/矩形_1_拷贝_2@2x.png" style="position:absolute;right:16%;bottom:-6px;height:6px" />
      <img src="@/assets/images/矩形_1_拷贝@2x.png" style="position:absolute;left:27%;bottom:0px;height:6px" />
      <img src="@/assets/images/直线_1_拷贝@2x.png" style="position:absolute;left:10%;bottom:-6px;height:1.5px" />
      <img src="@/assets/images/直线_1_拷贝@2x.png" style="position:absolute;right:0px;bottom:-6px;height:1.5px" />


    </div>
    <div class="body">
      <el-row>
        <el-col :span="5">
          <div>
            <div class="titlep">
              人员动态
            </div>
            <div class="contentp">
              <el-table :row-class-name="tableRowClassName"  @select="(e, e1) => { return false; }" :data="sjrydata" header-row-class-name="tblheaderclass"
                style="width: 100%;" height="240">
                <el-table-column prop="params.deptname" label="班组" width="103" />
                <el-table-column prop="params.username" label="人员" />
                <el-table-column label="事件">
                  <template #default="scope">
                    <span>{{ `${scope.row.taskCode}` }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div>
            <div class="titlep">
              降雨监测
            </div>
            <div class="contentp">
              <el-table :row-class-name="tableRowClassName"  :highlight-current-row="false" :data="weatherdata" header-row-class-name="tblheaderclass"
                style="width: 100%;" height="240">
                <el-table-column prop="fxDate" label="日期" width="103" />
                <el-table-column prop="textDay" label="天气" />
                <el-table-column label="温度">
                  <template #default="scope">
                    <span>{{ `${scope.row.tempMin}~${scope.row.tempMax}℃` }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="precip" label="降雨量">
                  <template #default="scope">
                    <span>{{ scope.row.precip }}mm</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div>
            <div class="titlep">
              年度任务状况
            </div>
            <div class="contentp">
              <el-table :row-class-name="tableRowClassName" :data="ndrwdata" header-row-class-name="tblheaderclass"
                style="width: 100%;" height="240">
                <el-table-column prop="xh" label="序号" width="60" />
                <el-table-column prop="name" label="项目" width="100" />
                <el-table-column label="数量">
                  <template #default="scope">
                    <span>{{ `${scope.row.number}` }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="unit" label="单位" />
                <el-table-column prop="wc" label="完成率" />
              </el-table>
            </div>
          </div>
        </el-col>
        <el-col :span="14">
          <div class="map">
            <Map v-model="map" style=""></Map>
            <div style="position:absolute;padding:10px;top:10px;left:90px;background:rgba(0,0,0,0.6)">
              <el-radio-group v-model="currentselect" @change="changemapshow">
                <el-radio-button label="全部"></el-radio-button>
                <el-radio-button label="已完成"></el-radio-button>
                <el-radio-button label="未完成"></el-radio-button>
              </el-radio-group>
            </div>
          </div>

          <div class="mapbottom">
            <div>
              <div class="number">{{datapctj[0]}}</div>
              <div class="des">在线单元/组</div>
            </div>
            <div>
              <div class="number">{{datapctj[1]}}</div>
              <div class="des">今日热线量/件</div>
            </div>
            <div>
              <div class="number">{{datapctj[2]}}</div>
              <div class="des">今日养护设施/km</div>
            </div>
            <div>
              <div class="number">{{datapctj[3]}}</div>
              <div class="des">今日核查设施/km</div>
            </div>

          </div>
        </el-col>
        <el-col :span="5">
          <div>
            <div class="titlep">
              月度热线量
            </div>
            <div class="contentp">
              <div id="chart1" style="width:100%;min-height:251px"></div>
            </div>
          </div>
          <div>
            <div class="titlep">
              月度设施核查量
            </div>
            <div class="contentp">
              <div id="chart2" style="width:100%;min-height:251px"></div>
            </div>
          </div>
          <div>
            <div class="titlep">
              月度设施养护量
            </div>
            <div class="contentp">
              <div id="chart3" style="width:100%;min-height:251px"></div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>


  </div>
</template>
<script setup>
import { ref, computed } from "vue";
// @ts-ignore
import moment from 'moment/min/moment-with-locales';
// @ts-ignore
import Map from '@/components/MapView';
import { ElMessageBox } from 'element-plus'

// @ts-ignore
import { getweatherdata, getrenyuandata, getyanghuyeardata, gettongjidata, getdata } from "@/api/system/config"
import * as echarts from 'echarts';
// @ts-ignore
import { isNumber } from "@vueuse/shared";

const map = ref(null);
// @ts-ignore
const store = useStore();
const getters = computed(() => store.getters);

const weatherdata = ref([]);
const sjrydata = ref([])
const ndrwdata = ref([])
const currentselect = ref("全部");
let overlayGroups = null;
let alltask = [];
let currenttask = [];
let infoWindow = null;
const datapctj = ref([0, 0, 0, 0]);

const gobg = () => {
  location.href = '/';
}
const logout =() =>{
  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    store.dispatch('LogOut').then(() => {
      location.href = '/index';
    })
  }).catch(() => { });
}


const month = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
// @ts-ignore
let taskdata = {
  // @ts-ignore
  total: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  // @ts-ignore
  wc: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
}
// @ts-ignore
let taskdata1 = {
  // @ts-ignore
  total: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  // @ts-ignore
  wc: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
}
// @ts-ignore
let taskdata2 = {
  // @ts-ignore
  total: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  // @ts-ignore
  wc: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
}

// var localLocale = moment();
moment.locale("zh-cn");
const timestring = ref("");

// @ts-ignore
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return 'bgrow1'
  } else if (rowIndex % 2 === 1) {
    return 'bgrow2'
  }
  return ''
}


const zoom = ref("zoom:100%");
var screenWidth = document.body.clientWidth; //监听页面缩放
var screenHeight = document.body.clientHeight;
zoom.value = "zoom:" + (100*screenHeight / 1080) + "%"
window.onresize = () => {
  return (() => {
    screenWidth = document.body.clientWidth;
    screenHeight = document.body.clientHeight;
    zoom.value = "zoom:" + (100*screenHeight / 1080) + "%"
  })();
};
const changemapshow = () => {
  addmarks();
}

function addmarks() {

  var marks = [];
  if (currentselect.value === "全部") {
    currenttask = alltask;
  }
  if (currentselect.value === "已完成") {
    currenttask = alltask.filter(i => i.status == 6);
  }
  if (currentselect.value === "未完成") {
    currenttask = alltask.filter(i => i.status != 6);
  }

  for (var index in currenttask) {
    if (currenttask[index].taskLocation == undefined || currenttask[index].taskLocation==null) continue;

    var marker = new AMap.Marker({
      position: JSON.parse(`[${currenttask[index].taskLocation}]`),
      map: window.map,
      icon: new AMap.Icon({
        size: new AMap.Size(25, 25),    // 图标尺寸
        image: currenttask[index].status == 6 ? '/map-marker-green.png' : '/map-marker-red.png',
        // imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等
        imageSize: new AMap.Size(25, 25)   // 根据所设置的大小拉伸或压缩图片
      })

    });
    marker.content = currenttask[index];
    marker.on('click', markerClick);
    marker.emit('click', { target: marker });
    marks.push(marker);
  }


  function markerClick(e) {
    // console.log(e.target)
    var info = document.createElement("div");
    // info.style.background = "rgba(0,0,0,0.6)";
    info.style.color = "black";
    info.innerHTML = (`${e.target.content.params.data}`);
    if (infoWindow == null) { infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, 0) }); }
    infoWindow.setContent(info);
    infoWindow.open(window.map, e.target.getPosition());
  }


  if (overlayGroups != null) {
    window.map.remove(overlayGroups);
  }
  overlayGroups = new AMap.OverlayGroup(marks);
  window.map.add(overlayGroups);
}
{








  function setdata() {


    setTimeout(() => {
      // @ts-ignore
      var myChart = echarts.init(document.getElementById('chart1'));
      myChart.setOption({
        xAxis: {
          type: 'category',
          data: month
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: taskdata.total,
            type: 'line'
          },
          {
            data: taskdata.wc,
            type: 'line'
          }

        ]
      });

      // @ts-ignore
      var myChart2 = echarts.init(document.getElementById('chart2'));
      var sourcex = [['zt',"总数","完成"]];
      for (var index = 0; index < 12; index++) {
        sourcex.push([month[index],taskdata2.total[index], taskdata2.wc[index]])
      }
      myChart2.setOption({
        legend: { left: 'right' },
        tooltip: {},
        dataset: {
          source: sourcex
        },
        xAxis: { type: 'category' },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: 'bar' }, { type: 'bar' }]
      });

      // @ts-ignore
      var myChart3 = echarts.init(document.getElementById('chart3'));


      // function random(min, max) {
      //   return parseInt(Math.random() * (max - min) + min);
      // }

      // @ts-ignore
      var barWidth = 10
      // @ts-ignore
      var imgurl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAqAAAABECAYAAABedod4AAAAAXNSR0IArs4c6QAACZlJREFUeF7t3U9oG2cax/HnkUS2xIj2sj21h9Iem2N7XuNilq0vwdjJwVDHGsn0HMuhsAdDD8GSfA6xZuQYcogjSi52KGGLc9pDc0yOCT4ksJBcEoTDxkh6ilJvN7uJY2s00vz75up5n/d5PjOHHwHxqKT4X2HJ/dJUb6vKpylmYHQEEEAAAQQQCEHARJYalcJaCFeHfqWG3kFIDcxf3Pgqk+neUZWPQmqBaxFAAAEEEEAg7QJmNa/qlNPGkMoAWrjkfmtd3VKVsbS9cOZFAAEEEEAAgWgJmEi9USmUotXVcLtJXQAtlF1HVK6IaG64tFRHAAEEEEAAAQROJmAiN1p7+blmc7ZzshPxfipVAXRh2buoIrV4vzK6RwABBBBAAIEkCpjJdmssP91cmT1I4nxvzpSaAFoou1VRXUr6C2U+BBBAAAEEEIivgIns5rR9dn118UV8pzi+88QH0JmZm9n8Z63rKnL+eA6eQAABBBBAAAEEwhUwkfuW1YmNywvPwu1keLcnOoCWVq6ebu/nej82mhoeIZURQAABBBBAAIGgBeyhio27leKToCtHoV5iA2jp0tUPO5a9I6JfRwGaHhBAAAEEEEAAgX4EzORxR7Ljm9X5R/2ci8OziQygznL9k65kbqvImTi8BHpEAAEEEEAAAQTeJWAmT9Vswqs5D5IklLgA+l352udZ6eyy3ShJnymzIIAAAgggkF4BM3mese5Zt1a8mxSFRAXQw+1G26rycVJeEHMggAACCCCAAAJi9koyMu2tOjtJ0EhMAGW7URI+R2ZAAAEEEEAAgaMFrK1mc261uBV3pUQEUKdcP2eq19luFPfPkf4RQAABBBBA4H0CZmIqVvKqjhtnqdgH0N52IzGpqkrsZ4nzh0TvCCCAAAIIIDA6ARNZalQKa6O7MdibYh3a2G4U7MdANQQQQAABBBCIkYBZzas65Rh1/EersQygh9uNrqhIMY7o9IwAAggggAACCAQhYCL11l7++2ZzthNEvVHViF0AnVm5eSq/3/qJ7Uaj+kS4BwEEEEAAAQSiLGAm262x/HRzZfYgyn2+2VusAmhvu1HbcrdUZDwuwPSJAAIIIIAAAggMW8BEdnOn21PrK4svh31XEPVjE0DZbhTE66YGAggggAACCCRXwH7NamdyfXXxRdRnjEUAZbtR1D8j+kMAAQQQQACBKAiYyH3L6sTG5YVnUejnqB4iH0DZbhTlz4feEEAAAQQQQCB6Avawbbm/blbnH0Wvt987inQAdZbqf+lqprdacyyqgPSFAAIIIIAAAghETcBMnqrZhFdzHkStt0gH0NfbjUQ3RfVPUYSjJwQQQAABBBBAIMoCZvK8281MXlu7cC9qfUbyf0ALZdcx0XW2G0Xtc6EfBBBAAAEEEIiTgJnsZ6w75daKd6PUd+QCaKHs/l1Uf4wSEr0ggAACCCCAAAKxFTB7JRmZ9ladnajMEKkAurDsrbPdKCqfBn0ggAACCCCAQHIErK1mc261uBWFmSIRQF9vN3rZ2lSR81FAoQcEEEAAAQQQQCBpAmZiolJuVAprYc8WegBlu1HYnwD3I4AAAggggECqBMxqXtUphzlzqAH0wg+NP2vHflGRM2EicDcCCCCAAAIIIJAmAROpNyqFUlgzhxZAe9uNctr+WUS/CGt47kUAAQQQQAABBNIqYCI3Wnv5uWZztjNqg1ACaGHJ/dJUf1GVj0c9MPchgAACCCCAAAII/C5gJtutsfx0c2X2YJQmIw+gh9uNbqnKR6MclLsQQAABBBBAAAEE3hYwkd2cts+ury6+GJXPSANo4ZL7rXTlJ7Ybjer1cg8CCCCAAAIIIHC8gInct6xObFxeeHb804M/MbIA2ttuJCpXRDQ3eNtUQAABBBBAAAEEEAhWwB6q2LhbKT4Jtu7b1UYSQNluNOzXSH0EEEAAAQQQQGBwATN53JHs+GZ1/tHg1Y6uMPQAynajYb4+aiOAAAIIIIAAAsEKmMlTNZvwas6DYCv/t9rQAijbjYb1yqiLAAIIIIAAAggMV8BMnne7mclraxfuDeOmoQTQ0srV0+2XuW0VGR9G09REAAEEEEAAAQQQGK6Amexrxs55q85O0DcFHkB7240yne62iH4ddLPUQwABBBBAAAEEEBilgLXVbM6tFreCvDXQAOos1z8x0V22GwX5iqiFAAIIIIAAAgiEJ2AmpmIlr+q4QXURWAA93G50W1U+Dao56iCAAAIIIIAAAghEQ8BElhqVwloQ3QQSQOcvbnyVyXTvsN0oiFdCDQQQQAABBBBAIKICZjWv6pQH7W7gANrbbmRd3VKVsUGb4TwCCCCAAAIIIIBAtAVMpN7ay3/fbM52/HY6UABlu5Ffds4hgAACCCCAAALxFTCT7dZYfrq5MnvgZwrfAXRh2buoIjU/l3IGAQQQQAABBBBAIN4CJrKbO92eWl9ZfNnvJL4CaKHsVkV1qd/LeB4BBBBAAAEEEEAgSQL2a1Y7k+uriy/6maqvADozczOb/6x1XUXO93MJzyKAAAIIIIAAAggkU8BE7ltWJzYuLzw76YQnDqCvtxvt53o/Npo6aXGeQwABBBBAAAEEEEiDgD1UsXG3UnxykmlPFEBLl65+2LHsHbYbnYSUZxBAAAEEEEAAgfQJmMljNfubV3MeHDf9sQG0t92oK5nbKnLmuGL8HQEEEEAAAQQQQCC9AmbyvNvNTF5bu3DvfQrvDaBsN0rvB8TkCCCAAAIIIICAHwEz2c9Yd8qtFe8edf7IAMp2Iz/knEEAAQQQQAABBBAQs1eSkWlv1dl5l8Y7AyjbjfhwEEAAAQQQQAABBAYTsLaazbnV4tb/13krgDrl+jlTvS6iucEu5TQCCCCAAAIIIIBAmgXMxESl3KgU1t50+J8A2ttuJCZVVTn2x0lpxmR2BBBAAAEEEEAAgT4EzGpe1Sn/58QfQZPtRn0g8igCCCCAAAIIIIBAXwImUm9UCqXeIT3cbnRFRYp9VeFhBBBAAAEEEEAAAQT6EDCRG629/Jz+ULn1478PDr7p4yyPIoAAAggggAACCCDgS+CDU6f+oTv//Jf5Os0hBBBAAAEEEEAAAQR8CBBAfaBxBAEEEEAAAQQQQMC/AAHUvx0nEUAAAQQQQAABBHwIEEB9oHEEAQQQQAABBBBAwL8AAdS/HScRQAABBBBAAAEEfAgQQH2gcQQBBBBAAAEEEEDAvwAB1L8dJxFAAAEEEEAAAQR8CBBAfaBxBAEEEEAAAQQQQMC/AAHUvx0nEUAAAQQQQAABBHwI/AbKakVYTFSz7QAAAABJRU5ErkJggg=='
      //背景图片不接受百分比，只接受数值，获取图表的宽度实现动态背景宽度
      // @ts-ignore
      var imgwidth = myChart.getWidth()

      let xData = month,
        yData = taskdata1.wc,
        barData = taskdata1.wc, maxData = taskdata1.total;

      var option = {
        backgroundColor: 'rgb(0, 16, 58)',
        grid: {
          top: '10%',
          left: '5%',
          bottom: '5%',
          right: '5%',
          containLabel: true,
        },
        tooltip: {
          trigger: 'item',
        },
        animation: false,
        xAxis: [
          {
            show: true,
            type: 'category',
            data: xData,
            axisTick: {
              alignWithLabel: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: '#fff',
              },
              margin: 10,
            },
            interval: 1,
          },
        ],

        yAxis: [{
          splitLine: {
            lineStyle: {
              color: '#ffffff4C',
              type: 'solid'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#ffffff4C',
              type: 'solid'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: '12'
            },
          }
        }],
        series: [
          {
            name: '上部圆',
            type: 'pictorialBar',
            silent: true,
            symbolSize: [barWidth, barWidth / 4],
            symbolOffset: [0, -1 * barWidth / 6],
            symbolPosition: 'end',
            z: 20,
            zlevel: 10,
            data: maxData,
            itemStyle: {
              color: '#52efff',
              opacity: 0.3,
            }
          },
          {
            name: '底部圆',
            type: 'pictorialBar',
            silent: true,
            symbolSize: [barWidth, barWidth / 4],
            symbolOffset: [0, barWidth / 6],
            z: 11,
            // color: '#5BFCF4',
            data: yData,
            itemStyle: {
              color: '#5BFCF4',
            }
          },
          {
            name: '总数',
            type: 'bar',
            barWidth: barWidth,
            barGap: '10%', // Make series be overlap
            barCateGoryGap: '10%',
            z: 16,
            itemStyle: {
              normal: {
                color: '#0788ff',
                opacity: 0.2,
              },
            },
            data: maxData,
          },
          {
            name: '完成数',
            type: 'bar',
            barWidth: barWidth,
            z: 19,
            barGap: '-100%',
            itemStyle: {
              // opacity: 0.7,
              color: function (params) {
                return new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#028cf3', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#0bc2ff', // 100% 处的颜色
                    },
                  ],
                  false
                );
              },
            },
            data: barData,
          },
          {
            name: '上部圆',
            type: 'pictorialBar',
            silent: true,
            symbolSize: [barWidth, barWidth / 4],
            symbolOffset: [0, -1 * barWidth / 6],
            symbolPosition: 'end',
            z: 22,
            color: '#52efff',
            data: barData,
          },
          {
            name: '底部圆',
            type: 'pictorialBar',
            silent: true,
            symbolSize: [barWidth, barWidth / 4],
            symbolOffset: [0, barWidth / 6],
            z: 21,
            itemStyle: {
              color: 'rgb(0,134,234)'
            },
            data: barData,
          },
        ],
      };


      myChart3.setOption(option);



    }, 1000);
  }
  getweatherdata().then(res => {
    weatherdata.value = res.data.daily
  })
  getrenyuandata().then(res => {
    sjrydata.value = res.data
  })
  getyanghuyeardata().then(res => {

    ndrwdata.value = [];
    const dcf = async () => {
      if (res.data) {
        var indexc = 0;
        for (var key in res.data) {
          let tj = { "xh": (++indexc) + "", "name": "-", "number": "0", "unit": "-", "wc": "0%" }
          tj.name = key;
          //统计计划的
          var ism = (key.indexOf("检查井") != -1 || key.indexOf("雨水口") != -1) ? false : true

          var listc = res.data[key];
          if (listc && listc.length>0) {

            var total = 0;
            var wctotal = 0;
            for (var index in listc) {
              var dc = JSON.parse(listc[index].ext1);
              try {
                if (!ism) {
                  if (key.indexOf("检查井") != -1) {
                    total = !isNaN(Number(dc.task.jcj)) ? Number(dc.task.jcj) : 0;
                  }
                  if (key.indexOf("雨水口") != -1) {
                    total = !isNaN(Number(dc.task.ysk)) ? Number(dc.task.jcj) : 0;
                  }

                } else {

                  await Promise.all(dc.task.gd.map(i => { var l = !isNaN(Number(i.yh_length)) ? Number(i.yh_length) : 0; total += l;   return l; }));
                }




                //筛选最新
                if (listc[index].maintainLogs != undefined) {
                  var templist = {};
                  var list = listc[index].maintainLogs;
                  for (var i in list) {
                    var log = list[i];
                    if (templist.hasOwnProperty(log.maintainStatus + "")) {
                      if (
                        moment(templist[log.maintainStatus + ""].createTime).unix() -
                        moment(log.createTime).unix() <
                        0
                      ) {
                        templist[log.maintainStatus + ""] = log;
                      }
                    } else {
                      templist[log.maintainStatus + ""] = log;
                    }
                  }
                  if (templist.hasOwnProperty(4 + "")) {

                    var cc = JSON.parse(templist["4"].logDes).wcgzl;
                    if (cc != undefined) {
                      for (var jk in cc) {
                        if (jk != "default") {
                          await Promise.all(cc[jk].gd.map(i => { var l = !isNaN(Number(i.yh_length)) ? Number(i.yh_length) : 0; wctotal += l; return l; }))
                        }
                      }

                    }

                  }



                }
                if (listc[index].detectionLogs != undefined) {
                  var templist = {};
                  var list = listc[index].detectionLogs;
                  for (var i in list) {
                    var log = list[i];
                    if (templist.hasOwnProperty(log.detectionStatus + "")) {
                      if (
                        moment(templist[log.detectionStatus + ""].createTime).unix() -
                        moment(log.createTime).unix() <
                        0
                      ) {
                        templist[log.detectionStatus + ""] = log;
                      }
                    } else {
                      templist[log.detectionStatus + ""] = log;
                    }
                  }
                  if (templist.hasOwnProperty(4 + "")) {
                    var cc = JSON.parse(templist["4"].logDes).wcgzl;
                    if (cc != undefined) {
                      for (var jk in cc) {
                        if (jk != "default") {
                          await Promise.all(cc[jk].gd.map(i => { var l = !isNaN(Number(i.yh_length)) ? Number(i.yh_length) : 0; wctotal += l; return l; }))
                        }
                      }
                    }

                  }
                }



              } catch (e) {

              }


            }
            tj.number = wctotal + "";
            tj.unit = ism ? "米" : "座";
            tj.wc = ((wctotal / (total == 0 ? 1 : total)) * 100).toFixed(2) + "%"
          }
          tj.unit = ism ? "米" : "座";
          // @ts-ignore
          ndrwdata.value.push(tj);

        }
      }

    }
    dcf();



    // ndrwdata.value = res.data
  })

  setdata();

  gettongjidata().then(res => {


    if (res.data) {

      if (res.data.task) {
        alltask = res.data.task;
        currenttask = alltask;
        taskdata = {
          // @ts-ignore
          total: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          // @ts-ignore
          wc: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        }

        for (var index in res.data.task) {
          var t = res.data.task[index];
          var m = moment(t.create_time).month();
          taskdata.total[m] += 1;
          if (t.status == 6) {
            taskdata.wc[m] += 1;
          }
        }
      }

      if (res.data.maintain) {
        taskdata1 = {
          // @ts-ignore
          total: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          // @ts-ignore
          wc: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        }

        for (var index in res.data.maintain) {
          var t = res.data.maintain[index];
          var time = JSON.parse(t.ext1 ?? "{}")?.task?.datestart;

          if (time == undefined) continue;
          var m = moment(time).month();
          taskdata1.total[m] += 1;
          if (t.status == 5) {
            taskdata1.wc[m] += 1;
          }
        }
      }

      if (res.data.detection) {
        taskdata2 = {
          // @ts-ignore
          total: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          // @ts-ignore
          wc: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        }

        for (var index in res.data.detection) {
          var t = res.data.detection[index];
          var time = JSON.parse(t.ext1 ?? "{}")?.task?.datestart;
          if (time == undefined) continue;
          var m = moment(time).month();
          taskdata2.total[m] += 1;
          if (t.status == 3) {
            taskdata2.wc[m] += 1;
          }
        }
      }





      setdata();
      setTimeout(() => {
        addmarks();
      }, 1500);

    }

  })


  getdata().then(res => {
    if (res.data) {

      if (res.data.tasklog) {
        datapctj.value[0] = res.data.tasklog.length;
      }
      if (res.data.task) {
        datapctj.value[1] = res.data.task.length;
      }
      if (res.data.maintain) {
        datapctj.value[2] = 0;
        res.data.maintain.map(i => {
          try {
            var cc = JSON.parse(i.logDes);
            if (cc) {
              cc.gd.map(ii => {
                datapctj.value[2]+= (!isNaN(Number(ii.yh_length)) ? Number(ii.yh_length) : 0);
              })
            }
          } catch (e) {
          }
        })

      }
      if (res.data.detection) {

        datapctj.value[3] = 0;
        res.data.detection.map(i => {
          try {
            var cc = JSON.parse(i.logDes);
            if (cc) {
              cc.gd.map(ii => {
                datapctj.value[3] += (!isNaN(Number(ii.yh_length)) ? Number(ii.yh_length) : 0);
              })
            }
          } catch (e) {
          }
        })
      }

    }

  })
  setInterval(() => {
    var localLocale = moment();
    localLocale.locale("zh-cn");
    //YYYY年MM月DD日 ddd A HH:mm:ss
    timestring.value = localLocale.format("LL dddd A LTS")
  }, 1000)



}

</script>
<style lang="scss">
.content {
  .maptable{
    tr{
      td:first-child{
        width: 100px;
        text-align: right;
      }
    }
  }
  .el-table {
    --el-fill-color-blank: rgba(0, 0, 0, 0) !important;
    --el-table-header-bg-color: rgba(0, 0, 0, 0) !important;
    --el-table-border: none;
    --el-table-border-color: rgba(0, 0, 0, 0) !important;
    --el-table-row-hover-bg-color:rgba(0,0,0,0) !important;
    .el-table__header-wrapper th,
      .el-table .el-table__fixed-header-wrapper th{
        background: rgba(0, 0, 0, 0) !important;
      }
    color: #fff;

  }

  --el-table-row-hover-bg-color
  .el-table .el-table__header-wrapper th,
  .el-table .el-table__fixed-header-wrapper th {
    background: rgba(0, 0, 0, 0) !important;
    font-size: 14px;
    color: #BEF8ED;
  }

  background: black;
  width: 100%;
  height: 100%;
  position: fixed;
  color: white;

  .header {
    .title {
      position: absolute;
      bottom: 5px;
      left: 0px;

      img {
        width: 17px;
        height: 14px;
        margin-right: 24px;
        margin-left: 14px;
        vertical-align: middle;
      }
    }

    height: 6%;
    // line-height: 80px;
    position: relative;
    color: #BEF8ED;
    font-size: 30px;
    font-weight: Bold;
    background-image: url("@/assets/images/直线_1@2x.png");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% 1px;

    .right {
      position: absolute;
      right: 10px;
      font-size: 14px;
      bottom: 30%;
      color: #BDBDBD;

      span {
        margin-left: 10px;
        // line-height: 50%;
        color: #BDBDBD !important;
      }
    }
  }

  .body {
    padding: 40px 30px;
    min-height: 94%;

    .titlep {
      height: 29px;
      width: 100%;
      background-image: url("@/assets/images/标题@2x.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% auto;
      padding-left: 15px;
      font-size: 18px;
      font-weight: bold;
    }

    .contentp {
      width: 100%;
      min-height: 251px;
      padding-top: 10px;padding-bottom: 20px;
    }

    .map {
      width: 100%;
      padding: 0px 78px;
      min-height: 768px;
      position: relative;
    }

    .mapbottom {
      padding: 0px 78px;
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;

      >div {
        flex: 1;
        text-align: center;

        .number {
          color: #E7A800;
          font-size: 20px;
          font-weight: bold;
          margin-top: 37px;
        }

        .des {
          background-image: url("@/assets/images/矩形_3_拷贝@2x.png");
          background-repeat: no-repeat;
          background-position: center;
          background-size: 100% 100%;
          font-size: 16px;
          width: 160px;
          height: 30px;
          margin: auto;
          margin-top: 12px;
        }
      }


    }

    background-image: url("@/assets/images/组_16@2x(1).png");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% 20px;
  }

  .tblheaderclass {
    background: rgba($color: #000000, $alpha: 0) !important;
    font-size: 14px;
    color: #BEF8ED !important;
  }

  .bgrow1 {
    background: #131F1C !important;
    font-size: 10px;
  }

  .bgrow2 {
    // background: #131F1C;
    font-size: 10px;
  }
}
</style>
