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

<template>
  <div class="screen">
    <div style="height: 10px" />
    <div class="titleImage">
      <el-image :src="titleUrl" />
      <span class="Heading">龙弛智慧隧道系统</span>
      <div
        class="titleOption"
        style="left: 19%"
        @click="jumpScreen('map')"
      >
        <span>地图</span>
      </div>
      <div
        class="titleOption"
        style="left: 76%"
        @click="jumpScreen('model')"
      >
        <span>模型</span>
      </div>
    </div>
    <div style="height: 10px" />
    <el-row>
      <el-col
        :span="5"
        style="height: 900px;"
      >
        <div class="deviceBox">
          <img
            src="@/assets/main_top_left.png"
            alt=""
          >
          <div class="titleIcon" />
          <div class="deviceBox_title">设备汇总</div>
          <div class="deviceOptionBox">
            <div
              v-for="item in deviceList"
              class="deviceOption"
            >
              <img
                :src="item.url"
                style="width: 35px;height: 35px"
                alt=""
              >
              <el-text
                style="padding-top: 8px;color: #ffffff"
                size="small"
              >{{ item.label + item.value }}</el-text>
            </div>
          </div>
        </div>
        <div class="chartBox">
          <Chart />
        </div>
        <div class="chartBox">
          <lightChart />
        </div>
      </el-col>
      <el-col
        :span="14"
        style="display: flex;justify-content: center"
      >
        <div class="centerBox">
          <Map />
        </div>
      </el-col>
      <el-col
        :span="5"
        class="rightBox"
      >
        <div style="height: 20px" />
        <div class="panel">
          <span class="panel-title">亮度调整</span>
          <!--          <el-slider-->
          <!--              v-model="transparency"-->
          <!--              :step="50"-->
          <!--              show-stops-->
          <!--              :show-tooltip="false"-->
          <!--              class="panel-slider"-->
          <!--              @change="changeTransparency"-->
          <!--          />-->
          <div
            class="brightness"
            style="margin: 90px 0 0 50px;"
          >
            <span>低</span>
            <span>中</span>
            <span>高</span>
          </div>
          <!--          <el-slider-->
          <!--              v-model="transparencyTwo"-->
          <!--              :step="50"-->
          <!--              show-stops-->
          <!--              :show-tooltip="false"-->
          <!--              class="panel-slider2"-->
          <!--              @change="changeTransparencyTwo"-->
          <!--          />-->
          <div
            class="brightness"
            style="margin: 50px 0 0 50px;"
          >
            <span>低</span>
            <span>中</span>
            <span>高</span>
          </div>
          <div class="panel-bottom" />
        </div>
        <div class="warnBox">
          <img
            :src="warn"
            alt=""
            class="warnBoxExternal"
          >
          <img
            :src="warnTitle"
            alt=""
            class="warnBoxTitle"
          >
          <span>警告列表</span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
// 标题图片
import titleUrl from '@/assets/title_bg.png'
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 Chart from './components/chart.vue'
import warn from '@/assets/main_bottopm_top2.png'
import Map from './components/map.vue'
import warnTitle from '@/assets/warnTitle.png'
// import lightChart from './components/lightChart.vue'
import { queryAllTunnels } from '@/api/tunnel'
import { reactive, onMounted } from 'vue'
import { useScreenStore } from '@/pinia/modules/screen'
const useScreen = useScreenStore()

const deviceList = reactive([
  { url: environments, label: '环境：', value: '2/1' },
  { url: fourWays, label: '四路：', value: '2/1' },
  { url: inductance, label: '电感：', value: '2/1' },
  { url: singleLamp, label: '单灯：', value: '2/1' },
])
const jumpScreen = (type) => {
  console.log(type)
}
onMounted(() => {
  queryAllTunnels().then(res => {
    if (res.code === 0) {
      console.log('标点数据',res.data)
      useScreen.setTunnelList(res.data)
    }
  })
})
</script>

