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

<template>
  <div class="home_page">
    <!-- 地图 -->
    <div class="home_page_map">
      <GaoDeMap @mapClickEventFn="mapClickEvent" />
    </div>
    <!-- 地图弹框 -->
    <div ref="mapDialog" class="map_dialog" :style="{'top':mapDialogTop,'left':mapDialogLeft}">

    </div>
    <!-- 情报板弹框 -->
    <transition name="el-zoom-in-center">
      <div v-if="dialogInfoLeft" class="dialog_info">
        <div class="dialog_info_left">
          <div class="dialog_info_left_t">
            <div class="dialog_info_left_t_txt">{{ dialogTit }}</div>
            <img class="dialog_info_left_t_img" src="@/assets/screen/xtb/close.png" alt="" @click="closeDialogBtnFn">
            <img class="dialog_info_left_t_ti" src="@/assets/screen/xtb/cltiao.png" alt="">
          </div>
          <div class="dialog_info_left_show">
            <div v-if="dialogInfoList.length > 0" class="dialog_info_left_show_box" style="height: 100%;">
              <div class="dialog_info_left_show_box_item" v-for="item in dialogInfoList" :key="item.id">
                <div class="dialog_info_left_show_l">
                  <div class="dialog_info_left_show_l_xsq" :style="{'width':item.w / getScrollSz(item.w)+'px','height':item.h / getScrollSz(item.w)+'px',}">
                    <div class="dialog_info_left_show_l_xsq_txt" :style="{'font-size':item.fz / getScrollSz(item.w)+'px',color:item.col}" v-html="item.txt"></div>
                  </div>
                </div>
                <div class="dialog_info_left_show_r">
                  <div @click="editOutline(item)" class="show_r_btn dialog_info_left_show_r_btn1"></div>
                  <div @click="delMoFn(item)" class="show_r_btn dialog_info_left_show_r_btn2"></div>
                </div>
              </div>
            </div>
            <div v-else class="dialog_info_left_show_box" style="height: 100%;">
              <div class="dialog_info_left_show_box_empty">暂无数据</div>
            </div>
            <div class="dialog_info_left_show_bottom">
              <el-tabs v-model="activeName" @tab-click="tabClickFn">
                <el-tab-pane label="详情信息" name="first">
                  <div class="show_bottom_tab_box">
                    <div class="show_bottom_tab_item" v-for="item in tabInfoList" :key="item.id">
                      <div class="show_bottom_tab_item_l">{{ item.tit }}: </div>
                      <div class="show_bottom_tab_item_r" :style="{'color':item.col}"> {{ item.txt }}</div>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="设备参数" name="second">设备参数</el-tab-pane>
              </el-tabs>
            </div>
            <div class="dialog_info_left_show_bottom_btn">
              <div class="show_bottom_btn_add" @click="addMoDataInfoFn(2,2)">添加信息</div>
              <div class="show_bottom_btn_del">信息发布</div>
            </div>
            <div class="dialog_info_left_show_ce" @click="showCeInfoFn">
              <img class="show_ce_img" src="@/assets/screen/xtb/leftd.png" alt="" :style="{'transform':dialogInfoRight ? 'rotate(0deg)': 'rotate(180deg)'}">
              <div class="show_ce_txt">信息模板</div>
            </div>
          </div>
        </div>
        <transition name="el-zoom-in-center">
          <div v-if="dialogInfoRight" class="dialog_info_right">
            <div v-for="item in moBanDataList" :key="item.id">
              <div class="dialog_info_right_tit">{{ item.bt }}</div>
              <div class="dialog_info_right_show">
                <div class="dialog_info_left_show_box">
                  <div class="dialog_info_left_show_box_item" v-for="i in item.mbList" :key="i.id">
                    <div class="dialog_info_left_show_l" style="width:17vw;">
                      <div class="dialog_info_left_show_l_xsq" :style="{'width':i.w / getScrollSz(i.w)+'px','height':i.h / getScrollSz(i.w)+'px',}">
                        <div class="dialog_info_left_show_l_xsq_txt" :style="{'font-size':i.fz / getScrollSz(i.w)+'px',color:i.col}" v-html="i.txt"></div>
                      </div>
                    </div>
                    <div class="dialog_info_left_show_r" style="width: 3.5vw;">
                      <div @click="putLeftFn(i)" class="show_r_btn dialog_info_left_show_r_btn3"></div>
                    </div>
                  </div>

                </div>
              </div>
            </div>

          </div>
        </transition>
      </div>
    </transition>
    <!-- 情报板弹框中的弹框 -->
    <addBoard ref="addinfo" @addInfo="addInfo" />
    <editBoard v-if="showEmit" :boardEmitItem="boardEmitItem" @receiveForm="receiveForm" @dialogClose="dialogClose" />
    <!-- 左边 -->
    <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'
