修复了乱码bug

web/src/view/screen/components/test.vue

@@ -0,0 +1,756 @@
+<template>
+  <!--  #0e122d-->
+  <div class="totalContainer">
+    <Map style="z-index: 0"/>
+    <div class="screenTitle">
+      <img
+          :src="topBg"
+          alt=""
+      >
+      <span>龙弛智慧隧道系统</span>
+    </div>
+    <div class="screen">
+      <div class="leftBox">
+        <div class="deviceSummary">
+          <div class="deviceSummary_title">
+            <img
+                alt=""
+                :src="Device"
+                style="padding-left: 15px"
+            >
+            <span style="padding-left: 10px;">设备汇总</span>
+          </div>
+          <div class="deviceOptionBox">
+            <div
+                v-for="item in deviceTypeList"
+                :key="item.id"
+                class="deviceOptionRow"
+            >
+              <div
+                  v-for="item2 in item"
+                  :key="item2.ID"
+                  class="deviceOption"
+              >
+                <div style="width: 35px;height: 35px">
+                  <el-tooltip
+                      :content="item2.name"
+                      placement="bottom"
+                      effect="light"
+                  >
+                    <el-icon
+                        size="35"
+                        color="#1b92fd"
+                    >
+                      <component :is="item2.iconAddress" />
+                    </el-icon>
+                  </el-tooltip>
+                </div>
+                <el-text
+                    style="padding-top: 8px;color: #ffffff"
+                    size="small"
+                >
+                  数量：{{ item2.Count }}
+                </el-text>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="warn">
+          <div class="warnTitle">
+            <img
+                alt=""
+                :src="Warn"
+                style="padding-left: 15px"
+            >
+            <span style="padding-left: 10px;">警告列表</span>
+          </div>
+        </div>
+      </div>
+      <div class="centerBox">
+        <div style="width: 1200px;height: 600px;border: 3px solid #1b92fd; padding: 2px">
+          <Map />
+        </div>
+      </div>
+      <div class="rightBox" />
+    </div>
+    <div class="centerBox_chart">
+      <div class="centerBox_environment">
+        <div class="centerBox_environment_title">
+          <img
+              :src="Setting"
+              alt=""
+              style="padding-left: 10px"
+          >
+          <span style="padding-left: 15px;">环境</span>
+        </div>
+        <div
+            id="environment"
+            class="centerBox_environment_chart"
+            style="width: 600px"
+        />
+      </div>
+      <div class="centerBox_environment">
+        <div class="centerBox_environment_title">
+          <img
+              :src="Sunlight"
+              alt=""
+              style="padding-left: 10px"
+          >
+          <span style="padding-left: 15px;">光照度</span>
+        </div>
+        <div
+            id="lamp"
+            class="centerBox_environment_chart"
+            style="width: 600px"
+        />
+      </div>
+      <div class="centerBox_environment">
+        <div class="centerBox_environment_title">
+          <img
+              :src="Power"
+              alt=""
+              style="padding-left: 10px"
+          >
+          <span style="padding-left: 15px;">电感</span>
+        </div>
+        <div
+            id="main"
+            class="inductanceBox"
+        />
+        <div class="custom-select">
+          <select @change="changePowerDevice($event.target.value)">
+            <option
+                v-for="(item,index) in powerList"
+                :key="item.ID"
+                :value="index"
+            >
+              {{ item.name }}
+            </option>
+          </select>
+        </div>
+      </div>
+    </div>
+    <div class="testBox">
+      <div class="container" @click="openData">
+        <img
+            :src="Setting"
+            alt=""
+            style="padding-left: 10px"
+        >
+        <span>环境</span>
+        <div style="width: 350px"></div>
+        <img :src="Expand" alt="" :style="{ transform: `rotate(${rotation}deg)` }">
+      </div>
+      <Transition name="slide">
+        <div v-show="isExpanded" class="content">
+          <div
+              id="environment"
+              class="content_chart"
+              style="width: 500px"
+          />
+        </div>
+      </Transition>
+    </div>
+  </div>
+  <div class="testBox">
+    <div class="container" @click="openData">
+      <img
+          :src="Setting"
+          alt=""
+          style="padding-left: 10px"
+      >
+      <span>环境</span>
+      <div style="width: 350px"></div>
+      <img :src="Expand" alt="" :style="{ transform: `rotate(${rotation}deg)` }">
+    </div>
+    <Transition name="slide">
+      <div v-show="isExpanded" class="content">
+        <div
+            id="environment"
+            class="content_chart"
+            style="width: 500px"
+        />
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup>
+import Device from '@/assets/icons/device.png'
+import Expand from '@/assets/icons/expand.png'
+import { ref, reactive, onMounted, watch } from 'vue'
+// import environments from '@/assets/icons/environment.png'
+// import fourWays from '@/assets/icons/fourWays.png'
+// import inductance from '@/assets/icons/inductance.png'
+// import singleLamp from '@/assets/icons/singleLamp.png'
+import Setting from '@/assets/icons/setting.png'
+import Sunlight from '@/assets/icons/sunlight.png'
+import topBg from '@/assets/icons/topbg.png'
+import Power from '@/assets/icons/power.png'
+import Warn from '@/assets/icons/warn.png'
+import Map from '@/view/screen/components/map.vue'
+import * as echarts from 'echarts'
+import { useScreenStore } from '@/pinia/modules/screen'
+import { queryTunnelList } from '@/api/tunnel'
+import { queryAllDeviceGenres } from '@/api/device'
+const rotation = ref(0)
+const useScreen = useScreenStore()
+// .................................................................
+const deviceTypeList = reactive([])
+
+const condition = {
+  pageInfo: {
+    page: 1,
+    pageSize: 1000
+  },
+  name: '',
+  regionId: 0,
+  userId: 1
+}
+
+const lampData = reactive({})
+const powerList = reactive([])
+
+const isExpanded = ref(false)
+onMounted(() => {
+  queryTunnelList(condition).then(res => {
+    if (res.code === 0) {
+      useScreen.setTunnelList(res.data)
+      Object.assign(lampData, res.data.list[0])
+      loading(lampData.envData)
+      loadingLamp(lampData.envData)
+      powerList.length = 0
+      lampData.devices.forEach(item => {
+        if (item.genre === 7) {
+          powerList.push(item)
+        }
+      })
+      if (powerList.length === 0) {
+        loadInductance([])
+        return
+      }
+      loadInductance(powerList[0].inductanceDetails)
+    }
+  })
+  queryAllDeviceGenres().then(res => {
+    if (res.code === 0) {
+      const result = []
+      for (let i = 0; i < res.data.length; i += 4) {
+        result.push(res.data.slice(i, i + 4))
+      }
+      deviceTypeList.push(...result)
+    }
+  })
+})
+
+const loading = (list) => {
+  const chartDom = document.getElementById('environment')
+  const myChart = echarts.init(chartDom)
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        crossStyle: {
+          color: '#ffffff'
+        }
+      },
+    },
+    legend: {
+      data: [
+        // '待下发','处置中','已完成'
+        {
+          name: '温度',
+          textStyle: {
+            color: '#0EFCFF' // 图例文字颜色
+          }
+        },
+        {
+          name: '湿度',
+          textStyle: {
+            color: '#1b92fd' // 图例文字颜色
+          }
+        }
+      ],
+    },
+    xAxis: {
+      type: 'time', // 使用时间类型的x轴
+      boundaryGap: false,
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#ffffff',
+          width: 1,
+          type: 'solid'
+        }
+      }
+    },
+    yAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#ffffff',
+          width: 1,
+          type: 'solid'
+        }
+      },
+      splitLine: {
+        lineStyle: {
+          color: ['#ffffff']
+        }
+      }
+    },
+    series: [
+      {
+        name: '温度',
+        type: 'line',
+        data: list.map(item => [new Date(item.CreatedAt).getTime(), item.temperature])
+      },
+      {
+        name: '湿度',
+        type: 'line',
+        data: list.map(item => [new Date(item.CreatedAt).getTime(), item.humidity])
+      }
+    ],
+  }
+
+  option && myChart.setOption(option)
+}
+
+const loadingLamp = (list) => {
+  const chartDom = document.getElementById('lamp')
+  const myChart = echarts.init(chartDom)
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        crossStyle: {
+          color: '#ffffff'
+        }
+      },
+    },
+    legend: {
+      data: [
+        {
+          name: '光照度',
+          textStyle: {
+            color: '#ffffff' // 图例文字颜色
+          }
+        },
+      ]
+    },
+    xAxis: {
+      type: 'time', // 使用时间类型的x轴
+      boundaryGap: false,
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#ffffff',
+          width: 1,
+          type: 'solid'
+        }
+      }
+    },
+    yAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#ffffff',
+          width: 1,
+          type: 'solid'
+        }
+      },
+      splitLine: {
+        lineStyle: {
+          color: ['#ffffff']
+        }
+      }
+    },
+    series: [
+      {
+        name: '光照度',
+        type: 'bar',
+        data: list.map(item => [new Date(item.CreatedAt).getTime(), item.illuminance])
+      },
+    ]
+  }
+
+  option && myChart.setOption(option)
+}
+
+const loadInductance = (list) => {
+  const chartDom = document.getElementById('main')
+  const myChart = echarts.init(chartDom)
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        crossStyle: {
+          color: '#ffffff'
+        }
+      },
+    },
+    legend: {
+      data: [
+        {
+          name: '电感',
+          textStyle: {
+            color: '#409eff' // 图例文字颜色
+          }
+        },
+      ],
+    },
+    xAxis: {
+      type: 'time', // 使用时间类型的x轴
+      boundaryGap: false,
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#ffffff',
+          width: 1,
+          type: 'solid'
+        }
+      }
+    },
+    yAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#ffffff',
+          width: 1,
+          type: 'solid'
+        }
+      },
+      splitLine: {
+        lineStyle: {
+          color: ['#ffffff']
+        }
+      }
+    },
+    series: [
+      {
+        name: '电感',
+        data: list.map(item => [new Date(item.uploadTime), item.totalActivePower]),
+        type: 'line',
+        areaStyle: {}
+      }
+    ]
+  }
+
+  option && myChart.setOption(option)
+}
+
+watch(() => useScreen.currentTunnel, (newValue) => {
+  loading(newValue.envData)
+  loadingLamp(newValue.envData)
+  powerList.length = 0
+  newValue.devices.forEach(item => {
+    if (item.genre === 7) {
+      powerList.push(item)
+    }
+  })
+  if (powerList.length === 0) {
+    loadInductance([])
+    return
+  }
+  loadInductance(powerList[0].inductanceDetails)
+})
+
+const changePowerDevice = (e) => {
+  loadInductance(powerList[e].inductanceDetails)
+}
+
+const openData = () => {
+  console.log('点击展开')
+  isExpanded.value = !isExpanded.value
+  isExpanded.value ? rotation.value = 180 : rotation.value = 0
+}
+</script>
+
+<style scoped lang="less">
+.totalContainer {
+  width: 100%;
+  height: 100vh;
+  overflow-y: auto;
+  z-index: 0;
+}
+// 公共样式
+.title {
+  display: flex;
+  align-items: center;
+  font-size: 20px;
+  font-family: PingFang-SC-Medium,serif;
+  color: rgba(27, 146, 253, 1);
+}
+.boxShape {
+  width: 370px;
+  border: 1px solid rgba(27,146,253,0.5);
+  background: rgba(50, 72, 106, 0.2);
+  margin-left: 20px;
+}
+//.....................
+.screenTitle{
+  width: 100%;
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  //background: linear-gradient(to bottom, #2583e0, #80aad8); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
+  //-webkit-background-clip: text;/*将设置的背景颜色限制在文字中*/
+  //-webkit-text-fill-color: transparent;/*给文字设置成透明*/
+  position: relative;
+  span{
+    position: absolute;
+    top: 30px;
+    left: 890px;
+    font-size: 30px;
+    color: #ffffff;
+    padding-left: 20px;
+    letter-spacing: 10px;
+  }
+  img{
+    height: 80px;
+  }
+}
+.screen{
+  width: 100%;
+  height: 600px;
+  background-color: #0e122d;
+  display: flex;
+  margin-top: 20px;
+  .leftBox {
+    width: 20%;
+    height: 600px;
+    .deviceSummary {
+      height: 240px;
+      .boxShape;
+      .deviceSummary_title {
+        width: 370px;
+        height: 50px;
+        .title;
+        img{
+          width: 30px;
+          height: 30px;
+        }
+      }
+      .deviceOptionBox {
+        width: 370px;
+        height: 190px;
+        margin-top: 20px;
+        .deviceOptionRow {
+          width: 100%;
+          height: 60px;
+          display: flex;
+          margin-top: 20px;
+          .deviceOption {
+            width: 90px;
+            height: 60px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            color: #ffffff;
+          }
+        }
+      }
+    }
+    .inductance {
+      height: 200px;
+      margin-top: 20px;
+      position: relative;
+      .boxShape;
+      .inductanceTitle {
+        width: 370px;
+        height: 50px;
+        .title;
+        img{
+          width: 30px;
+          height: 30px;
+        }
+      }
+    }
+    .warn {
+      height: 340px;
+      margin-top: 20px;
+      .boxShape;
+      .warnTitle {
+        width: 370px;
+        height: 50px;
+        .title;
+        img{
+          width: 30px;
+          height: 30px;
+        }
+      }
+    }
+  }
+  .centerBox {
+    width: 60%;
+    height: 600px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .rightBox {
+    width: 20%;
+    height: 600px;
+  }
+}
+.centerBox_chart {
+  width: 2080px;
+  height: 300px;
+  margin-top: 40px;
+  margin-left: 20px;
+  display: flex;
+  justify-content: space-between;
+  border: 1px solid rgba(27,146,253,0.5);
+  background: rgba(50, 72, 106, 0.2);
+}
+.centerBox_environment{
+  width: 600px;
+  height: 220px;
+  position: relative;
+  .centerBox_environment_title {
+    width: 500px;
+    height: 50px;
+    .title;
+    img {
+      width: 30px;
+      height: 30px;
+    }
+  }
+  .centerBox_environment_chart {
+    height: 250px;
+    position: absolute;
+    top: 5px;
+  }
+  .inductanceBox {
+    width: 600px;
+    height: 250px;
+    position: absolute;
+    top: 5px;
+  }
+  .custom-select {
+    width: 150px;
+    position: absolute;
+    right: 20px;
+    top: 10px;
+  }
+
+  .custom-select select {
+    width: 100%;
+    padding: 10px;
+    background-color: rgba(50, 72, 106, 0.2);
+    color: #ecf0f1;
+    border: 2px solid rgba(27,146,253,0.5);
+    border-radius: 5px;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-repeat: no-repeat;
+    background-position: right 10px center;
+    cursor: pointer;
+  }
+
+  .custom-select select:focus {
+    outline: none;
+    border-color: #3498db;
+  }
+
+  .custom-select option {
+    background-color: #2c3e50;
+    color: #ecf0f1;
+  }
+
+  .custom-select option:hover {
+    background-color: #3498db;
+  }
+}
+.el-popper.is-customized {
+  /* Set padding to ensure the height is 32px */
+  padding: 6px 12px;
+  background: #409eff;
+}
+
+.el-popper.is-customized .el-popper__arrow::before {
+  background: #409eff;
+  right: 0;
+}
+
+.testBox {
+  width: 500px;
+  height: 400px;
+  z-index: 1;
+  .container {
+    width: 500px;
+    height: 40px;
+    background-color: rgba(50, 58, 64, 0.95);
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #409eff;
+    img{
+      width: 25px;
+      height: 25px;
+      transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+    span{
+      font-size: 15px;
+      padding-left: 5px;
+      color: rgba(27, 146, 253, 1);
+    }
+  }
+  .fold-enter-active,
+  .fold-leave-active {
+    transition: max-height 0.5s ease, opacity 0.5s ease;
+    overflow: hidden;
+  }
+  .fold-enter-from,
+  .fold-leave-to {
+    max-height: 0 !important;
+    opacity: 0;
+  }
+  .content {
+    /* 必须设置明确最大高度（略大于实际内容高度） */
+    height: 270px;
+    width: 500px;
+    padding-top: 10px;
+    background-color: rgba(50, 58, 64, 0.95);
+    .content_chart {
+      height: 250px;
+    }
+  }
+}
+.slide-enter-active,
+.slide-leave-active {
+  transition:
+      transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
+      opacity 0.3s ease;
+}
+
+/* 进入动画起始状态（从上方不可见位置开始） */
+.slide-enter-from {
+  transform: translateY(-30px);
+  opacity: 0;
+}
+
+/* 进入动画结束状态 */
+.slide-enter-to {
+  transform: translateY(0px);
+  opacity: 1;
+}
+
+/* 离开动画起始状态 */
+.slide-leave-from {
+  transform: translateY(0px);
+  opacity: 1;
+}
+
+/* 离开动画结束状态（向上移动并消失） */
+.slide-leave-to {
+  transform: translateY(-30px);
+  opacity: 0;
+}
+</style>
+
+

web/src/view/screen/components/time.vue

@@ -0,0 +1,48 @@
+<template>
+  <div style="color: #ffffff">
+    <p>{{ currentDate }}</p>
+    <p>{{ weekday }}&nbsp;&nbsp;{{ currentTime }}</p>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+
+// 响应式数据
+const currentDate = ref('');
+const weekday = ref('');
+const currentTime = ref('');
+
+// 更新时间函数
+const updateDateTime = () => {
+  console.log('组装time')
+  const now = new Date();
+
+  // 格式化年月日
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, '0');
+  const day = String(now.getDate()).padStart(2, '0');
+  currentDate.value = `${year}年${month}月${day}日`;
+
+  // 格式化星期
+  const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+  weekday.value = weekdays[now.getDay()];
+
+  // 格式化时分秒
+  const hours = String(now.getHours()).padStart(2, '0');
+  const minutes = String(now.getMinutes()).padStart(2, '0');
+  const seconds = String(now.getSeconds()).padStart(2, '0');
+  currentTime.value = `${hours}:${minutes}:${seconds}`;
+};
+
+// 初始化及定时刷新
+let timer;
+onMounted(() => {
+  updateDateTime();
+  timer = setInterval(updateDateTime, 1000); // 每秒更新
+});
+
+onUnmounted(() => {
+  clearInterval(timer); // 组件卸载时清除定时器
+});
+</script>

web/src/view/screen/dataDashboard.vue

@@ -5,46 +5,97 @@
       <Map/>
     </div>
     <div class="titleBox">
-
+<!--      <div style="width: 900px"></div>-->
+      <span style="padding-left: 950px">龙弛智慧隧道</span>
+      <Time style="padding-left: 800px"/>
     </div>
-    <div class="testBox" style="left: 10px;top: 100px;width: 600px">
-      <div class="container" @click="openData">
+    <div class="testBox" style="left: 10px;top: 100px;width: 500px;">
+      <div class="container" @click="openData(0)">
         <img
-            :src="Setting"
             alt=""
-            style="padding-left: 10px"
+            :src="Device"
+            style="padding-left: 15px"
         >
-        <span>环境</span>
-        <div style="width: 350px"></div>
-        <img :src="Expand" alt="" :style="{ transform: `rotate(${rotation}deg)` }">
+        <span style="padding-left: 10px;">设备汇总/环境</span>
+        <div style="width: 290px"></div>
+        <img :src="Expand" alt="" :style="{ transform: `rotate(${rotation[0]}deg)` }">
       </div>
       <Transition name="slide">
-        <div v-show="isExpanded" class="content">
+        <div v-show="isExpanded[0]" class="content" style="width: 500px;height: 430px;position: relative">
+          <div class="deviceOptionBox">
+            <div
+                v-for="item in deviceTypeList"
+                :key="item.id"
+                class="deviceOption"
+            >
+              <div style="width: 35px;height: 35px">
+                <el-tooltip
+                    :content="item.name"
+                    placement="bottom"
+                    effect="light"
+                >
+                  <el-icon
+                      size="35"
+                      color="#1b92fd"
+                  >
+                    <component :is="item.iconAddress" />
+                  </el-icon>
+                </el-tooltip>
+              </div>
+              <el-text
+                  style="padding-top: 8px;color: #ffffff"
+                  size="small"
+              >
+                数量：{{ item.Count }}
+              </el-text>
+            </div>
+          </div>
           <div
               id="environment"
               class="content_chart"
-              style="width: 500px"
+              style="width: 500px; position: absolute; top: 150px;"
           />
         </div>
       </Transition>
     </div>
-    <div class="testBox" style="left: 10px;top: 450px">
-      <div class="container" @click="openData">
+    <div class="testBox" style="right: 10px;top: 100px;width: 600px">
+      <div class="container" @click="openData(2)">
         <img
             :src="Setting"
             alt=""
             style="padding-left: 10px"
         >
-        <span>光照度</span>
-        <div style="width: 350px"></div>
-        <img :src="Expand" alt="" :style="{ transform: `rotate(${rotation}deg)` }">
+        <span>光照度/电感</span>
+        <div style="width: 400px"></div>
+        <img :src="Expand" alt="" :style="{ transform: `rotate(${rotation[2]}deg)` }">
       </div>
       <Transition name="slide">
-        <div v-show="isExpanded" class="content">
+        <div
+            v-show="isExpanded[2]"
+            class="content"
+            style="width: 600px; height: 600px;
+            position: relative">
           <div
               id="lamp"
               class="content_chart"
-              style="width: 600px"
+              style="width: 600px;padding-left: 10px"
+          />
+          <select
+              @change="changePowerDevice($event.target.value)"
+              style="position: absolute;right: 20px;top: 300px"
+          >
+            <option
+                v-for="(item,index) in powerList"
+                :key="item.ID"
+                :value="index"
+            >
+              {{ item.name }}
+            </option>
+          </select>
+          <div
+              id="main"
+              class="inductanceBox"
+              style="position: absolute; top: 350px"
           />
         </div>
       </Transition>
@@ -53,24 +104,26 @@
 </template>
 
 <script setup>
-import Device from '@/assets/icons/device.png'
-import Expand from '@/assets/icons/expand.png'
-import { ref, reactive, onMounted, watch } from 'vue'
 // import environments from '@/assets/icons/environment.png'
 // import fourWays from '@/assets/icons/fourWays.png'
 // import inductance from '@/assets/icons/inductance.png'
 // import singleLamp from '@/assets/icons/singleLamp.png'
-import Setting from '@/assets/icons/setting.png'
 import Sunlight from '@/assets/icons/sunlight.png'
 import topBg from '@/assets/icons/topbg.png'
 import Power from '@/assets/icons/power.png'
 import Warn from '@/assets/icons/warn.png'
+import Device from '@/assets/icons/device.png'
+import Expand from '@/assets/icons/expand.png'
+import { ref, reactive, onMounted, watch } from 'vue'
+import Setting from '@/assets/icons/setting.png'
 import Map from '@/view/screen/components/map.vue'
 import * as echarts from 'echarts'
 import { useScreenStore } from '@/pinia/modules/screen'
 import { queryTunnelList } from '@/api/tunnel'
 import { queryAllDeviceGenres } from '@/api/device'
-const rotation = ref(0)
+import Time from "@/view/screen/components/time.vue";
+const rotation = reactive([0,0,0,0])
+const isExpanded = reactive([false,false,false,false])
 const useScreen = useScreenStore()
 // .................................................................
 const deviceTypeList = reactive([])
@@ -88,7 +141,6 @@ const condition = {
 const lampData = reactive({})
 const powerList = reactive([])
 
-const isExpanded = ref(false)
 onMounted(() => {
   queryTunnelList(condition).then(res => {
     if (res.code === 0) {
@@ -111,11 +163,13 @@ onMounted(() => {
   })
   queryAllDeviceGenres().then(res => {
     if (res.code === 0) {
-      const result = []
-      for (let i = 0; i < res.data.length; i += 4) {
-        result.push(res.data.slice(i, i + 4))
-      }
-      deviceTypeList.push(...result)
+      // const result = []
+      // for (let i = 0; i < res.data.length; i += 4) {
+      //   result.push(res.data.slice(i, i + 4))
+      // }
+      deviceTypeList.length = 0
+      deviceTypeList.push(...res.data)
+      console.log('data',deviceTypeList)
     }
   })
 })
@@ -339,10 +393,9 @@ const changePowerDevice = (e) => {
   loadInductance(powerList[e].inductanceDetails)
 }
 
-const openData = () => {
-  console.log('点击展开')
-  isExpanded.value = !isExpanded.value
-  isExpanded.value ? rotation.value = 180 : rotation.value = 0
+const openData = (val) => {
+  isExpanded[val] = !isExpanded[val]
+  isExpanded[val] ? rotation[val] = 180 : rotation[val] = 0
 }
 </script>
 
@@ -362,18 +415,18 @@ const openData = () => {
   z-index: 1;
   .container {
     height: 40px;
-    background-color: rgba(50, 58, 64, 0.95);
+    background-color: rgba(21,28,57, 0.95);
     display: flex;
     align-items: center;
     border-bottom: 1px solid #409eff;
     img{
-      width: 25px;
-      height: 25px;
+      width: 20px;
+      height: 20px;
       transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
     }
     span{
-      font-size: 20px;
-      padding-left: 5px;
+      font-size: 18px;
+      padding-left: 15px;
       color: #ffffff;
     }
   }
@@ -390,23 +443,76 @@ const openData = () => {
   .content {
     /* 必须设置明确最大高度（略大于实际内容高度） */
     height: 270px;
-    width: 500px;
     padding-top: 10px;
-    background-color: rgba(50, 58, 64, 1);
+    background-color: rgba(21,28,57, 1);
     .content_chart {
       height: 250px;
     }
+    select {
+      width: 150px;
+      padding: 10px;
+      background-color: rgba(50, 72, 106, 0.2);
+      color: #ecf0f1;
+      border: 2px solid rgba(27,146,253,0.5);
+      border-radius: 5px;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      background-repeat: no-repeat;
+      background-position: right 10px center;
+      cursor: pointer;
+    }
+    select:focus {
+      outline: none;
+      border-color: #3498db;
+    }
+    option {
+      background-color: #2c3e50;
+      color: #ecf0f1;
+    }
+    option:hover {
+      background-color: #3498db;
+    }
+  }
+  .deviceOptionBox {
+    width: 100%;
+    height: 400px;
+    margin-top: 20px;
+    display: flex;
+    .deviceOption {
+      width: 90px;
+      height: 60px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      color: #ffffff;
+    }
   }
 }
 
+.inductanceBox {
+  width: 600px;
+  height: 250px;
+  position: absolute;
+  top: 5px;
+}
+
 .titleBox {
   width: 100%;
   height: 80px;
   background-color: #000000;
   position: absolute;
+  display: flex;
+  align-items: center;
   top: 0;
   z-index: 1;
   opacity: 0.5;
+  span {
+    font-size: 30px;
+    color: #ffffff;
+    font-weight: 550;
+    letter-spacing: 5px;
+  }
 }
 // 公共样式
 .title {