<!--
 * @FilePath: \screenFront\src\views\Temp\OffsiteDevList\index.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-04-11 13:50:05
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div class="container">
    <div class="header">
      <div class="title">
        <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'再登-东莞产品物联管理系统'" :titleTip="[]"
          :typeFun="['comback', 'time']" :alarmType="[]"></header2>
      </div>
    </div>
    <div class="content" ref="Acontent">
      <el-row>
        <el-col :span="7">
          <left :width="size.oWidth * 7" :height="size.oHeight" ref="leftRef"></left>
        </el-col>
        <el-col :span="11">
          <center :width="size.oWidth * 11" :height="size.oHeight" ref="centerRef"></center>
        </el-col>
        <el-col :span="6">
          <right :width="size.oWidth * 6" :height="size.oHeight" ref="rightRef"></right>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref } from "vue"
import devSwiper from "@/components/EquipmentStatusDiagram/EquipmentStatusDiagram.vue"
import header2 from '@/components/headerBox/header2.vue'
import { calcWH } from '@/components/ts/selfAdaption'
import { Offsite } from "@/store/module/offsite";
import { deviceCountsSecondaryOfOutPlantData, deviceTypeCountsSecondaryOfOutPlantData, deviceStatusCountsSecondaryOfOutPlantData, secondaryOutPlantData } from "@/http/offsite";
import {getElectronDeviceStatus} from "@/http/electronicControl";
import left from "./childContent/left.vue"
import center from "./childContent/center.vue"
import right from "./childContent/right.vue"
import { useRoute, useRouter } from "vue-router";
import { useI18n } from 'vue-i18n'
let { t } = useI18n();
const route = useRoute();
const store = Offsite()
let Acontent = ref()
let time = ref(null)
let routeCity:any = '广东省'
let deptId_list = {
  '广东省': '16',
  '浙江省': '17'
}
let leftRef = ref()
let centerRef = ref()
let rightRef = ref()
let size = reactive({
  oWidth: 0,
  oHeight: 0
});
function WH(div: HTMLElement) {
  let a = calcWH(div.offsetHeight, div.offsetWidth, 1, 24, 0)
  size.oWidth = a.oWidth
  size.oHeight = a.oHeight

}
// 各分公司设备数量(二级)
async function deviceCountsSecondaryOfOutPlantDatafun() {
  let result: any = await deviceCountsSecondaryOfOutPlantData()
  let a = { "code": 200, "msg": null, "data": { "浙江省": [{ "id": "6694a9e0-af40-11ed-939a-bf37ddc1d39c", "name": "浙江展厅wifi网关", "status": "true", "city": "浙江省", "counts": 1 }, { "id": "e307d530-aead-11ed-939a-bf37ddc1d39c", "name": "浙江展厅网关_4G", "status": "true", "city": "浙江省", "counts": 3 }], "广东省": [{ "id": "939863c0-c393-11ed-a742-83feda1d6cb3", "name": "东莞4G网关", "status": "true", "city": "广东省", "counts": 13 }, { "id": "e8a527e0-c393-11ed-a742-83feda1d6cb3", "name": "东莞WiFi网关", "status": "false", "city": "广东省", "counts": 1 }] } }
  if (result.code == 200) {
    // store.setoffsitegatewayStatus(result.data)
  }
}
// 分公司各类型设备数量(二级)
async function deviceTypeCountsSecondaryOfOutPlantDatafun() {
  let result: any = await deviceTypeCountsSecondaryOfOutPlantData()
  let a = { "code": 200, "msg": null, "data": { "浙江省": [{ "deptId": "浙江省", "name": "缝纫", "counts": 1, "gatewayStatus": null }, { "deptId": "浙江省", "name": "绣花", "counts": 1, "gatewayStatus": null }, { "deptId": "浙江省", "name": "裁剪", "counts": 2, "gatewayStatus": null }], "广东省": [{ "deptId": "广东省", "name": "裁剪", "counts": 4, "gatewayStatus": null }, { "deptId": "广东省", "name": "绣花", "counts": 3, "gatewayStatus": null }, { "deptId": "广东省", "name": "缝纫", "counts": 6, "gatewayStatus": null }, { "deptId": "广东省", "name": "版房", "counts": 1, "gatewayStatus": null }] } }
  if (result.code == 200) {
    // store.setoffsitegatewayStatus(result.data)

  }
}
// 分公司设备各种状态的数量(二级)
async function deviceStatusCountsSecondaryOfOutPlantDatafun() {
  let result: any = await deviceStatusCountsSecondaryOfOutPlantData()
  let a = { "code": 200, "msg": null, "data": { "浙江省": [{ "deptId": "浙江省", "name": "false", "counts": 4, "gatewayStatus": null }], "广东省": [{ "deptId": "广东省", "name": "false", "counts": 14, "gatewayStatus": null }] } }
  if (result.code == 200) {
    // store.setoffsitegatewayStatus(result.data)
  }
}
// 分公司二级页面列表
async function secondaryOutPlantDatafun() {
  let a = { "code": 200, "msg": null, "data": { "浙江省": [{ "id": "4817dbe0-b4ef-11ed-939a-bf37ddc1d39c", "label": "RHL23", "name": "富怡全自动缝纫机", "deviceStatus": "false", "machineModel": null, "unit": null, "city": "浙江省", "isExhibition": "是", "deviceType": "缝纫", "model": "RPAS-L-R-1-1200X800-A-IS-VR2-LH50,RH360-1P220", "deptId": "17" }, { "id": "b2cdf1b0-c9dd-11ed-a742-83feda1d6cb3", "label": "0202101#", "name": "富怡电脑精密单头帽绣成衣绣花机", "deviceStatus": "false", "machineModel": null, "unit": null, "city": "浙江省", "isExhibition": "是", "deviceType": "绣花", "model": "RPCE-NM-TC-1-400x450-LB-F15-VR1-NA-1P220", "deptId": "17" }, { "id": "c462aa50-b4ee-11ed-939a-bf37ddc1d39c", "label": "10410100", "name": "富怡模板铣切机", "deviceStatus": "false", "machineModel": null, "unit": null, "city": "浙江省", "isExhibition": "是", "deviceType": "裁剪", "model": "RPFP-NM-PD+DKC+TC-1-1300X1000-SGAF-P+K+MC2-NA-1P220", "deptId": "17" }, { "id": "ffc09bb0-c921-11ed-a742-83feda1d6cb3", "label": "050916#", "name": "富怡全自动针梭通用铺布机", "deviceStatus": "false", "machineModel": null, "unit": null, "city": "浙江省", "isExhibition": "是", "deviceType": "裁剪", "model": "RPSM-NM-1-1000×1800-C-KW100-NA-1P220", "deptId": "17" }], "广东省": [{ "id": "0267aa80-ca0c-11ed-a742-83feda1d6cb3", "label": "50231", "name": "富怡全自动电脑裁床", "deviceStatus": "false", "machineModel": null, "unit": null, "city": "广东省", "isExhibition": "是", "deviceType": "裁剪", "model": "RPAG-NW-MC6-1-1800X1800-SB-MH-P-3P380", "deptId": "16" }, { "id": "22761c60-c6cb-11ed-a742-83feda1d6cb3", "label": "1885", "name": "富怡电脑绣花机（三合一）", "deviceStatus": "false", "machineModel": null, "unit": null, "city": "广东省", "isExhibition": "是", "deviceType": "绣花", "model": "RPCE-MC6-2-9-550X680-B-L-R", "deptId": "16" }, { "id": "32e98630-c6c7-11ed-a742-83feda1d6cb3", "label": "170322798", "name": "富怡激光雕刻切割机", "deviceStatus": "false", "machineModel": null, "unit": null, "city": "广东省", "isExhibition": "是", "deviceType": "裁剪", "model": "RPLC-CB130X090S10E-M", "deptId": "16" }, { "id": "511266c0-c6c9-11ed-a742-83feda1d6cb3", "label": null, "name": "电子夹线直驱平缝机", "deviceStatus": "false", "machineModel": null, "unit": null, "city": "广东省", "isExhibition": "是", "deviceType": "缝纫", "model": "RPS-GFL-9800D-2J-M-E", "deptId": "16" }, { "id": "688a6750-d44b-11ed-a742-83feda1d6cb3", "label": "170321NS064", "name": "富怡全自动缝纫机（零等待）", "deviceStatus": "false", "machineModel": null, "unit": null, "city": "广东省", "isExhibition": "是", "deviceType": "缝纫", "model": "RPAS-NS-1-900X600-B-2-LH.HM", "deptId": "16" }, { "id": "73b2c280-c6c7-11ed-a742-83feda1d6cb3", "label": "RPS-1108-165", "name": "富怡特种缝纫机", "deviceStatus": "false", "machineModel": null, "unit": null, "city": "广东省", "isExhibition": "是", "deviceType": "缝纫", "model": "RPS.SSC-M", "deptId": "16" }, { "id": "804e8a60-d44b-11ed-a742-83feda1d6cb3", "label": "RHUL-01", "name": "富怡全自动任意转单针缝纫机", "deviceStatus": "false", "machineModel": null, "unit": null, "city": "广东省", "isExhibition": "是", "deviceType": "缝纫", "model": "RPAS-RH-1-1200×800-A-2-LH,LM", "deptId": "16" }, { "id": "915872d0-ca0a-11ed-a742-83feda1d6cb3", "label": "040720", "name": "三合一裁床", "deviceStatus": "false", "machineModel": null, "unit": null, "city": "广东省", "isExhibition": "是", "deviceType": "裁剪", "model": "RP-TM1518S-MJ.MF.KC.PK.VK", "deptId": "16" }, { "id": "a40b97b0-c6ca-11ed-a742-83feda1d6cb3", "label": null, "name": "微油超高速四线包缝机", "deviceStatus": "false", "machineModel": null, "unit": null, "city": "广东省", "isExhibition": "是", "deviceType": "缝纫", "model": "RPS-GFL-8200W-4/AT-M-E", "deptId": "16" }, { "id": "b338ce60-ca12-11ed-a742-83feda1d6cb3", "label": "1170824#", "name": "富怡全自动双头垫板式冲孔机", "deviceStatus": "false", "machineModel": null, "unit": null, "city": "广东省", "isExhibition": "是", "deviceType": "绣花", "model": "RPCE-L-P-2-900×600-B-P6-O-NA-1P200", "deptId": "16" }, { "id": "bd70dc60-c571-11ed-a742-83feda1d6cb3", "label": "0201112", "name": "富怡电脑绣花机", "deviceStatus": "false", "machineModel": null, "unit": null, "city": "广东省", "isExhibition": "是", "deviceType": "绣花", "model": "RPCE-FN-6.9-275(550+40)*680-B", "deptId": "16" }, { "id": "bf0dc030-c6f5-11ed-a742-83feda1d6cb3", "label": "50945", "name": "富怡全自动铺布机", "deviceStatus": "false", "machineModel": null, "unit": null, "city": "广东省", "isExhibition": "是", "deviceType": "裁剪", "model": "RPCP-1018-IV-D", "deptId": "16" }, { "id": "cc95d870-c6c6-11ed-a742-83feda1d6cb3", "label": "MJKC1703080121", "name": "富怡平板切割机", "deviceStatus": "false", "machineModel": null, "unit": null, "city": "广东省", "isExhibition": "是", "deviceType": "版房", "model": "RP-TM1512S-MJ.KC", "deptId": "16" }, { "id": "d7371c40-c6ca-11ed-a742-83feda1d6cb3", "label": null, "name": "工业平缝机", "deviceStatus": "false", "machineModel": null, "unit": null, "city": "广东省", "isExhibition": "是", "deviceType": "缝纫", "model": null, "deptId": "16" }] } }
  let result: any = await secondaryOutPlantData()

  if (result.code == 200) {
    // store.setoffsitegatewayStatus(result.data)
  }
}
function getdata() {
  Promise.all([
    deviceCountsSecondaryOfOutPlantData(),
    deviceTypeCountsSecondaryOfOutPlantData(),
    deviceStatusCountsSecondaryOfOutPlantData(),
    secondaryOutPlantData(),
    getElectronDeviceStatus(deptId_list[routeCity])]).then((res: any) => {
      let data = { devnum: null, typenum: null, statusnum: null, citylist: null, data2:null}
      data.devnum = res[0].data[routeCity]
      data.typenum = res[1].data[routeCity]
      data.statusnum = res[2].data[routeCity]
      data.citylist = res[3].data[routeCity]
      data.data2 = res[4].data
      
      // res.forEach((ele, i) => {
      //   for (let key in ele.data) {
      //     if (key == route.params.city) {
      //       i == 0 ? data.devnum = ele.data[key] : i == 1 ? data.typenum = ele.data[key] : i == 2 ? data.statusnum = ele.data[key] : i == 3 ? data.citylist = ele.data[key] : ''
      //     }
      //   }
      // })

      leftRef.value.setDataList(data)
      centerRef.value.setDataList(data)
      rightRef.value.setDataList(data)
    })
}
onMounted(() => {
  // deviceCountsSecondaryOfOutPlantDatafun()
  // deviceTypeCountsSecondaryOfOutPlantDatafun()
  // deviceStatusCountsSecondaryOfOutPlantDatafun()
  // secondaryOutPlantDatafun()
  getdata()
  let contentBox = Acontent.value
  // let Timedombox=Timedom.value
  window.document.title = "再登-东莞产品物联管理系统"
  WH(contentBox)
  window.addEventListener('resize', () => {
    if (time.value) {
      clearTimeout(time.value)
      time.value = null
    }
    time.value = setTimeout(() => {
      WH(contentBox)
    }, 1000);
  })
})
onUnmounted(() => {
  clearTimeout(time)
  // store.resetAllData()
})
</script>

<style scoped>
.container {
  height: 1080px;
  width: 1920px;
  color: #20aec5;
  background-color: #100c2a;
}

.title {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.title>h1 {
  font-size: 30px;
  position: absolute;
  top: 10px;
}

.header {
  position: relative;
}

.header p {
  position: absolute;
  right: 50px;
  bottom: 20px;
  font-size: 20px;
}

.content {
  width: 100%;
  --header: 100px;
  height: calc(1080px - var(--header))
}
</style>
<style>
body {

  /* --content:calc(100vh - var(--header)) */
  overflow: hidden !important;
  -ms-overflow-style: none;
  /* IE + Edge */
  scrollbar-width: none;
  /* Firefox */
}

::-webkit-scrollbar {
  display: none;
}</style>