<template>
  <div class="content">
    <!-- 工作台 -->
    <div class="box">
      <div class="bos unit1">
        <div class="box_title">当前火情</div>
        <div class="box-main">
          <div class="box_item">
            <div class="itemim">
              <div class="itemimg">图片</div>
            </div>
            <div class="itemfons">
              <div class="itemtitle">1单元3号楼 8层 405室 朝南</div>
              <div class="miaoshu">
                <div class="miaoshu1">着火点描述</div>
                <el-popover popper-class="poperClass" placement="top" :width="200" trigger="hover"
                  content="位于405室靠走廊部分，当前火势较大，可,位于405室靠走廊部分，当前火势较大，可,位于405室靠走廊部分，当前火势较大，可,位于405室靠走廊部分，当前火势较大，可"
                  popper-style="text-align: center;border:1px solid #7F7F7F; box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.6);">
                  <template #reference>
                    <div class="miaoshu2">
                      位于405室靠走廊部分，当前火势较大，可,位于405室靠走廊部分，当前火势较大，可,位于405室靠走廊部分，当前火势较大，可,位于405室靠走廊部分，当前火势较大，可
                    </div>
                  </template>
                </el-popover>
              </div>
              <div class="itemdetail">详情</div>
            </div>
          </div>
          <div class="box_item"></div>
          <div class="box_item"></div>
          <div class="box_item"></div>
        </div>
      </div>
      <div class="bos unit2">
        <div class="box_title">历史火情</div>
        <div class="box-main">
          <div class="box2_term">
            <div class="term1">选择时间区间</div>
            <el-radio-group v-model="radio">
              <el-radio :value="3">近一个月</el-radio>
              <el-radio :value="6">近三个月</el-radio>
              <el-radio :value="9">近半年</el-radio>
            </el-radio-group>
            <div class="term3">自定义时间区间</div>
          </div>
          <div id="echarts"></div>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="bos unit3">
        <div class="box_title">无人机设备状态</div>
        <div class="box-main3">
          <div class="main-item3">
            <div class="box_item3">
              <div class="item3title item3wh">
                <div>无人机1</div>
                <div class="item3_status">状态良好</div>
                <img class="item3whimg" src="../../static/image/wurenjitop.png" alt="">
              </div>
              <div class="item3title item3wh1">
                <img src="" alt="" class="imgitem3">
                <div class="item3title1">
                  <div class="item3title item3_detail">
                    <div>无人灭火弹备弹数</div>
                    <div>4发</div>
                  </div>
                  <div class="item3title item3_detail">
                    <div>上次维修时间</div>
                    <div>2025.6.10</div>
                  </div>
                  <div class="item3title item3_detail">
                    <div>当前状态</div>
                    <div>执行编号001灭火任务中</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="main-item3">
            <div class="box_item3"></div>
          </div>
          <div class="main-item3">
            <div class="box_item3"></div>
          </div>
          <div class="main-item3">
            <div class="box_item3"></div>
          </div>
          <div class="main-item3">
            <div class="box_item3"></div>
          </div>
        </div>
      </div>
      <div class="bos unit4">
        <div class="box_title">火情信息 (传感器)</div>
        <div class="box-main">
          <div class="box_item4">
            <div class="itemimg4"></div>
            <div class="itemfons4">
              <div class="itemtitle">1单元3号楼 8层 405室 朝南</div>
              <div class="miaoshu">
                <div class="miaoshu4">
                  <div class="mess">详情</div>
                  <div>朝南传感器侦察到火情，请及时安排人员去现场查看</div>
                </div>
                <div class="miaoshu4">
                  <div class="mess">联系人</div>
                  <el-popover popper-class="poperClass" placement="top" :width="200" trigger="hover"
                    content="位于405室靠走廊部分，当前火势较大，可,位于405室靠走廊部分，当前火势较大，可,位于405室靠走廊部分，当前火势较大，可,位于405室靠走廊部分，当前火势较大，可"
                    popper-style="text-align: center;border:1px solid #7F7F7F; box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.6);">
                    <template #reference>
                      <div class="lianxi">
                        位于405室靠走廊部分，当前火势较大，可,位于405室靠走廊部分，当前火势较大，可,位于405室靠走廊部分，当前火势较大，可,位于405室靠走廊部分，当前火势较大，可
                      </div>
                    </template>
                  </el-popover>
                </div>
              </div>
            </div>
          </div>
          <div class="box_item"></div>
          <div class="box_item"></div>
          <div class="box_item"></div>
        </div>
      </div>

    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue';
