jihe-hs/ruoyi-ui/src/views/index.vue

<template>
  <div class="home_page">
    <!-- 地图 -->
    <div class="home_page_map">
      <GaoDeMap />
    </div>
    <!-- 左边 -->
    <div class="home_page_left">
      <div class="home_page_left_t">
        <div class="home_page_left_t_txt">
          <div class="home_page_left_t_txt_l">
            <div class="home_page_left_t_txt_l_tit">重点监控</div>
          </div>
          <div class="home_page_left_t_txt_r"></div>
        </div>
        <div class="home_page_left_t_b">
          <div class="home_page_left_t_b_item" v-for="item in keyMonitoringList" :key="item.id">
            <div v-if="item.id !== 9" class="home_page_left_t_b_item_top" :style="{'color':item.col}">{{ item.val }} <span class="t_b_item_top_unit">{{ item.unit }}</span></div>
            <div v-if="item.id !== 9" class="home_page_left_t_b_item_bom">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div class="home_page_left_b">
        <div class="home_page_left_b_btn">
          <div class="home_page_left_b_btn_item" v-for="item in subjectBtnList" :key="item.id" @click="subjectBtnFn(item)" :class="{'left_b_cont_active': subjectBtn === item.id}">{{ item.name }}</div>
        </div>
        <div v-if="subjectBtn === 21" class="left_b_cont">事件专题</div>
        <div v-if="subjectBtn === 22" class="left_b_cont">
          <div class="left_b_cont_c">
            <div class="left_b_cont_c_item" v-for="item in roadEquipment" :key="item.id">
              <img :src="item.imgList[item.state]" alt="" class="left_b_cont_c_item_img">
              <div class="left_b_cont_c_item_txt">{{ item.name }}</div>
            </div>
            <div class="left_b_cont_c_sba">
              <img class="left_b_cont_c_sba_img" src="@/assets/screen/xtb/sb.png" alt="">
              <div class="left_b_cont_c_sba_txt">清空图层</div>
            </div>
          </div>
        </div>
        <div v-if="subjectBtn === 23" class="left_b_cont">路网设备</div>
      </div>
    </div>
    <!-- 右边 -->
    <div class="home_page_right">
      <div class="home_page_right_t_txt">
        <div class="home_page_left_t_txt_l">
          <div class="home_page_left_t_txt_l_tit">状况统计</div>
        </div>
        <div class="home_page_right_r"></div>
      </div>
      <div class="home_page_right_con">
        <div class="home_page_right_con_event">预警事件</div>
        <div class="home_page_right_con_ec">
          <div class="con_ec_left">
            <div class="con_ec_left_c">
              <div class="con_ec_left_c_t">今日: <span class="ec_left_c_t_val">0</span> 起</div>
              <div class="con_ec_left_c_t">本月: <span class="ec_left_c_t_val">0</span> 起</div>
            </div>
          </div>
          <!--  TODO -->
          <div class="con_ec_cen"></div>
          <div class="con_ec_right">
            <div class="con_ec_right_c">
              <div class="con_ec_left_c_t">本周: <span class="ec_left_c_t_val">1</span> 起</div>
              <div class="con_ec_left_c_t">本年: <span class="ec_left_c_t_val">13</span> 起</div>
            </div>
          </div>
        </div>
        <div class="home_page_right_con_event">在途车辆统计</div>
        <div class="home_page_right_car">
          <div class="home_page_right_car_item">
            <carECharts />
            <div class="right_car_item_num">
              <div class="right_car_item_num_dot"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 路 -->
    <div class="home_page_road">
      <div class="home_page_road_t"></div>
      <div class="home_page_road_b"></div>
    </div>
  </div>
</template>