<style scoped lang="less">
.horn {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
}
.screen{
  width: 100%;
  height: 1000px;
  //background-image: url("@/assets/back.jpeg");
  background-size:100% 100%;
  background: #2d407d url("@/assets/line.png");
  .titleImage {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .Heading{
      position: absolute;
      left: 42%;
      top: 25%;
      text-align: center;
      font-size: 1.7vw;
      font-weight: bold;
      color: #0EFCFF;
    }
    .titleOption{
      position: absolute;
      top: 7px;
      width: 100px;
      height: 32px;
      border: 1px solid #0EFCFF;
      color: #0EFCFF;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
    }
  }
  .deviceBox {
      width: 400px;
      height: 180px;
      margin: 20px;
      position: relative;
      pointer-events: auto;
      img {
        width: 400px;
        height: 180px;
      }
      .deviceBox_title {
        position: absolute;
        left: 30px;
        top: 15px;
        font-size: 20px;
        color: #0EFCFF;
      }
      .deviceOptionBox {
        position: absolute;
        top: 70px;
        width: 400px;
        height: 60px;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .deviceOption {
          width: 90px;
          height: 60px;
          display: flex;
          flex-direction: column;
          align-items: center;
          color: #ffffff;
        }
      }
    }
  .titleIcon{
    width: 5px;
    height: 20px;
    background-color: #0EFCFF;
    position: absolute;
    left: 20px;
    top: 16px;
  }
  .chartBox{
    width: 400px;
    height: 250px;
    margin: 20px;
    position: relative;
    pointer-events: auto;
  }
  .rightBox{
    height: 900px;
    .warnBox{
      position: relative;
      width: 400px;
      height: 300px;
      margin: 20px 0 0 20px;
      .warnBoxExternal{
        width: 400px;
        height: 270px;
      }
      .warnBoxTitle{
        width: 200px;
        height: 35px;
        position: absolute;
        left: 20px;
        top: 30px;
      }
      span{
        color:#ffffff;
        font-size: 18px;
        position: absolute;
        left: 70px;
        top: 37px;
      }
    }
    .panel{
      position: relative;
      width: 400px;
      height: 200px;
      margin-left: 20px;
      border: 1px solid rgba(25,186,139,0.17);
      padding: 0 0.1875rem 0.5rem;
      margin-bottom: 0.1875rem;
      background: url(@/assets/line.png) rgba(255,255,255,0.04);
      &::before{
        .horn;
        top: 0;
        left: 0;
        border-left: 2px solid #02a6b5;
        border-top: 2px solid #02a6b5;
      }
      &::after{
        .horn;
        top: 0;
        right: 0;
        border-right: 2px solid #02a6b5;
        border-top: 2px solid #02a6b5;
      }
      .panel-bottom{
        &::before{
          .horn;
          bottom: 0;
          left: 0;
          border-left: 2px solid #02a6b5;
          border-bottom: 2px solid #02a6b5;
        }
        &::after{
          .horn;
          bottom: 0;
          right: 0;
          border-right: 2px solid #02a6b5;
          border-bottom: 2px solid #02a6b5;
        }
      }
      .panel-title{
        position: absolute;
        left: 160px;
        top: 10px;
        font-size: 20px;
        font-weight: bold;
        color: #0EFCFF;
      }
      .panelSwitchTitle{
        color: #ffffff;
        font-size: 16px;
        position: absolute;
        bottom: 30px;
        font-weight: bold;
        left:25px;
      }
      .panelSwitch{
        position: absolute;
        right: 25px;
        bottom: 20px;
      }
      .panel-slider{
        width: 300px;
        position: absolute;
        top: 60px;
        left: 50px;
      }
      .panel-slider2{
        width: 300px;
        position: absolute;
        top: 120px;
        left: 50px;
      }
      .brightness{
        width: 300px;
        display: flex;
        justify-content: space-between;
        color: #909399;
        font-size: 14px;
      }
    }
  }
}

.dataBox{
  width: 200px;
  height: 150px;
  background-color: #283a72;
}

.centerBox{
  width: 1000px;
  height: 700px;
  border-radius: 10px;
  margin-top: 20px;
}

</style>