import { ElMessage, ElLoading } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import * as echarts from 'echarts';
const radio = ref(3)
//折线图图表
const echartsFn = () => {
  var chartDom = document.getElementById('echarts');
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisLabel: {
        // interval:
        showMinLabel: true, // 显示第一个标签
        showMaxLabel: true, // 显示最后一个标签

        // formatter: function (val) {
        //   if (props.dataType == 1) {
        //     if (val.split(' ').length > 1) {
        //       return val.split(' ')[1];
        //     } else {
        //       return val;
        //     }
        //   } else if (!isNaN(new Date(val).getTime()) && val.toString().split(' ').length > 1) {
        //     return val.split(' ')[1];
        //   } else {
        //     return formatterFn(obj.dimensions[0].formatter, val)
        //   }
        // }
      },
      // 隐藏y轴网格线
      splitLine: {
        show: false
      },
      axisLine: {
        // show: false,
        lineStyle: {
          color: '#5c7a99' // 设置轴线颜色为红色
        }
      },
      axisTick: {
        show: false // 这里设置为false即可去掉x轴的间隔线
      }
    },
    yAxis: {
      type: 'value',
      alignTicks: true,
      splitLine: {
        show: true,
        lineStyle: {
          color: '#123152', // 修改为你想要的颜色
          type: 'solid'
        }
      },
    },
    dataZoom: [
      {
        type: 'inside',
        xAxisIndex: [0],
        start: 0,
        end: 10000  //默认缩放组件宽度
        // height:10,
      }
    ],
    grid: {
      left: 30,
      // left: 50,
      right: 30,
      bottom: 10,
      top: 40,
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        showSymbol: false, // 设置为false以去掉圆点
        smooth: true,
        itemStyle: {
          color: '#0facd6', // 随机色
        },
        lineStyle: {
          color: '#0facd6'
        },
      }
    ]
  };
  window.addEventListener("resize", function () {
    // console.log('屏幕变化了');
    if (myChart) {
      var time = setInterval(() => {
        // console.log('走进来');
        myChart.resize()
      }, 200);
      setTimeout(() => {
        clearInterval(time)
      }, 2000)
    }
  })
  option && myChart.setOption(option);
}
onMounted(() => {
  echartsFn()
  module1Fn()
  module2Fn()
  module3Fn()
  module4Fn()
})
// 获取模块1的列表数据--当前火情
const module1Fn = () => {

}
// 获取模块2的列表数据--历史火情
const module2Fn = () => {

}
// 获取模块3的列表数据--无人机设备状态
const module3Fn = () => {

}
// 获取模块4的列表数据--火情信息(传感器)
const module4Fn = () => {

}
</script>
<style scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.box {
  display: flex;
  justify-content: space-between;
  height: 49%;
}

.bos {
  border: 1px solid #063b6c;
  background-color: #072547;
}

.unit1 {
  width: 40%;
}

.unit2 {
  width: 59%;
}

.unit3 {
  width: 59%;
}

.unit4 {
  width: 40%;
}