<script>
import GaoDeMap from '@/views/map/index.vue'
import carECharts from '@/views/echarts/carECharts.vue'
export default {
  name: 'indexView',
  data() {
    return {
      keyMonitoringList: [
        { id: 1, name: '日累计车流量', val: 59876, unit: '', col: '#00D1FF' },
        { id: 2, name: '当前在途车辆', val: 4618, unit: '', col: '#00D1FF' },
        { id: 3, name: '当前在途车辆', val: 4618, unit: '', col: '#00D1FF' },
        { id: 4, name: '施工路段', val: 0, unit: '处', col: '#00D1FF' },
        { id: 5, name: '气象预警', val: 4, unit: '处', col: '#FFDB82' },
        { id: 6, name: '异常设备', val: 5, unit: '', col: '#FF5F5F' },
        { id: 7, name: '感知事件', val: 13, unit: '', col: '#00D1FF' },
        { id: 8, name: '平均车速', val: 96.3, unit: '', col: '#00EBC1' },
        { id: 9, name: '平均车速', val: 96.3, unit: '', col: '#00EBC1' }
      ],
      subjectBtn: 22,
      subjectBtnList: [
        { id: 21, name: '事件专题' },
        { id: 22, name: '路测设备' },
        { id: 23, name: '路网设备' }
      ],
      roadEquipment: [
        // 0正常 1异常
        { id: 31, name: '设备箱', state: 0, imgList: [require('@/assets/screen/xtb/lcsb/sbx.png'), require('@/assets/screen/xtb/lcsb/sb.png')] },
        { id: 32, name: '护栏碰撞', state: 0, imgList: [require('@/assets/screen/xtb/lcsb/hlpz.png'), require('@/assets/screen/xtb/lcsb/hlp.png')] },
        { id: 33, name: '疲劳唤醒', state: 0, imgList: [require('@/assets/screen/xtb/lcsb/plhx.png'), require('@/assets/screen/xtb/lcsb/plh.png')] },
        { id: 34, name: '摄像机', state: 1, imgList: [require('@/assets/screen/xtb/lcsb/sxj.png'), require('@/assets/screen/xtb/lcsb/sx.png')] },
        { id: 35, name: '行车诱导', state: 0, imgList: [require('@/assets/screen/xtb/lcsb/xcyd.png'), require('@/assets/screen/xtb/lcsb/xcy.png')] },
        { id: 36, name: '交调', state: 0, imgList: [require('@/assets/screen/xtb/lcsb/jx.png'), require('@/assets/screen/xtb/lcsb/jdq.png')] },
        { id: 37, name: '语音广播', state: 0, imgList: [require('@/assets/screen/xtb/lcsb/yygb.png'), require('@/assets/screen/xtb/lcsb/yyg.png')] },
        { id: 38, name: '情报板', state: 0, imgList: [require('@/assets/screen/xtb/lcsb/qbb.png'), require('@/assets/screen/xtb/lcsb/qb.png')] },
        { id: 39, name: '合流区', state: 0, imgList: [require('@/assets/screen/xtb/lcsb/hlq.png'), require('@/assets/screen/xtb/lcsb/hl.png')] }
      ]
    }
  },

  props: [],
  // 注册组件
  components: { GaoDeMap, carECharts },
  // 计算属性
  computed: {},
  // 生命周期函数
  created() {},
  // 侦听器
  // watch: {
  //   data: {
  //     // 自动触发,只能使用handler
  //     handler(newVal, oldVal) {
  //       // console.log(newVal);
  //       // console.log(oldVal);
  //     }
  //     // true表示侦听器立即触发(immediate默认为false)
  //     // immediate: true,
  //     // true表示深度侦听，侦听对象属性的变化
  //     // deep: true
  //   }
  // },
  // 事件函数
  methods: {
    subjectBtnFn(item) {
      this.subjectBtn = item.id
    }
  }
}
</script>
<style lang='scss' scoped>
.home_page {
  width: 100%;
  height: calc(100vh - 65px);
  position: relative;
}
.home_page_map {
  width: 100%;
  height: 100%;
}
.home_page_left {
  width: 23.85vw;
  height: 65vh;
  margin-top: 19px;
  position: absolute;
  left: 1%;
  top: 0%;
}
.home_page_left_t {
  width: 100%;
  height: 30vh;
  margin-bottom: 1vh;
  background-image: url('~@/assets/images/screen/maplt.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.home_page_left_b {
  width: 100%;
  height: 34vh;
  padding: 2vh 1vw;
  background-image: url('~@/assets/images/screen/maplb.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.home_page_right {
  width: 23.85vw;
  height: 65vh;
  margin-top: 19px;
  position: absolute;
  right: 1%;
  top: 0%;
  background-image: url('~@/assets/images/screen/mapr.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.home_page_road {
  width: 98%;
  height: 24vh;
  position: absolute;
  left: 1%;
  bottom: 0%;
}
.home_page_road_t {
  width: 8.54vw;
  height: 3.33vh;
  border-radius: 11px 11px 0px 0px;
  opacity: 1;
  border: 1px solid #2ad9fd;
}
.home_page_road_b {
  width: 100%;
  height: calc(100% - 3.33vh);
  background-image: url('~@/assets/images/screen/maproad.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.home_page_left_t_txt {
  width: 100%;
  height: 5.56vh;
  padding: 1vh 1.5vw 0 0.35vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.home_page_right_t_txt {
  width: 100%;
  height: 5.56vh;
  padding: 1vh 1.5vw 0 0.3vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.home_page_left_t_txt_l {
  width: 14.06vw;
  height: 5.56vh;
  padding-left: 1vw;
  background-image: url('~@/assets/screen/xtb/titbg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
}
.home_page_left_t_txt_r {
  width: 0.94vw;
  height: 1.2vh;
  margin-top: 1.5vh;
  cursor: pointer;
  background-image: url('~@/assets/screen/xtb/left.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.home_page_right_r {
  width: 0.94vw;
  height: 1.2vh;
  margin-top: 1.5vh;
  cursor: pointer;
  background-image: url('~@/assets/screen/xtb/right.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.home_page_left_t_txt_l_tit {
  color: #fff;
  font-size: 20px;
}
.home_page_left_t_b {
  width: 100%;
  height: calc(100% - 6vh);
  padding: 2vh 1vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.home_page_left_t_b_item {
  width: 6.77vw;
  height: 6.3vh;
  color: #fff;
}
.home_page_left_t_b_item_top {
  width: 100%;
  height: 50%;
  text-align: center;
  line-height: 5vh;
  color: #00d1ff;
}
.home_page_left_t_b_item_bom {
  width: 100%;
  height: 50%;
  text-align: center;
  font-size: 0.875rem;
  line-height: 3vh;
  background-image: url('~@/assets/screen/xtb/btnbg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.t_b_item_top_unit {
  font-size: 10px;
  color: #fff;
  transform: scale(0.8);
}
.home_page_left_b_btn {
  width: 100%;
  height: 3.5vh;
  display: flex;
  justify-content: space-between;
}
.home_page_left_b_btn_item {
  width: 6.51vw;
  height: 100%;
  cursor: pointer;
  text-align: center;
  line-height: 3.8vh;
  color: #fff;
  font-size: 0.875rem;
  background-image: url('~@/assets/screen/xtb/ztbtn.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.left_b_cont {
  width: 100%;
  height: calc(100% - 3.5vh);
}
.left_b_cont_active {
  color: #00d1ff;
  background-image: url('~@/assets/screen/xtb/actbtn.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.left_b_cont_c {
  width: 100%;
  height: 100%;
  padding-top: 2vh;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  position: relative;
}
.left_b_cont_c_item {
  width: 16%;
  height: 7.5vh;
  text-align: center;
  cursor: pointer;
}
.left_b_cont_c_item_img {
  width: 1.67vw;
  height: 2.96vh;
}
.left_b_cont_c_item_txt {
  font-size: 12px;
  color: #fff;
  transform: scale(0.8);
}
.left_b_cont_c_sba {
  width: 4.58vw;
  height: 2.87vh;
  position: absolute;
  right: 4%;
  bottom: 4%;
  border-radius: 20px 20px 20px 20px;
  opacity: 1;
  border: 1px solid #25d8ff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.left_b_cont_c_sba_img {
  width: 16px;
  height: 16px;
}
.left_b_cont_c_sba_txt {
  color: #fff;
  font-size: 12px;
  transform: scale(0.8);
}
.home_page_right_con {
  width: 100%;
  height: calc(100% - 6vh);
  padding: 2vh 0.5vw 0 0.5vw;
}
.home_page_right_con_event {
  width: 100%;
  height: 2.5vh;
  color: #fff;
  padding-left: 1.8vw;
  font-size: 14px;
  background-image: url('~@/assets/screen/xtb/jtyc.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.home_page_right_con_ec {
  width: 100%;
  height: 15.28vh;
  padding: 0 0.5vw;
  display: flex;
}
.con_ec_left {
  width: 30%;
  height: 100%;
  display: flex;
  align-items: center;
}
.con_ec_cen {
  width: 40%;
  height: 100%;
  // TODO
  // background-color: orange;
}
.con_ec_right {
  width: 30%;
  height: 100%;
  display: flex;
  align-items: center;
}
.con_ec_left_c {
  width: 100%;
  height: 50%;
  padding: 0.5vh 0 0.5vh 0.5vw;
  background-image: url('~@/assets/screen/xtb/zktjl.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.con_ec_right_c {
  width: 100%;
  height: 50%;
  padding: 0.5vh 0 0.5vh 0.5vw;
  background-image: url('~@/assets/screen/xtb/zktj.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.con_ec_left_c_t {
  width: 100%;
  height: 38%;
  color: #fff;
  font-size: 12px;
  line-height: 2.6vh;
  padding-left: 0.7vw;
  background: linear-gradient(90deg, #0091b0 0%, rgba(37, 216, 255, 0) 100%);
  border-radius: 16px 16px 16px 16px;
  opacity: 1;
  border-image: linear-gradient(90deg, rgba(42, 217, 253, 1), rgba(42, 217, 253, 0)) 1 1;
}
.ec_left_c_t_val {
  color: #ffcd4d;
  font-size: 16px;
}
.home_page_right_car {
  width: 100%;
  height: 17vh;
  padding: 1vh 1vw;
}
.home_page_right_car_item {
  width: 33%;
  height: 100%;
  position: relative;
}
.right_car_item_num {
  width: 75%;
  height: 2.41vh;
  background: linear-gradient(270deg, rgba(42, 217, 253, 0) 0%, #2ad9fd 100%);
  border-radius: 20px 20px 20px 20px;
  opacity: 1;
  border-image: linear-gradient(90deg, rgba(42, 217, 253, 1), rgba(42, 217, 253, 0)) 1 1;
  position: absolute;
  left: 50%;
  bottom: 2%;
  transform: translateX(-50%);
  display: flex;
}
</style>