<template>
  <div class="container">
    <!-- 用户 -->
    <div style="width:100%;height:100%;"
      v-show="role_id == '1123598816738675200' || role_id == '1123598816738675201' || role_id == '1846419477876510721'">
      <div class="mask" v-show="isShowMask">
        账号审核中...
      </div>
      <div class="top_box">
        <div class="top_left">
          <img style="width:100%;height:100%;border-radius: 10px;" :src="backGroundPic" alt="">
        </div>
        <div class="top_right">
          <div class="work_box">
            <div class="work_tit">工作台</div>
            <div class="work_con">
              <div class="work_item" v-for="(item, index) in workList" :key="item.name" @click="ckickItem(item)">
                <div class="item_top">
                  <div class="item_img">
                    <!-- <img :src="item.img" alt=""> -->
                    <img
                      :src="index == 0 ? require('@/assets/images/lab_xj.png') : index == 1 ? require('@/assets/images/bs_jl.png') :
                        index == 2 ? require('@/assets/images/alarm.png') : index == 3 ? require('@/assets/images/full.png') : ''"
                      alt="">
                  </div>
                  <div class="right_item">
                    <div class="item_name">{{ item.name }}</div>
                    <div class="item_num" >{{ item.num }}</div>
                  </div>
                </div>
               
              </div>
              <div class="work_item" v-show="isShowOther">
                <div class="item_top">
                  <div class="item_img">
                    <img :src="require('@/assets/images/other.png')" alt="">
                  </div>
                  <div class="right_item">
                    <div class="item_name">其他</div>
                  </div>
                </div>
                
              </div>
            </div>
          </div>
          <div class="xj_box">
            <div class="xj_tit">实验室巡检</div>
            <div class="xj_con">
              <!-- <el-carousel direction="vertical" interval="10000" :autoplay="true" class="xj_con_box">
                <el-carousel-item v-for="item in inspectionList" :key="item.title">
                  <div class="xj_item">
                    <div class="xj_top">
                      <div class="tit_box">
                        <div class="xj_title">{{ item.inspectionName }}</div>
                        <div class="xj_time">巡检计划时间：{{ item.inspectionTime }}</div>
                      </div>
                      <div class="xj_task">{{ taskType == 1 ? '周期任务' : '单次任务' }}</div>
                    </div>
                    <div class="xj_center">巡检人：{{ item.inspectionPerson }}</div>
                    <div class="xj_bottom">
                      <div class="xj_status">{{ item.isStart == 0 ? '未开始' : '已开始' }}</div>
                      <div class="xj_yytime">预约时间：{{ item.appointTime }}</div>
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel> -->
              <vueSeamless v-if="inspectionList.length >= 1" :data="inspectionList" :class-option="alarmOption" class="xj_con_box">
                <div class="xj_item" v-for="item in inspectionList" :key="item.name">
                  <div class="xj_top">
                      <div class="tit_box">
                        <div class="xj_title">{{ item.inspectionName }}</div>
                        <div class="xj_time">巡检计划时间：{{ item.inspectionTime }}</div>
                      </div>
                      <div class="xj_task">{{ taskType == 1 ? '周期任务' : '单次任务' }}</div>
                    </div>
                    <div class="xj_center">
                      巡检人：{{ item.inspectionPerson }}
                      <div class="xj_status">{{ item.isStart == 0 ? '未开始' : '已开始' }}</div>
                      <div class="xj_yytime">预约时间：{{ item.appointTime }}</div>
                    </div>
                    <!-- <div class="xj_bottom">

                    </div> -->
                </div>
              </vueSeamless>
              <el-empty class="xj_con_box" v-show="inspectionList.length == 0" description="暂无数据"></el-empty>
            </div>
          </div>
          <div class="xj_box">
            <div class="xj_tit">实验室维修</div>
            <div class="xj_con">
              <vueSeamless v-if="requirementList.length >= 1" :data="requirementList" :class-option="alarmOption" class="xj_con_box">
                <div class="xj_item" v-for="item in requirementList" :key="item.name" @click="clickReqiure(item)">
                  <div class="xj_top">
                      <div class="tit_box">
                        <div class="xj_title">{{ item.requirementCode }}</div>
                      </div>
                      <div class="xj_task">{{ getStatus('maintain', role_id, item.status).name}}</div>
                    </div>
                    <div class="xj_center">
                      <div class="xj_status">{{ item.faultDescribe }}</div>
                    </div>
                    <!-- <div class="xj_bottom">

                    </div> -->
                </div>
              </vueSeamless>
              <el-empty class="xj_con_box" v-show="requirementList.length == 0" description="暂无数据"></el-empty>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom_box">
        <div class="bottom_left">
          <div class="left_tit">设备报警</div>
          <div class="left_con">
            <vueSeamless v-if="alarmList.length >= 1" :data="alarmList" :class-option="alarmOption"
              class="tablebox_item_warp">
              <div class="left_item" v-for="item in alarmList" :key="item.name">
                <div class="item_left">
                  <div class="item_circle"
                    :class="item.alarmLevel == '1' ? 'one' : item.alarmLevel == '2' ? 'two' : ''">
                    <div class="status">{{ item.alarmLevel == '1' ? '一级' : item.alarmLevel == '2' ? '二级' : '' }}</div>
                    <div class="status_txt">{{ item.alarmLevel == '1' ? '特别严重' : item.alarmLevel == '2' ? '严重' : '' }}
                    </div>
                  </div>
                </div>
                <div class="item_right">
                  <div class="item_con">
                    <div class="item_top">
                      <div>{{ item.deviceName }}</div>
                      <div class="item_btn">一键报送</div>
                    </div>
                    <div class="item_bot">
                      <div>品牌：{{ item.brand }}</div>
                      <div>型号：{{ item.model }}</div>
                      <div>报警时间：{{ item.alarmTime }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </vueSeamless>
            <el-empty class="nodata" v-show="alarmList.length == 0" description="暂无报警"></el-empty>
          </div>
        </div>
        <div class="bottom_right">
          <div class="right_tit">维修统计</div>
          <div class="right_con">
            <div class="bar_box">
              <div class="bar_top">
                选择时间：<el-date-picker v-model="staticBarTime" type="daterange" range-separator="至"
                  start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                  @change="changeStaticBarTime">
                </el-date-picker>
              </div>
              <div class="bar_charts" id="bar_echart"></div>
            </div>
            <div class="pie_box">
              <div class="pie_top">
                选择时间：<el-date-picker v-model="staticPieTime" type="daterange" range-separator="至"
                  start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                  @change="changestaticPieTime">
                </el-date-picker>
              </div>
              <div class="pie_charts">
                <div class="pie_chart">
                  <div class="charts_box" id="error_echarts"></div>
                  <div class="charts_tit">故障现象分类</div>
                </div>
                <div class="pie_chart">
                  <div class="charts_box" id="device_echarts"></div>
                  <div class="charts_tit">设备分类</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 客服/维修负责人 -->
    <div style="width:100%;height:100%;" v-if="role_id == '1839536982874193922' || role_id == '1839537055389515777'||role_id == '1867020647911350274'">
      <div class="left_box">
        <div class="map_box">
          <Map style="width:100%;height:100%;"></Map>
        </div>
        <div class="bench_box">
          <div class="bench_tit"><span style="font-weight: 550;">工作台</span>
          </div>
          <div class="bench_con">
            <div class="bench_item" v-for="(item, index) in benchList" :key="item.title">
              <img v-show="role_id == '1839536982874193922'" style="width: 32px;height: 32px;"
                :src="index == 0 ? require('@/assets/svg/task.svg') : index == 1 ? require('@/assets/svg/over.svg') : index == 2 ? require('@/assets/svg/plan.svg') : ''"
                alt="">
              <img v-show="role_id == '1839537055389515777'" style="width: 32px;height: 32px;"
                :src="index == 0 ? require('@/assets/svg/task.svg') : index == 1 ? require('@/assets/svg/over.svg') : index == 2 ? require('@/assets/svg/person.svg') : ''"
                alt="">
              <div style="margin:5px 0;color:#101010;">{{ item.title }}</div>
              <div style="margin:12px 0;color:#6c6c6c;font-size:14px;">{{ item.mainName }}<span
                  style="margin:0px 10px;font-size:22px;color:#000;">{{ item.num }}</span>{{ item.mainName == '巡检签约' ?
                    '家'
                    : item.title == '维修人员' ? '人' : '件'}}</div>
              <div style="color:#6c6c6c;font-size:14px;">{{ item.subName }}<span
                  style="margin:0px 10px;font-size:22px;color:#000;">{{ item.num1 }}</span>{{ item.title == '维修人员' ? '人'
                    :
                '件'}}</div>
            </div>

          </div>
        </div>
      </div>
      <div class="right_box">
        <div class="right_top">
          <div class="top_tit">实验室巡检</div>
          <div class="top_con">
            <div class="top_container">
              <vueSeamless v-if="labXjList.length >= 1" :data="labXjList" :class-option="calssOption"
                class="tablebox_item_warp">
                <div class="top_item" v-for="item in labXjList" :key="item.name">
                  <div class="item_left">{{ item.name }}</div>
                  <div class="item_right">巡检计划时间：{{ item.planTime }}</div>
                </div>
              </vueSeamless>
            </div>
          </div>
        </div>
        <div class="right_bottom">
          <div class="bottom_tit">提报统计</div>
          <div class="bottom_con">
            <div class="static_box">
              <div class="static_top">
                <div>{{ (role_id == '1839536982874193922'||role_id == '1867020647911350274') ? '各单位提报统计' : '各维修人员数据统计' }}</div>
                <div style="margin-left: 20px;">选择时间：
                  <el-date-picker v-model="staticTime" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="changestaticTime" size="mini">
                  </el-date-picker>
                </div>
              </div>
              <div class="static_chart" id="unitCharts" v-show="role_id == '1839536982874193922'"></div>
              <div class="static_chart" id="peopleCharts" v-show="role_id == '1839537055389515777'"></div>
            </div>
            <div class="static_box">
              <div class="static_top">
                <div>故障类占比统计</div>
                <div>
                  选择时间：
                  <el-date-picker v-model="faultTime" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="changeFaultTime" size="mini">
                  </el-date-picker>
                  <!-- <el-select v-model="typeValue" placeholder="请选择">
                    <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                  <el-select v-model="deviceValue" placeholder="请选择设备">
                    <el-option v-for="item in deviceList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                  <el-select v-model="brandValue" placeholder="请选择品牌">
                    <el-option v-for="item in brandList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select> -->
                </div>
              </div>
              <div class="static_bot_chart">
                <div class="problem_box" id="problem_charts"></div>
                <div class="probability_box" id="probability_charts"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { nextTick } from 'vue';
import { mapGetters } from "vuex";
import Map from './map.vue'
import vueSeamless from 'vue-seamless-scroll'
import { getUserInfo } from "@/api/system/user";
import { getList } from '@/api/operation/hand'
import { overview, workList, deviceList, upkeepStat, pieStat,maintenancePersonnel, mapAddress, limsInspecList, overviewList, limsInspecChart, faultRatio } from '@/api/workbench/workbench'
import { color } from 'echarts';
import statusData from "@/assets/json/status.json"; // 引入状态数据

export default {
  components: {
    Map,
    vueSeamless
  },
  data() {
    return {
      requirementList:[],
      role_id: '',
      isShowOther: false,
      isShowMask:false,
      workList: [
        {
          name:'实验室巡检',
          img:require('@/assets/images/lab_xj.png'),
          num:0
        },
        {
          name:'报送记录',
          img:require('@/assets/images/bs_jl.png'),
          num:0
        },
        {
          name:'设备报警',
          img:require('@/assets/images/alarm.png'),
          num:0
        },
        {
          name:'监控大屏',
          img:require('@/assets/images/full.png'),
          num:0
        },
      ],
      inspectionList: [
        {
          appointTime: "2024-11-15",
          inspectionName: "水系统检查",
          inspectionPerson: "张三",
          inspectionTime: "2024-11-11",
          isStart: "0",
          taskType: "1"
        }
      ],
      staticBarTime: '',
      staticPieTime: '',
      staticTime: [],
      faultTime: [],
      alarmList: [
        {
          alarmLevel: "1",
          alarmTime: "2024-11-15",
          brand: "品牌A",
          deviceName: "2024-11-11",
          model: "GDXH-12582",
        }
      ],
      benchList: [
        {
          img:require('@/assets/svg/task.svg'),
          title:'我的任务',
          mainName:'今日待办',
          num:'5',
          subName:'今日已办',
          num1:10
        },
        {
          img:require('@/assets/svg/over.svg'),
          title:'维修已办结',
          mainName:'本月',
          num:16,
          subName:'本年',
          num1:129
        },
        {
          img:require('@/assets/svg/plan.svg'),
          title:'巡检计划1',
          mainName:'巡检签约',
          num:22,
          subName:'巡检',
          num1:159
        }
      ],
      typeList: [
        { label: '装修类', value: '001' }
      ],
      typeValue: '',
      deviceList: [{ label: '给排水', value: '01' }, { label: '空调', value: '02' }],
      deviceValue: '',
      brandList: [{ label: '美的', value: '0001' }, { label: '海尔', value: '0002' }],
      brandValue: '',
      labXjList: [
        // {name:'安池实验室-实验室设备巡检',time:'2024/8/28'},
        // {name:'安池实验室-实验室设备巡检1',time:'2024/8/29'},
        // {name:'安池实验室-实验室设备巡检2',time:'2024/8/30'},
        // {name:'安池实验室-实验室设备巡检3',time:'2024/8/30'},
        // {name:'安池实验室-实验室设备巡检4',time:'2024/8/30'},
        // {name:'安池实验室-实验室设备巡检5',time:'2024/8/30'},
      ],
      calssOption: {},
      alarmOption: {},
      xData: [],
      numData: [],
      backGroundPic: require('@/assets/images/lab.png'),
      barXdata: ["报送维修", "巡检维修"],
      totalBardata: [10, 20],
      completedBardata: [3, 12],
      unCompletedBardata: [7, 8],
      errorData: [
        {name: "电气", value: 300},
        {name: "空调", value: 248},
        {name: "装修类", value: 135},
        {name: "智能设备", value: 180},
        {name: "暖通、自控", value: 654}
      ],
      deviceData: [
        {name: "设备1", value: 580},
        {name: "空调", value: 1048},
        {name: "通风柜", value: 735}
      ],
      problemData: [],
      rateData: [],
      peopleXdata:[],
      peopleNum:[],
      peoplePercent:[]
    }
  },
  computed: {
    ...mapGetters(["userInfo", "permission"]),
    getStatus() {
      return (type, id, status) => {
        for (let i in statusData[type]) {
          let val
          statusData[type][id].map(item => {
            if (item.status == status) {
              val = item
            }
          })
          return val
        }
      }
    },
  },
  mounted() {
    console.log('userInfo=============>',this.userInfo)
    this.isShowMask = this.userInfo.detail.status == 1 ? false : true
    this.role_id = this.userInfo.role_id

    if (this.role_id == '1123598816738675200' || this.role_id == '1123598816738675201' || this.role_id == '1846419477876510721') {
      // 实验室角色
      nextTick(() => {
        if(!this.isShowMask){
          this.getOverview()
          this.getWorkList()
          this.getDeviceAlarmList()
          this.getbackGroundPic()
          this.getUpkeepStat()
          this.getPieStat()
          this.getRequirement()
          this.alarmOption = {
            "step": 0.2, // 数值越大速度滚动越快
            "limitMoveNum": 3, // 开始无缝滚动的数据量 this.dataList.length
            "hoverStop": true, // 是否开启鼠标悬停stop
            "direction": 1, // 0向下 1向上 2向左 3向右
            "openWatch": true, // 开启数据实时监控刷新dom
            "singleHeight": 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
            "singleWidth": 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
            "waitTime": 1000, // 单步运动停止的时间(默认值1000ms)
          }
        }else{
          this.createBarEcharts()
          this.createErrorEcharts()
          this.createDeviceEcharts()
        }
      })
    } else if (this.role_id == '1839536982874193922' || this.role_id == '1839537055389515777') {
      nextTick(() => {
        if(!this.isShowMask){
          this.getlimsInspecList()
          this.getOverviewList()
          this.getlimsInspecChart()
          this.getPeopleNum()
          this.getFaultRatio()
          // this.createProblemEcharts()
          // this.createProbabilityEcharts()
          this.calssOption = {
            "step": 0.2, // 数值越大速度滚动越快
            "limitMoveNum": 4, // 开始无缝滚动的数据量 this.dataList.length
            "hoverStop": true, // 是否开启鼠标悬停stop
            "direction": 1, // 0向下 1向上 2向左 3向右
            "openWatch": true, // 开启数据实时监控刷新dom
            "singleHeight": 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
            "singleWidth": 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
            "waitTime": 1000, // 单步运动停止的时间(默认值1000ms)
          }
        }
      })
    }
  },
  methods: {
    getPeopleNum(){
      maintenancePersonnel({id:this.userInfo.user_id}).then(res =>{
        console.log('res ==============>',res)
        this.peopleXdata = res.data.data.xData
        this.peopleNum = res.data.data.repairNum
        this.peoplePercent = res.data.data.percent
        this.$nextTick(() =>{
          this.creatpeopleEcharts()
        })
      })
    },
    clickReqiure(item){
      console.log('item----------->',item)
      this.$router.push({
        path:'/operation/hand',
        query:item
      })  
    },
    getRequirement(){
      getList({
        current:1,
        size:10,
        dataType: 1,//数据权限
        statusSearch: '201,401,402,301,403,202,104',//状态5报错
      }).then(res =>{
        this.requirementList = res.data.data.records
      })
    },
    // 获取实验室角色下的背景图
    getbackGroundPic() {
      getUserInfo().then(res => {
        this.backGroundPic = res.data.data.backGroundPic ? res.data.data.backGroundPic : require('@/assets/images/lab.png')
      })
    },
    // 获取实验室下工作台相关信息
    getOverview() {
      overview().then(res => {
        this.workList = res.data.data
        this.isShowOther = this.workList.length == 3 ? true : false
      })
    },
    // 获取实验室巡检列表
    getWorkList() {
      workList().then(res => {
        this.inspectionList = res.data.data
      })
    },
    // 获取实验室设备报警列表
    getDeviceAlarmList() {
      deviceList().then(res => {
        this.alarmList = res.data.data
      })
    },
    // 实验室下维修统计切换时间
    changeStaticBarTime(val) {
      this.getUpkeepStat()
    },
    // 获取实验室下维修统计接口
    getUpkeepStat() {
      let query = {
        startTime: this.staticBarTime.length != 0 ? this.staticBarTime[0] + ' 00:00:00' : '',
        endTime: this.staticBarTime.length != 0 ? this.staticBarTime[1] + ' 23:59:59' : ''
      }
      upkeepStat(query).then(res => {
        this.barXdata = res.data.data.xData
        this.totalBardata = res.data.data.total
        this.completedBardata = res.data.data.completed
        this.unCompletedBardata = res.data.data.unCompleted
        nextTick(() => {
          this.createBarEcharts()
        })
      })
    },
    // 实验室下饼图切换时间
    changestaticPieTime(val) {
      this.getPieStat()
    },
    // 获取实验室下饼图数据
    getPieStat() {
      let query = {
        startTime: this.staticPieTime.length != 0 ? this.staticPieTime[0] + ' 00:00:00' : '',
        endTime: this.staticPieTime.length != 0 ? this.staticPieTime[1] + ' 23:59:59' : ''
      }
      pieStat(query).then(res => {
        this.errorData = res.data.data.fault
        this.deviceData = res.data.data.device
        nextTick(() => {
          this.createErrorEcharts()
          this.createDeviceEcharts()
        })
      })
    },
    // 获取客服/运维主管下的巡检列表
    getlimsInspecList() {
      limsInspecList({ perType: this.role_id == '1839536982874193922' ? 0 : 1 }).then(res => {
        this.labXjList = res.data.data
      })
    },
    // 获取客服/运维主管下的工作台
    getOverviewList() {
      overviewList({ perType: this.role_id == '1839536982874193922' ? 0 : 1 }).then(res => {
        this.benchList = res.data.data
      })
    },
    // 切换提报统计图表时间
    changestaticTime(val) {
      this.getlimsInspecChart()
    },
    // 获取客服、运维主管下的提报统计图表数据
    getlimsInspecChart() {
      let query = {
        startTime: this.staticTime.length != 0 ? this.staticTime[0] + ' 00:00:00' : '',
        endTime: this.staticTime.length != 0 ? this.staticTime[1] + ' 23:59:59' : '',
        perType: this.role_id == '1839536982874193922' ? 0 : 1
      }
      limsInspecChart(query).then(res => {
        this.xData = res.data.data.xData
        this.numData = res.data.data.yData
        nextTick(() => {
          this.creatUnitEcharts()
        })
      })
    },
    // 切换故障统计时间
    changeFaultTime(val) {
      this.getFaultRatio()
    },
    // 获取客服/维修主管下的故障类占比
    getFaultRatio() {
      let query = {
        startTime: this.faultTime.length != 0 ? this.faultTime[0] + ' 00:00:00' : '',
        endTime: this.faultTime.length != 0 ? this.faultTime[1] + ' 23:59:59' : '',				//时间范围
        deviceType: '',			//设备类型
        deviceId: '',				//设备id
        brand: '',					//品牌
        perType: this.role_id == '1839536982874193922' ? 0 : 1				//人员类型 0-客服 1-维修负责人
      }
      faultRatio(query).then(res => {
        console.log('res ===================>', res)
        this.problemData = res.data.data.fault
        this.rateData = res.data.data.rate

        nextTick(() => {
          this.createProblemEcharts()
          this.createProbabilityEcharts()
        })
      })
    },
    // 点击工作台项目
    ckickItem(item) {
      if(this.isShowMask){
        return
      }else{
        if (item.name == '报送记录') {
          this.$router.push('/operation/hand')
        }else if(item.name == '实验室巡检'){
          this.$router.push("/labManagement/inspectionManagement")
        }else if(item.name == '设备报警'){
          this.$router.push({
            path:'/device/deviceSystem',
            query:{
              type:'2'
            }
          })
        }
      }

    },
    createBarEcharts() {
      var myChart = this.$echarts.init(document.getElementById('bar_echart'));
      var option = {
        tooltip: {
          trigger: 'axis',
          transitionDuration: 0,//防止页面抖动
        },
        legend: {    //图例组件
          data: ['总计', '已完成', '未完成']
        },
        xAxis: {
          data: this.barXdata,
        },
        grid: {
          top: '15%',
          left: '5%',
          right: '5%',
          bottom: '10%'
        },
        yAxis: {},
        series: [
          {
            name: '总计',
            type: 'bar',
            data: this.totalBardata,
            itemStyle: {
              // color: '#2478f2'
              color:'#2148D1'
            }
          },
          {
            name: '已完成',
            type: 'bar',
            data: this.completedBardata,
            itemStyle: {
              // color: '#84b7f9'
              color:'#5E8CFF'
            }
          },
          {
            name: '未完成',
            type: 'bar',
            data: this.unCompletedBardata,
            itemStyle: {
              // color: '#5f9cf8'
              color:'#B0CCFF'
            }
          },
        ]
      };
      //4.使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    createErrorEcharts() {
      var myChart = this.$echarts.init(document.getElementById('error_echarts'));
      var option = {
        tooltip: {
          trigger: 'item',
          transitionDuration: 0,//防止页面抖动
        },
        series: [
          {
            type: 'pie',
            radius: '60%',
            label: {
              formatter: '{b}\n {c}',
              color: '#000'
            },
            data: this.errorData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    createDeviceEcharts() {
      var myChart = this.$echarts.init(document.getElementById('device_echarts'));
      var option = {
        tooltip: {
          trigger: 'item',
          transitionDuration: 0,//防止页面抖动
        },
        series: [
          {
            type: 'pie',
            radius: '70%',
            label: {
              formatter: '{b}\n {c}',
              color: '#000'
            },
            data: this.deviceData,
          }
        ]
      };
      myChart.setOption(option);
    },
    creatUnitEcharts() {
      var myChart = this.$echarts.init(document.getElementById('unitCharts'));
      var option = {
        tooltip: {
          trigger: 'axis',
          transitionDuration: 0,//防止页面抖动
        },
        legend: {    //图例组件
          data: ['数量'],
        },
        xAxis: {
          data: this.xData,
        },
        grid: {
          top: '22%',
          left: '5%',
          right: '5%',
          bottom: '10%'
        },
        yAxis: {},
        series: [
          {
            name: '数量',
            type: 'bar',
            barWidth:this.numData == 1 ? 50 : null,
            data: this.numData,
            itemStyle: {
              color: '#2478f2'
            },
            label: {
              show: true,
              position: 'top',
              color: '#2478f2',
            },
          },
        ]
      };
      //4.使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    creatpeopleEcharts() {
      var myChart = this.$echarts.init(document.getElementById('peopleCharts'));
      var option = {
        tooltip: {
          trigger: 'axis',
          transitionDuration: 0,//防止页面抖动
          formatter: params => {
            console.log('params',params)
            let rander = params.map(item =>  `<div>${item.marker}${item.seriesName}: ${item.seriesType !== "line" ? item.value : item.value != '' ? item.value + "%" : '-'}</div>` ).join('')
            return `
                <div>${params[0].axisValue}</div>
                ${rander}
            `
          }
        },
        legend: {    //图例组件
          data: ['维修数量','好评率'],
        },
        xAxis: {
          type: 'category',
          data: this.peopleXdata,
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '22%',
          left: '5%',
          right: '5%',
          bottom: '10%'
        },
        yAxis: [
          {
            type: 'value',
            name: '维修数量',
          },
          {
            type: 'value',
            name: '好评率(%)',
            min: 0,
            max: 100
          }
        ],
        series: [
          {
            name: '维修数量',
            type: 'bar',
            barWidth:this.numData == 1 ? 50 : null,
            data: this.peopleNum,
            itemStyle: {
              color: '#2478f2'
            },
          },
          {
            name: '好评率',
            type: 'line',
            yAxisIndex: 1,
            data: this.peoplePercent,
            itemStyle: {
              color: '#2478f2'
            },
          },
        ]
      };
      //4.使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    createProblemEcharts() {
      var myChart = this.$echarts.init(document.getElementById('problem_charts'));
      var option = {
        tooltip: {
          trigger: 'item',
          transitionDuration: 0,//防止页面抖动
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          left: 5,
          top: 20,
          bottom: 20,
        },
        grid: {
          top: '30%',
          left: '80%',
          right: '2%'
        },
        series: [
          {
            type: 'pie',
            radius: ['50%', '65%'],
            label: {
              show: true,
              formatter: '{b}\n {c}',
              color: '#000'
            },
            labelLine: {
              show: true,
            },
            data: this.problemData,
          }
        ]
      };
      //4.使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    createProbabilityEcharts() {
      var myChart = this.$echarts.init(document.getElementById('probability_charts'));
      var option = {
        title: {
          text: "故障率",
          subtext: "50%",
          left: "center",
          top: "35%",
          textStyle: {
            fontSize: 16,
            color: '#4f4f4f'
          },
          subtextStyle: {
            fontSize: 20,
            color: '#de4234'
          }
        },
        tooltip: {
          trigger: 'item',
          transitionDuration: 0,//防止页面抖动
        },
        legend: {
          type: 'scroll',
          top: 0,
          right:5,
          orient: 'vertical',
        },
        series: [
          {
            type: 'pie',
            radius: ['50%', '65%'],
            label: {
              show: true,
              formatter: '{b}\n {c}',
              color: '#000'
            },
            labelLine: {
              show: true
            },
            data: this.rateData,
          }
        ]
      };
      //4.使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    createMapBox() { },
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 99%;
  height: 95%;
  //background: #fff;
  margin: 0 auto;

  .mask{
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    display: flex;
    justify-content: center;
    font-size: 80px;
    // color: #2478f2;
    color: rgba(36,120, 242, 0.8);
    line-height: 800px;
    letter-spacing: 50px;
  }

  .top_box {
    width: 100%;
    height: 51%;
    margin: 0 auto;
    margin-top: 5px;
    // padding: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .top_left {
      width: 49.5%;
      height: 100%;
    }

    .top_right {
      width: 49%;
      height: 100%;

      .work_box {
        width: 98%;
        height: 30%;
        // margin-left: 5%;

        .work_tit {
          font-weight: 550;
        }

        .work_con {
          width: 100%;
          height: 80%;
          margin-top: 10px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .work_item {
            width: 23%;
            height:78px;
            border-radius: 10px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            
            // flex-direction: column;
            

            .item_top {
              width: 100%;
              height: 100%;
              background: #3a62d791;
              border-radius: 10px;
              position: relative;
              display: flex;
              align-items: center;
              justify-content: center;
              // flex-direction: column;
              color: white;
              font-size: 22px;
              background: linear-gradient( 90deg, #375DF9 0%, #6DB5FF 100%);
              box-shadow: 0px 5px 5px 0px #B6D8FF;

              

              .right_item{
                display: flex;
                flex-direction: column;
                margin-left: 20px;
              }

              // .item_num {
              //   // position: absolute;
              //   // top: 0;
              //   // right: 0;
              //   // padding: 3px;
              //   // background: red;
              //   font-size: 22px;
              //   height: 25px;
              // }

              .item_img {
                width: 32px;
                height: 32px;
                margin-bottom: 10px;

                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .item_name {
                // width: 148px;
                // margin-top: 10px;
                // display: flex;
                // align-items: center;
                // -ms-flex-pack: center;
                // justify-content: center;
                font-size: 14px;
                margin-bottom: 5px;
              }
            }

            &:nth-child(2) .item_top{
              background: linear-gradient( 270deg, #41D9A5 0%, #0BC478 100%);
              box-shadow: 0px 10px 10px 0px #BDE7E2;
            }

            &:nth-child(3) .item_top{
              background: linear-gradient( 90deg, #F36656 0%, #FF8043 100%);
              box-shadow: 0px 10px 10px 0px #FED1D0;
            }

            &:nth-child(4) .item_top{
              background: linear-gradient( 90deg, #F3AC56 0%, #FFCA68 100%);
              box-shadow: 0px 10px 10px 0px #FEEED0;
            }
            
          }
        }
      }

      .xj_box {
        width: 98%;
        height:30%;
        margin-top: 20px;

        .xj_tit {
          font-weight: 550;
          margin-bottom: 13px;
        }

        .xj_con {
          width: 100%;
          height: calc(89% - 20px);
          display: flex;
          align-items: flex-end;
          justify-content: center;

          .xj_con_box {
            width: 100%;
            height: 100%;
            background: #fff;
            border-radius: 10px;
            overflow: hidden;

            ::v-deep .el-empty__image{
              width: 45px !important;
            }

            ::v-deep .el-empty__description{
              margin-top: none !important;
            }

            ::v-deep.el-carousel__container {
              height: 100% !important;
            }

            ::v-deep .el-carousel__indicators--vertical {
              display: none !important;
            }

            .xj_item {
              width: 96%;
              margin: 10px auto;
              background: #fff;
              border-radius: 10px;
              padding: 5px;

              .xj_top {
                display: flex;
                width: 100%;
                align-items: center;
                justify-content: space-between;

                .tit_box {
                  display: flex;

                  .xj_title {
                    font-weight: 550;
                    margin-right: 20px;
                  }

                  .xj_time {
                    font-size: 14px;
                    color: #6c6c6c;
                  }
                }

                .xj_task {
                  color: #3a62d7;
                }
              }

              .xj_center {
                margin: 5px 0;
                color: #6c6c6c;
                display: flex;
                align-items: center;
                justify-content: space-between;
              }

              .xj_bottom {
                display: flex;

                .xj_status {
                  color: #3a62d7;
                  margin-right: 20px;
                }
              }
            }
          }
        }
      }
    }
  }

  .bottom_box {
    width: 100%;
    height: 46%;
    margin-top: 1%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .bottom_left {
      width: 25%;
      height: 100%;
      background: #FFFFFF;
      border-radius: 10px;
      border: 1px solid #EBEEF5;
      

      .left_tit {
        font-weight: 550;
        margin-top: 15px;
        margin-left: 15px;
      }

      .left_con {
        width: 100%;
        height: 88%;
        // background: #efefef;
        margin-top: 20px;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        // background: #FFFFFF;
        // border-radius: 4px;
        // border: 1px solid #EBEEF5;

        .nodata{
          // width: 100%;
          // height: 100%;
          // display: flex;
          // align-items: center;
          // justify-content: center;
          // font-size: 25px;
          // color: #a39797;
          // letter-spacing: 10px;

          ::v-deep .el-empty__image{
            width:120px;
          }
        }

        .tablebox_item_warp {
          height: 90%;
          overflow: hidden;

          .left_item {
            width: 94%;
            height: 128px;
            background: #fff;
            border: 1px solid #EBEEF5;
            border-radius: 10px;
            margin: 0 auto;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;

            .item_left {
              width: 30%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;

              .item_circle {
                width: 80px;
                height: 80px;
                border-radius: 50%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                &.one {
                  border: 5px solid #bd3124;
                }

                &.two {
                  border: 5px solid #e99d42;
                }

                .status {
                  color: #101010;
                  margin-bottom: 5px;
                }

                .status_txt {
                  font-size: 12px;
                  color: #bebebe;
                }
              }
            }

            .item_right {
              width: 69%;
              height: 100%;

              .item_con {
                margin: 14px 10px 0;
                display: flex;
                flex-direction: column;

                .item_top {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;

                  .item_btn {
                    background: #3a62d729;
                    padding: 5px 10px;
                    color: #3a62d7;
                    font-size: 14px;
                    border-radius: 5px;
                  }
                }

                .item_bot {
                  line-height: 25px;
                  margin-top: 5px;
                  font-size: 14px;
                  color: #9a9a9a;
                }
              }
            }
          }
        }



      }
    }

    .bottom_right {
      width: 74%;
      height: 100%;
      background: #FFFFFF;
      border-radius: 10px;
      border: 1px solid #EBEEF5;

      .right_tit {
        font-weight: 550;
        margin-top: 15px;
        margin-left: 15px;
      }

      .right_con {
        width: 100%;
        height: 88%;
        // background: #efefef;
        margin-top: 10px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        // background: #FFFFFF;
        // border-radius: 4px;
        // border: 1px solid #EBEEF5;

        .bar_box {
          width: 49%;
          height: 100%;
          // background: #fff;
          border-radius: 10px;
          margin-left: 15px;
          display: flex;
          flex-direction: column;
          // background: #FFFFFF;
          // border-radius: 4px;
          // border: 1px solid #EBEEF5;

          .bar_top {
            margin: 10px;
          }

          .bar_charts {
            width: 96%;
            height: 80%;
            margin-left: 10px;
          }
        }

        .pie_box {
          width: 49%;
          height: 100%;
          margin-left: 2%;
          border-radius: 10px;
          // background: #FFFFFF;
          // border-radius: 4px;
          // border: 1px solid #EBEEF5;

          .pie_top {
            margin: 10px;
          }

          .pie_charts {
            width: 96%;
            height: 80%;
            margin-left: 10px;
            display: flex;
            justify-content: space-between;

            .pie_chart {
              width: 49%;
              height: 100%;

              .charts_box {
                width: 100%;
                height: 80%;
              }

              .charts_tit {
                width: 100%;
                height: 15%;
                display: flex;
                align-items: center;
                justify-content: center;
              }
            }
          }
        }
      }
    }
  }

  .left_box {
    width: 35%;
    height: 100%;
    float: left;

    .map_box {
      width: 100%;
      height: 69%;
    }

    .bench_box {
      width: 100%;
      height: 30%;
      margin-top: 1%;
      display: flex;
      flex-direction: column;
      align-items: center;

      .bench_tit {
        width: 100%;
        display: flex;
        margin: 20px 0 20px;

        .bench_num {
          padding: 5px;
          width: 15px;
          height: 15px;
          border-radius: 5px;
          text-align: center;
          line-height: 15px;
          margin-left: 10px;
          background: rgb(253, 209, 67);
          box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px 0px;
        }
      }

      .bench_con {
        width: 100%;
        height: 73%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .bench_item {
          width: 25%;
          height: 100%;
          border-radius: 10px;
          background: #fff;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }

  .right_box {
    width: 64%;
    height: 100%;
    float: left;
    margin-left: 1%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    .right_top {
      width: 100%;
      height: 25%;
      display: flex;
      flex-direction: column;

      .top_tit {
        font-size: 20px;
        font-weight: 550;
        width: 95%;
        margin-bottom: 10px;
      }

      .top_con {
        width: 100%;
        height: 80%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;

        .top_container {
          width: 100%;
          height: 100%;
          background: #fff;
          border-radius: 10px;

          .tablebox_item_warp {
            height: 90%;
            margin-top: 15px;
            overflow: hidden;

            .top_item {
              display: flex;
              justify-content: space-between;
              margin: 10px 20px;

              &:first-child {
                margin-top: 0;
              }

              .item_left {
                color: #101010;
              }

              .item_right {
                color: #6c6c6c;
              }
            }
          }


        }
      }
    }

    .right_bottom {
      width: 100%;
      height: 75%;
      display: flex;
      flex-direction: column;

      .bottom_tit {
        font-size: 20px;
        font-weight: 550;
        margin: 20px auto;
        width: 100%;
      }

      .bottom_con {
        width: 100%;
        height: 88%;
        border-radius: 10px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;

        .static_box {
          width: 100%;
          height: 48%;
          border-radius: 10px;
          background: #fff;
          display: flex;
          flex-direction: column;

          .static_top {
            width: 96%;
            display: flex;
            align-items: center;
            //justify-content: space-between;
            margin: 0 auto;
            margin-top: 10px;

            ::v-deep .el-select {
              width: 120px !important;
              margin: 0 5px;
            }

            ::v-deep.el-date-editor--daterange {
              width: 240px !important;
            }
          }

          .static_chart {
            width: 96%;
            height: 74%;
            margin: 0 auto;
          }

          .static_bot_chart {
            width: 96%;
            height: 74%;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;

            .problem_box {
              width: 60%;
              height: 100%;
            }

            .probability_box {
              width: 39%;
              height: 100%;
            }
          }
        }
      }
    }
  }

}
</style>