.box_title {
  width: 100%;
  height: 48px;
  line-height: 48px;
  padding-left: 20px;
  background-image: url(../../static/image/title.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.box-main {
  height: calc(100% - 48px);
  padding: 10px;
  overflow-y: auto;

}

.box_item {
  width: 100%;
  height: 32.5%;
  background-color: #063563;
  margin-bottom: 5px;
  display: flex;
  justify-content: flex-start;
  overflow: hidden;
  padding: 10px;
  /* &nbsp */
}

.itemim {
  width: 80px;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.itemimg {
  /* height: 100%;
  width: auto;
  aspect-ratio: 1/1; */
  height: 80px;
  width: 80px;
  border: 1px solid red;
}

.itemfons {
  position: relative;
  height: 100%;
  width: calc(100% - 80px);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-left: 5px;
}

.itemtitle {
  font-weight: 600;
}

.miaoshu {
  font-size: 14px;
  width: 100%;
  overflow: hidden;
}

.miaoshu1 {
  font-size: 14px;
}

.miaoshu2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
}

.itemdetail {
  width: 45px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background-color: #06b0e1;
  border-radius: 5px;
  position: absolute;
  top: 10px;
  right: 10px;
}

.itemimg4 {
  height: 30px;
  width: 30px;
  background-image: url(../../static/image/huo.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: 5px;
}

.itemfons4 {
  position: relative;
  height: 100%;
  width: calc(100% - 30px);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-left: 5px;
}

.box_item4 {
  width: 100%;
  height: 32.5%;
  background-color: #351f39;
  margin-bottom: 5px;
  display: flex;
  justify-content: flex-start;
  overflow: hidden;
  padding: 10px;
  /* &nbsp */
}

.miaoshu4 {
  width: 100%;
  display: flex;
  margin-bottom: 5px;
}

.lianxi {
  width: calc(100% - 50px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
}

.mess {
  width: 50px;
  height: 20px;
  text-align: center;
  background-color: #294261;
  border: 1px solid #205e82;
  margin-right: 5px;
}

/* ------------------------------------------------------------
 */
.box2_term {
  display: flex;
  align-items: center;
  padding: 10px;
  font-size: 14px;
  color: #c0c7d0;
}

.term1 {
  margin-right: 10px;
}

.term3 {
  margin-left: 20px;
  text-decoration: underline;
  color: #068bb8;
  cursor: pointer;
}

:deep().el-radio__label {
  color: #c0c7d0 !important;
}

:deep().el-radio.is-checked .el-radio__label {
  color: #409eff !important;
}

/* 3-------------------------------------------------------- */
.box-main3 {
  width: 100%;
  height: calc(100% - 48px);
  /* padding: 20px; */
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
}

.box_item3 {
  width: 100%;
  height: 100%;
  background-image: url(../../static/image/wurenji.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: hidden;

}

.main-item3 {
  width: 50%;
  height: 42%;
  /* padding: 0px 0px; */
  margin-top: 20px;
}








/* 定制整个滚动条 */
::-webkit-scrollbar {
  width: 10px;
  /* 滚动条宽度 */
}

/* 定制滚动条轨道 */
::-webkit-scrollbar-track {
  background: #023375;
  border-radius: 10px;

  /* 轨道颜色 */
}

/* 定制滚动条的滑块（thumb） */
::-webkit-scrollbar-thumb {
  background: #0d68c1;
  border-radius: 10px;

  /* 滑块颜色 */
}

/* 当鼠标悬停在滑块上 */
::-webkit-scrollbar-thumb:hover {
  background: #DDDEE0;
  /* 滑块悬停颜色 */
}

.item3title {
  display: flex;
  justify-content: space-between;

}

.imgitem3 {
  width: 7vw;
  height: 8vh;
  border: 1px solid red;
}

.item3wh {
  width: 90%;
  padding-left: 40px;
  padding-right: 30px;
  line-height: 5vh;
  height: 4vh;
  margin: 0 auto;
  position: relative;
}

.item3whimg {
  position: absolute;
  top: 40%;
  left: 22px;
  width: 15px;
  height: 15px;
}

.item3wh1 {
  width: 90%;
  height: calc(100% - 4vh);
  padding: 0 20px;
  margin: 0 auto;
  align-items: center;
  font-size: 14px;
}

.item3_detail {}

.item3title1 {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 90%;
}

.item3_status {
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: bold;
  font-size: 20px;
  font-style: normal;
}

#echarts {
  width: 100%;
  height: calc(100% - 55px);
}
</style>