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

<template>
  <div class="screen">
    <div style="height: 10px"></div>
    <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"></div>
    <el-row>
      <el-col :span="5" style="height: 900px;">
        <div class="deviceBox">
          <img src="@/assets/main_top_left.png" alt=""/>
          <div class="titleIcon"></div>
          <div class="deviceBox_title">设备汇总</div>
          <div class="deviceOptionBox">
            <div class="deviceOption" v-for="item in deviceList">
              <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 @call-parent="parentMethod"/>
        </div>
      </el-col>
      <el-col :span="5" class="rightBox">
        <div style="height: 20px"></div>
        <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>
<!--        <div class="vehicleBox">-->
<!--          <div class="panel" style="height: 190px">-->
<!--            <span class="panel-title">车辆检测器</span>-->
<!--            <el-form style="position: absolute;left: 40px;top: 50px">-->
<!--              <el-form-item label="交通量" label-width="110" label-position="left">-->
<!--                <el-row style="width: 200px">-->
<!--                  <el-col :span="15" class="vehicleData">-->
<!--                    <span>123</span>-->
<!--                  </el-col>-->
<!--                  <el-col :span="9" class="vehicleUnit">-->
<!--                    <span>辆</span>-->
<!--                  </el-col>-->
<!--                </el-row>-->
<!--              </el-form-item>-->
<!--              <el-form-item label="平均车速" label-width="110" label-position="left">-->
<!--                <el-row style="width: 200px">-->
<!--                  <el-col :span="15" class="vehicleData">-->
<!--                    <span>66</span>-->
<!--                  </el-col>-->
<!--                  <el-col :span="9" class="vehicleUnit">-->
<!--                    <span>km/h</span>-->
<!--                  </el-col>-->
<!--                </el-row>-->
<!--              </el-form-item>-->
<!--              <el-form-item label="车道占有量" label-width="110" label-position="left">-->
<!--                <el-row style="width: 200px">-->
<!--                  <el-col :span="15" class="vehicleData">-->
<!--                    <span>12</span>-->
<!--                  </el-col>-->
<!--                  <el-col :span="9" class="vehicleUnit">-->
<!--                    <span>%</span>-->
<!--                  </el-col>-->
<!--                </el-row>-->
<!--              </el-form-item>-->
<!--            </el-form>-->
<!--            <div class="panel-bottom"></div>-->
<!--          </div>-->
<!--        </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 { queryTunnelList } from '@/api/tunnel'
import {reactive, onMounted, ref, watch} from 'vue'
// 单灯控制
import { updateTunnelLamp } from "@/api/tunnel";
// 四路控制
import { deviceSwitch } from "@/api/device";
import {useScreenStore} from "@/pinia/modules/screen";
import {ElMessage} from "element-plus";
// 灯光数据
const lampData = reactive({})
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 condition = {
  pageInfo: {
    page: 1,
    pageSize: 1000
  },
  name: '',
  regionId: 0,
  userId: 1
}

// 存储模型数据
let materialOne = reactive({})
let materialTwo = reactive({})

// 亮度调整
const transparency = ref(0)
const relayList = reactive([])
const changeTransparency = (e) => {
  let option = {
    0: [0.8, 33, 1],
    50: [0.5, 66, 2],
    100: [0.2, 100, 3]
  }
  materialOne.opacity = option[e][0]
  if (lampData.switchType === '单灯控制器') {
    updateTunnelLamp({
      id: lampData.ID,
      tunnelSn: lampData.tunnelSn,
      lampValue1: option[e][1]
    }).then(res => {
      if (res.code === 0) {
        ElMessage.success('已发送')
      }
    })
  } else {
    let relay = relayList[0].deviceRelays
    for (let i = 0; i < relay.length; i++) {
      relay[i].state = i < option[e][2];
    }
    for (let j = 0; j < relay.length; j++) {
      deviceSwitch({
        tunnelSn: lampData.tunnelSn,
        radarId: relayList[0].radarId,
        relayId: relay[j].relayId,
        state: relay[j].state
      }).then(res => {
        if (res.code === 0) {
          console.log('发送成功')
        }
      })
    }
  }
}