import addBoard from '@/views/boardView/addinfo.vue'
import editBoard from '@/views/boardView/editInfo.vue'
export default {
  name: 'indexView',
  data() {
    return {
      showEmit: false,
      boardEmitItem: {}, //修改弹窗的数据
      activeName: 'first',
      dialogTit: '门架式可变信息标志YK16+270',
      dialogInfoLeft: false,
      dialogInfoRight: false,
      mapDialogTop: '0px',
      mapDialogLeft: '0px',
      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')] }
      ],
      dialogInfoList: [],
      moBanDataList: [
        {
          id: 1001,
          bt: '日常通用',
          mbList: [
            { id: 305, txt: '谨慎驾驶 注意安全', w: 768, h: 160, col: '#FFFF00', fz: 60, align: 'center' },
            { id: 306, txt: '谨慎驾驶 注意安全', w: 768, h: 160, col: '#03FF00', fz: 60, align: 'center' },
            { id: 307, txt: '谨慎驾驶 注意安全', w: 768, h: 160, col: '#FF0000', fz: 60, align: 'center' },
            { id: 308, txt: '谨慎驾驶, <br/> 注意安全', w: 768, h: 160, col: '#03FF00', fz: 60, align: 'center' }
          ]
        },
        { id: 1002, bt: '日常通用', mbList: [{ id: 309, txt: '道路施工, <br/> 谨慎驾驶', w: 768, h: 160, col: '#FFFF00', fz: 60, align: 'center' }] },
        { id: 1003, bt: '恶劣天气', mbList: [{ id: 309, txt: '救援   拨打96659', w: 768, h: 160, col: '#FFFF00', fz: 60, align: 'center' }] }
      ],

      tabInfoList: [
        { id: 401, tit: '设备名称', txt: '门架式可变信息标志', col: '#fff' },
        { id: 402, tit: '道路名称', txt: 'G35济菏高速', col: '#fff' },
        { id: 403, tit: '所属机构', txt: '山东高速济南发展公司', col: '#fff' },
        { id: 404, tit: '设备桩号', txt: 'K094+079', col: '#fff' },
        { id: 405, tit: '设备厂商', txt: '光电比特', col: '#fff' },
        { id: 406, tit: '设备状态', txt: '离线', col: '#888' }
      ]
    }
  },

  props: [],
  // 注册组件
  components: { GaoDeMap, carECharts, addBoard, editBoard },
  // 计算属性
  computed: {},
  // 生命周期函数
  created() {},
  // 侦听器
  // watch: {
  //   data: {
  //     // 自动触发,只能使用handler
  //     handler(newVal, oldVal) {
  //       // console.log(newVal);
  //       // console.log(oldVal);
  //     }
  //     // true表示侦听器立即触发(immediate默认为false)
  //     // immediate: true,
  //     // true表示深度侦听，侦听对象属性的变化
  //     // deep: true
  //   }
  // },
  // 事件函数
  methods: {
    // 地图点位
    mapClickEvent(e) {
      console.log('父组件地图点位', e)
      this.dialogInfoLeft = true
      // this.mapDialogTop = e.pixel.y + 'px'
      // this.mapDialogLeft = e.pixel.x + 'px'
      // this.$refs.mapDialog.style.top = e.pixel.y + 'px'
      // this.$refs.mapDialog.style.left = e.pixel.x + 'px'
      // console.log(this.$refs.mapDialog)
    },
    // 接收子组件新增待发模板
    addInfo(form) {
      console.log(form, '待发新增')
      // form.ID = this.contentList.length
      // this.contentList.push(deepClone(form))
      // this.$message.success('添加成功')
      // this.$forceUpdate()
    },
    // 打开添加信息弹窗
    addMoDataInfoFn(type, mode) {
      this.$refs.addinfo.init('', type, mode)
    },
    // 修改弹窗
    editOutline(item, index, type) {
      // this.index = index
      // this.editType = type
      // console.log(item, '修改弹窗')
      // this.boardEmitItem = {
      //   FONT_SIZE: item.tcontents[0].fontSize + 'px',
      //   COLOR: item.tcontents[0].fontColor,
      //   CONTENT: item.tcontents[0].content,
      //   COORDINATE: item.tcontents[0].coordinate,
      //   FONT: this.getFont(item.tcontents[0].fontType),
      //   SPEED: item.tcontents[0].fontSpacing,
      //   ACTION: item.inScreenMode, //出屏方式
      //   STAY: item.stopTime, //停留时间
      //   type: type,
      //   screenSize: item.screenSize,
      //   category: item.category,
      //   id: item.id,
      //   tcontentsId: item.tcontents[0].id
      // }
      this.showEmit = true
    },
    // 待下发 编辑
    openQbbDrawer(item, index, type) {
      // this.index_ = index
      // console.log(item)
      // this.boardEmitItem = item
      // this.boardEmitItem.screenSize = this.form.devicePixel
      // this.boardEmitItem.deviceId = this.deviceId
      // this.boardEmitItem.type = type

      this.showEmit = true
    },
    // 接收子组件form表单 修改
    receiveForm(form) {
      console.log(form, '接收子组件form表单 修改')
      // this.contentList.splice(this.index_, 1, form)
      // this.$forceUpdate()
      // this.allVmsTemplate('no')
    },
    dialogClose() {
      this.showEmit = false
      this.arrowRightVisible = false
      // setTimeout(() => {
      //   this.allVmsTemplate('no')
      // }, 500)
    },
    delMoFn(item) {
      this.$confirm('确认要删除吗？')
        .then(_ => {
          this.removeItemById(this.dialogInfoList, item.id)
          this.$message({
            message: '删除成功!',
            type: 'success'
          })
        })
        .catch(_ => {})
    },
    putLeftFn(item) {
      console.log('点击事件', item)
      this.dialogInfoList.push(item)
    },
    tabClickFn(tab, event) {
      console.log(tab, event)
    },
    closeDialogBtnFn() {
      this.dialogInfoLeft = false
      this.dialogInfoRight = false
    },
    showCeInfoFn() {
      this.dialogInfoRight = !this.dialogInfoRight
    },
    subjectBtnFn(item) {
      this.subjectBtn = item.id
    },
    removeItemById(arr, id) {
      const index = arr.findIndex(item => item.id === id) // 找到要删除项的索引
      if (index !== -1) {
        arr.splice(index, 1) // 从数组中删除该项
      }
    },
    getScrollSz(w) {
      if (w > 765) {
        return 3
      } else if (w > 479) {
        return 2
      } else if (w > 191) {
        return 1
      }
    }
  }
}
</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;
}
.map_dialog {
  width: 510px;
  height: 550px;
  background-color: pink;
  position: absolute;
  left: 0px;
  top: 0px;
  transform: translate(-110%, -110%);
}
.dialog_info {
  width: 49.48vw;
  height: 56vh;
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}
.dialog_info_left {
  width: 26.56vw;
  height: 100%;
  background-color: #114c66;
}
.dialog_info_right {
  width: 22.4vw;
  height: 51.44vh;
  border: 2px solid #196980;
  background-color: #114c66;
  padding: 1vh 0.5vw;
  overflow-y: scroll;
}
.dialog_info_left_t {
  width: 100%;
  height: 4.44vh;
  padding: 0 1vw;
  background-image: url('~@/assets/screen/xtb/qbbtit.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dialog_info_left_t_txt {
  color: #3de8ff;
  font-size: 18px;
}
.dialog_info_left_t_img {
  width: 13px;
  height: 13px;
  cursor: pointer;
}
.dialog_info_left_t_ti {
  width: 55%;
  height: 0.5vh;
  position: absolute;
  left: 0;
  top: 0;
}
.dialog_info_left_show {
  width: 100%;
  height: 30vh;
  padding: 1vh 2vw 1vh 0.5vw;
  position: relative;
}
.dialog_info_left_show_box {
  width: 100%;
  // height: 100%;
  overflow-y: scroll;
}
.dialog_info_left_show_l {
  width: 18.5vw;
  // height: 4.91vh;
  border: 2px solid #1d7890;
  padding: 0.2vh 0;
  display: flex;
  justify-content: center;
}
.dialog_info_left_show_r {
  width: 5vw;
  // height: 4.91vh;
  border: 2px solid #1d7890;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.dialog_info_left_show_l_xsq {
  width: 13.33vw;
  height: 100%;
  font-size: 18px;
  color: #ff0000;
  text-align: center;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.show_r_btn {
  width: 1.67vw;
  height: 2.96vh;
  cursor: pointer;
}
.dialog_info_left_show_r_btn1 {
  background-image: url('~@/assets/screen/xtb/gg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.dialog_info_left_show_r_btn2 {
  background-image: url('~@/assets/screen/xtb/xx.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.dialog_info_left_show_r_btn3 {
  background-image: url('~@/assets/screen/xtb/zz.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.dialog_info_left_show_box_item {
  margin-bottom: 0.5vh;
  display: flex;
  justify-content: space-between;
}
.dialog_info_left_show_bottom {
  width: 105%;
  height: 16.52vh;
}
.show_bottom_tab_item {
  width: 50%;
  padding: 0.5vh 0;
  display: flex;
  // flex-wrap: wrap;
  // align-items: center;
}
.show_bottom_tab_box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.show_bottom_tab_item_l {
  color: #3de8ff;
  font-size: 14px;
}
.show_bottom_tab_item_r {
  color: #fff;
  font-size: 14px;
  margin-left: 0.5vw;
}
.dialog_info_left_show_ce {
  position: absolute;
  right: 0%;
  top: 0%;
  width: 24px;
  height: 95px;
  padding: 0.5vh 0;
  background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  text-align: center;
  cursor: pointer;
}
.show_ce_img {
  width: 15px;
  height: 10px;
  transition: transform 0.3s ease; /* 过渡效果 */
}
.show_ce_txt {
  color: #fff;
  font-size: 13px;
}
.dialog_info_left_show_box_empty {
  font-size: 14px;
  text-align: center;
  color: #fff;
}
.dialog_info_right_tit {
  color: #fff;
  font-size: 14px;
  margin-bottom: 0.5vh;
}
.dialog_info_right_show {
  width: 100%;
  // height: 28vh;
}
.dialog_info_left_show_bottom_btn {
  width: 100%;
  height: 5vh;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
}
.show_bottom_btn_add {
  width: 90px;
  height: 23px;
  color: #fff;
  font-size: 14px;
  line-height: 23px;
  background: #00b3cc;
  border-radius: 48px 48px 48px 48px;
  opacity: 1;
  margin-right: 0.5vw;
  cursor: pointer;
}
.show_bottom_btn_del {
  width: 90px;
  height: 23px;
  color: #fff;
  font-size: 14px;
  line-height: 23px;
  background: #c87800;
  border-radius: 48px 48px 48px 48px;
  opacity: 1;
  cursor: pointer;
}
//   background-color: #104b65;
//   background-image: url('~@/assets/screen/xtb/qbbtit.png');
//   background-size: 100% 100%;
//   background-repeat: no-repeat;
//   background-position: center;

/* 通用滚动条样式 */
::-webkit-scrollbar {
  width: 3px; /* 设置滚动条宽度 */
  height: 3px; /* 设置滚动条高度 */
}

::-webkit-scrollbar-track {
  background-color: #114c66; /* 设置滚动条轨道颜色 */
}

::-webkit-scrollbar-thumb {
  background-color: #9abce0; /* 设置滚动条滑块颜色 */
  border-radius: 4px; /* 设置滚动条滑块圆角 */
}
::v-deep .el-tabs__nav-wrap::after {
  background-color: #316076;
}

::v-deep .el-tabs__item.is-active {
  color: #3de8ff !important;
}
::v-deep .el-tabs__item {
  color: #fff !important;
}
::v-deep .el-tabs__active-bar {
  background-color: #3de8ff !important;
}
</style>