lc_tunnel/web/src/view/screen/dataDashboard.vue

<template>
  <div style="background-color: #0e122d">
    <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">
                  <img
                    :src="item.url"
                    style="width: 35px;height: 35px"
                    alt=""
                  >
                </div>
                <el-text
                  style="padding-top: 8px;color: #ffffff"
                  size="small"
                >
                  1/0
                </el-text>
              </div>
            </div>
          </div>
        </div>
        <div class="inductance">
          <div class="inductanceTitle">
            <img
              alt=""
              :src="Power"
              style="padding-left: 15px"
            >
            <span style="padding-left: 10px;">电感检测</span>
          </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 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: 500px"
            />
          </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: 500px"
            />
          </div>
        </div>
      </div>
      <div class="rightBox" />
    </div>
  </div>
</template>

<script setup>
import Device from '@/assets/icons/device.png'
import { 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 useScreen = useScreenStore()

// const deviceList = reactive([
//   { url: environments, label: '环境：', value: '1/0' },
//   { url: fourWays, label: '四路：', value: '1/0' },
//   { url: inductance, label: '电感：', value: '1/0' },
//   { url: singleLamp, label: '单灯：', value: '1/0' },
// ])

const deviceTypeList = reactive([])

const condition = {
  pageInfo: {
    page: 1,
    pageSize: 1000
  },
  name: '',
  regionId: 0,
  userId: 1
}

const lampData = reactive({})
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)
    }
  })
  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)
      console.log('设备类型', deviceTypeList)
    }
  })
})

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)
}

watch(() => useScreen.currentTunnel, (newValue) => {
  loading(newValue.envData)
  loadingLamp(newValue.envData)
})

</script>

<style scoped lang="less">
// 公共样式
.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: 1200px;
  background-color: #0e122d;
  display: flex;
  margin-top: 20px;
  .leftBox {
    width: 20%;
    height: 1200px;
    .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;
      .boxShape;
      .inductanceTitle {
        width: 370px;
        height: 50px;
        .title;
        img{
          width: 30px;
          height: 30px;
        }
      }
    }
    .warn {
      height: 400px;
      margin-top: 20px;
      .boxShape;
      .warnTitle {
        width: 370px;
        height: 50px;
        .title;
        img{
          width: 30px;
          height: 30px;
        }
      }
    }
  }
  .centerBox {
    width: 60%;
    height: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .centerBox_chart {
      width: 1200px;
      height: 220px;
      margin-top: 40px;
      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: 500px;
      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;
      }
    }
  }
  .rightBox {
    width: 20%;
    height: 1200px;
  }
}
</style>