const transparencyTwo = ref(0)
const changeTransparencyTwo = (e) => {
  let option = {
    0: [0.8, 33, 1],
    50: [0.5, 66, 2],
    100: [0.2, 100, 3]
  }
  materialTwo.opacity = option[e][0]
  if (lampData.switchType === '单灯控制器') {
    updateTunnelLamp({
      id: lampData.ID,
      tunnelSn: lampData.tunnelSn,
      lampValue2: option[e][1]
    }).then(res => {
      if (res.code === 0) {
        ElMessage.success('已发送')
      }
    })
  } else {
    let relay = relayList[1].deviceRelays
    for (let i = 0; i < relay.length; i++) {
      relay[i].state = i < option[e][2];
    }
    for (let j = 0; j < relay.length; j++) {
      deviceSwitch({
        tunnelSn: lampData.tunnelSn,
        radarId: relayList[1].radarId,
        relayId: relay[j].relayId,
        state: relay[j].state
      }).then(res => {
        if (res.code === 0) {
          console.log('发送成功');
        }
      })
    }
  }
}

const parentMethod = (e) => {
  console.log('子组件调用了')
  console.log(e)
}

const brightness = () => {
  if (lampData.switchType === '单灯控制器') {
    let val1 = lampData.lampValue1
    let val2 = lampData.lampValue2
    let judge = {
      0:[0.8,0],
      33: [0.8,0],
      66: [0.5,50],
      100: [0.2,100],
    }
    transparency.value = judge[val1][1]
    transparencyTwo.value = judge[val1][1]
    materialOne.opacity = judge[val1][0]
    materialTwo.opacity = judge[val2][0]
  } else if(lampData.switchType === '四路控制器') {
    relayList.length = 0
    lampData.devices.forEach(item => {
      if (item.genre === 6) {
        relayList.push(item)
      }
    })
    let deviceLamp1 = relayList[0].deviceRelays
    let deviceLamp2 = relayList[1].deviceRelays
    let count1 = 0
    let count2 = 0
    deviceLamp1.forEach(item => {
      item.state ? count1++ : count1
    })
    deviceLamp2.forEach(item => {
      item.state ? count2++ : count2
    })
    let judgeWay = {
      0: [0.8,0],
      1: [0.8,0],
      2: [0.5,50],
      3: [0.2,100],
      4: [0.2,100]
    }
    transparency.value = judgeWay[count1][1]
    transparencyTwo.value = judgeWay[count2][1]
    materialOne.opacity = judgeWay[count1][0]
    materialTwo.opacity = judgeWay[count2][0]
  }
}
onMounted(() => {
  queryTunnelList(condition).then(res => {
    if (res.code === 0) {
      useScreen.setTunnelList(res.data)
      Object.assign(lampData, res.data.list[0])
      brightness()
    }
  })
})

watch(() => useScreen.currentTunnel, (newValue, oldValue) => {
  yourMethod(newValue) // 调用你的方法
})

const yourMethod = (value) => {
  Object.assign(lampData, value)
  brightness()
}
</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: 450px;
    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;
      }
    }
    //.vehicleBox{
    //  margin-top: 30px;
    //  margin-bottom: 30px;
    //  .vehicleData{
    //    display: flex;
    //    justify-content: end;
    //    align-items: center;
    //    span {
    //      font-size: 18px;
    //      font-weight: bold;
    //      color: #0EFCFF;
    //    }
    //  }
    //  .vehicleUnit{
    //    display: flex;
    //    justify-content: end;
    //    align-items: center;
    //    span {
    //      color: #909399;
    //    }
    //  }
    //}
  }
}

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

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

</style>