合并代码

src/api/index.js

@@ -1,6 +1,7 @@
 import axios from "axios";
 // import qs from 'qs'
 import router from '../router/index'
+
 function sendGetRequest(url, data) {
   return new Promise(function (resolve, reject) {
     axios.get(url, {
@@ -15,7 +16,9 @@ function sendGetRequest(url, data) {
       .then(function (res) { //请求成功，response接收返回参数
         if (res.data.code == 401) {
           localStorage.removeItem('token')
-          router.push({ name:'login' })
+          router.push({
+            name: 'login'
+          })
         }
         resolve(res);
 
@@ -40,7 +43,9 @@ function sendPostRequest(url, data) {
       (res) => {
         if (res.data.code == 401) {
           localStorage.removeItem('token')
-          router.push({ name:'login' })
+          router.push({
+            name: 'login'
+          })
         }
         resolve(res);
       },
@@ -156,4 +161,40 @@ export default {
     return sendGetRequest('/readControl/getState', data)
   },
 
+
+
+  // 根据用户id查询对应的设备大数据信息
+  Bigdata_getAllControl(userid, data) {
+    return sendGetRequest(`/Bigdata/getAllControl?userid=${userid}`, data);
+  },
+
+  // 获取设备当天的温度
+  Bigdata_getTemperature(deviceid, data) {
+    return sendGetRequest(`/Bigdata/getTemperature?deviceid=${deviceid}`, data);
+  },
+
+  // 获取设备一周的温度
+  Bigdata_getWeekTemperature(deviceid, data) {
+    return sendGetRequest(`/Bigdata/getWeekTemperature?deviceid=${deviceid}`, data);
+  },
+
+  // 主页查看控制器实时数据
+  getcontrol_rtdata(equipmentId, data) {
+    return sendPostRequest(`/getcontrol/rtdata?equipmentId=${equipmentId}`, data);
+  },
+
+  // 获取摄像头得地址 Copy
+  camera_gethls(cameraid, channelid, data) {
+    return sendGetRequest(`/camera/gethls?cameraid=${cameraid}&channelid=${channelid}`, data);
+  },
+
+  // 根据用户id查询对应的设备数据 Copy
+  sel_eqbyid(userId, data) {
+    return sendGetRequest(`/sel/eqbyid/${userId}`, data);
+  },
+
+  // 控制器状态值获取 Copy
+  readControl_getState(deviceId, data) {
+    return sendGetRequest(`/readControl/getState?deviceId=${deviceId}`, data);
+  }
 };

src/assets/js/echarts.js

@@ -0,0 +1,318 @@
+import * as echarts from 'echarts';
+
+export function weather_echart(id, data) {
+  let chartDom = document.getElementById(id);
+  let myChart = echarts.init(chartDom);
+  let option = {
+    grid: {
+      top: "15%",
+      left: "0%",
+      right: "5%",
+      bottom: "6%",
+      containLabel: true
+    },
+    color: ["#00A8FF", "#00FFB4", "#FFD07F"],
+    tooltip: {
+      trigger: "axis",
+      backgroundColor: "rgba(1, 13, 19, 0.5)",
+      borderWidth: 1,
+      axisPointer: {
+        type: "shadow"
+      },
+      textStyle: {
+        color: "rgba(212, 232, 254, 1)"
+      },
+      extraCssText: "z-index:2"
+    },
+    legend: {
+      show: false,
+      right: 20,
+      top: 30,
+      icon: "rect",
+      itemWidth: 18,
+      itemHeight: 4,
+      itemGap: 30,
+      padding: [0, 20, 0, 0],
+      textStyle: {
+        color: "#FFFFFF",
+        fontFamily: "Alibaba PuHuiTi",
+        fontSize: ".14rem",
+        fontWeight: 400,
+      }
+    },
+    xAxis: {
+      type: "category",
+      boundaryGap: false,
+      data:data.data_category,
+      // data: [
+      //   "1月",
+      //   "2月",
+      //   "3月",
+      //   "4月",
+      //   "5月",
+      //   "6月",
+      //   "7月",
+      //   "8月",
+      //   "9月",
+      //   "10月",
+      //   "11月",
+      //   "12月"
+      // ],
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#52647C",
+          type: 'solid'
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        show: true,
+        // interval: 0,
+        textStyle: {
+          color: "#7C99AF",
+          fontSize: ".14rem",
+          fontFamily: 'ArialMT',
+          fontWeight: 400
+        }
+      }
+    },
+    yAxis: [{
+      type: "value",
+      name: '温度',
+      nameTextStyle: {
+        fontSize: 14,
+        fontFamily: 'MicrosoftYaHei',
+        fontWeight: 400,
+        color: '#7C99AF',
+        lineHeight: 6
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#52647C",
+          type: 'solid'
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        color: "#7C99AF",
+        fontSize: ".14rem",
+        fontFamily: 'ArialMT',
+        fontWeight: 400
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#52647C',
+          type: 'dashed'
+        }
+      },
+      // data:data.data_value,
+    }],
+    series: [{
+      // name: data.datax[0],
+      type: "line",
+      smooth: 'true',
+      symbol: "circle", //标记的图形为实心圆
+      symbolSize: 0, //标记的大小
+      lineStyle: {
+        width: 2,
+        color: "#00D2FF" // 线条颜色
+      },
+      // data: [175, 160, 153, 121, 156, 175, 160, 153, 121, 156, 180, 220],
+      data: data.data_value,
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(
+          0,
+          0,
+          0,
+          1,
+          [{
+              offset: 0,
+              color: 'rgba(0, 168, 255, 0.6)'
+            },
+            {
+              offset: 0.3,
+              color: 'rgba(0, 168, 255, 0.6)'
+            },
+            {
+              offset: 1,
+              color: 'transparent'
+            }
+          ],
+          false
+        )
+      },
+      large:true,
+    }, ]
+  };
+
+  option && myChart.setOption(option);
+  window.addEventListener("resize", function () {
+    myChart.resize();
+  });
+}
+
+export function thisWeekTemperature_echart(id, data) {
+  let chartDom = document.getElementById(id);
+  let myChart = echarts.init(chartDom);
+  let option = {
+    title: {
+      show: false
+    },
+    tooltip: {
+      trigger: 'axis'
+    },
+    legend: {
+      right: '15%',
+      top: '5%',
+      icon: 'circle',
+      itemWidth: 8,
+      itemHeight: 8,
+      itemGap: 37,
+      textStyle: {
+        fontSize: ".12rem",
+        fontFamily: 'Microsoft YaHei',
+        fontWeight: 'normal',
+        color: '#82DAF7'
+      }
+    },
+    grid: {
+      top:'15%',
+      left:'3%',
+      right:'3%',
+      bottom:'10%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        interval: 0,
+        textStyle: {
+          fontSize: ".14rem",
+          fontFamily: 'MicrosoftYaHei',
+          fontWeight: 400,
+          color: '#82DAF7',
+          padding: [5, 0, 0, 0]
+        }
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#294462',
+          opacity: 0.3
+        }
+      },
+      // data: ['1月', '2月', '3月', '4月', '5月']
+      data:data.day
+    },
+    yAxis: {
+      type: 'value',
+      minInterval: 5,
+      name: '',
+      nameTextStyle: {
+        fontSize: 18,
+        fontFamily: 'CenturyGothic',
+        color: '#ffffff',
+        padding: [0, 0, 0, 30]
+      },
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: false
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#06304C'
+        }
+      },
+      axisLabel: {
+        textStyle: {
+          fontSize: ".14rem",
+          fontFamily: 'MicrosoftYaHei',
+          fontWeight: 'normal',
+          color: '#82DAF7',
+          padding: [0, 5, 0, 0]
+        }
+      }
+    },
+    dataZoom: [{
+      // x轴没有具体的数值
+      type: 'inside', // 图形内部的滚动条
+      xAxisIndex: [0], // 明确指定滚动的轴
+      minValueSpan: 1, // x轴最小的index
+      maxValueSpan: 3, // x轴最大的index
+      zoomOnMouseWheel: false // 关闭鼠标滚轮缩放
+    }],
+    series: [
+      {
+        name: '最高温度',
+        type: 'bar',
+        barWidth: "8px",
+        barGap: '80%',
+        itemStyle: {
+          borderWidth: 1,
+          borderRadius: [20, 20, 0, 0],
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [{
+              offset: 0,
+              color: 'rgba(255,189,73,1)' // 0% 处的颜色
+            }, {
+              offset: 1,
+              color: 'rgba(255,189,73,0.3)' // 100% 处的颜色
+            }]
+          }
+        },
+        // data: [90, 66, 174, 100, 430]
+        data:data.maxTemperature
+      },
+      {
+        name: '最低温度',
+        type: 'bar',
+        barWidth: "8px",
+        barGap: '80%',
+        itemStyle: {
+          borderWidth: 1,
+          borderRadius: [20, 20, 0, 0],
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [{
+              offset: 0,
+              color: 'rgba(0,174,255,1)' // 0% 处的颜色
+            }, {
+              offset: 1,
+              color: 'rgba(0,174,255,0.2)' // 100% 处的颜色
+            }]
+          }
+        },
+        // data: [87, 60, 124, 20, 432]
+        data:data.minTemperature
+      }, 
+     
+
+    ]
+  };
+  option && myChart.setOption(option);
+  window.addEventListener("resize", function () {
+    myChart.resize();
+  });
+}

src/main.js

@@ -7,6 +7,8 @@ Vue.config.productionTip = false
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 
+import "@/rem/rem.js"
+
 import axios from "axios";
 Vue.prototype.$axios = axios;
 import api from "./api/index.js"; 

src/rem/rem.js

@@ -0,0 +1,20 @@
+// rem等比适配配置文件
+// 基准大小
+const baseSize = 100;
+// 设置 rem 函数
+function setRem() {
+  // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
+  const scale = window.innerWidth / 1920;
+
+ 
+  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
+  document.documentElement.style.fontSize = baseSize * scale + "px";
+}
+// 初始化
+setRem();
+// 改变窗口大小时重新设置 rem
+window.onresize = function () {
+  setRem();
+};
+
+

src/router/index.js

@@ -28,6 +28,11 @@ const routes = [
     name: 'largeScreen',
     component: () => import('../views/page/largeScreen.vue')
   },
+  {
+    path: '/largeScreen1',
+    name: 'largeScreen1',
+    component: () => import('../views/page/largeScreen1.vue')
+  },
   {
     path: '/index',
     name: 'index',

src/views/page/largeScreen1.vue

@@ -0,0 +1,780 @@
+<template>
+  <div class="about">
+    <div class="kuang">
+
+      <div class="title">
+        温室智慧云数据统计
+      </div>
+
+      <div class="yuan" @click="toBack">
+        <img src="../../assets/img/small.png" alt="">
+      </div>
+
+      <div class="calendar">
+        <img src="../../assets/img/calendar.png" alt="">
+        <span>2023.10.30</span>
+        <span class="line"></span>
+        <span>星期一</span>
+        <span class="line"></span>
+        <span>14:17</span>
+      </div>
+
+      <div class="content">
+        <div class="map">
+          <div class="map1">
+            <div class="drag_box" ref="drag_box">
+              <img class="drag_img" src="../../assets/img/map.png" alt="">
+              <div class="pole_item pole_item1" @click="handlerPop">
+                <div class="p_title">
+                  <img src="../../assets/img/wenshi.png" alt="">
+                  <span>2#温室</span>
+                </div>
+                <img class="pole1" src="../../assets/img/pole1.png" alt="">
+              </div>
+              <div class="pole_item pole_item2" @click="handlerPop">
+                <div class="p_title">
+                  <img src="../../assets/img/wenshi.png" alt="">
+                  <span>1#温室</span>
+                </div>
+                <img class="pole1" src="../../assets/img/pole1.png" alt="">
+              </div>
+              <div class="pole_item pole_item3" @click="handlerPop">
+                <div class="p_title">
+                  <img src="../../assets/img/wenshi1.png" alt="">
+                  <span>3#温室</span>
+                </div>
+                <img class="pole1" src="../../assets/img/pole.png" alt="">
+              </div>
+              <div class="pole_item pole_item4" @click="handlerPop">
+                <div class="p_title">
+                  <img src="../../assets/img/wenshi.png" alt="">
+                  <span>控制中心</span>
+                </div>
+                <img class="pole1" src="../../assets/img/pole1.png" alt="">
+              </div>
+              <div class="pole_item pole_item5" @click="handlerPop">
+                <div class="p_title">
+                  <img src="../../assets/img/wenshi.png" alt="">
+                  <span>4#温室</span>
+                </div>
+                <img class="pole1" src="../../assets/img/pole1.png" alt="">
+              </div>
+              <div class="pole_item pole_item6" @click="handlerPop">
+                <div class="p_title">
+                  <img src="../../assets/img/wenshi.png" alt="">
+                  <span>5#温室</span>
+                </div>
+                <img class="pole1" src="../../assets/img/pole1.png" alt="">
+              </div>
+              <div class="pole_item pole_item7" @click="handlerPop">
+                <div class="p_title">
+                  <img src="../../assets/img/wenshi.png" alt="">
+                  <span>6#温室</span>
+                </div>
+                <img class="pole1" src="../../assets/img/pole1.png" alt="">
+              </div>
+
+              <!-- 弹框 -->
+              <template v-for="(item, index) in popContentList">
+                <!-- <div class="pop_content" :style="getTopOrLeft(item.greenhouseName)" :key="index"
+                  v-if="popContentCurrent == index ? true : false"> -->
+                <div class="pop_content" :style="getTopOrLeft(item.greenhouseName)" :key="index"
+                  v-if="popContentCurrent == index ? true : false">
+                  <div class="p_video">
+                    <img src="../../assets/img/c_top.png" alt="">
+                  </div>
+                  <div class="text">温室{{ item.greenhouseName }}#</div>
+                  <div class="line"></div>
+                  <div class="detail">
+                    <div class="d_item">
+                      <img src="../../assets/img/detail_img.png" alt="">
+                      <span>面积：{{ item.greenhouseArea }}㎡</span>
+                    </div>
+                    <div class="d_item">
+                      <img src="../../assets/img/detail_img.png" alt="">
+                      <span>品种：{{ item.greenhouseVariety }}</span>
+                    </div>
+                    <div class="d_item">
+                      <img src="../../assets/img/detail_img.png" alt="">
+                      <span>数量：{{ item.greenhouseNums }}株</span>
+                    </div>
+                  </div>
+                  <div class="grow">
+                    <img src="../../assets/img/grow_img.png" alt="">
+                    <span>生长阶段：</span>
+                    <span>{{ item.growthStageName }}</span>
+                  </div>
+                  <div class="line" style="margin-top: 0.2rem;"></div>
+                  <div class="icon_item scroll">
+                    <div class="icon_item_child" v-for="(item1, index1) in item.childList" :key="index1">
+                      <!-- <img :src="item.formula" alt=""> -->
+                      <img :src="require('../../assets/image/real-time-'+item1.formula+'.png')" alt="">
+                      <div>
+                        <span>{{ item1.environmentDataId }}</span>
+                        <span>{{ item1.environmentData }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </div>
+          </div>
+
+        </div>
+      </div>
+      <!-- <el-dialog title="" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
+        <div class="pop_content">
+          <div class="p_video">
+            <img src="../assets/img/c_top.png" alt="">
+          </div>
+          <div class="text">某某项目温室一号</div>
+          <div class="line"></div>
+          <div class="detail">
+            <div class="d_item">
+              <img src="../assets/img/detail_img.png" alt="">
+              <span>面积：6652㎡</span>
+            </div>
+            <div class="d_item">
+              <img src="../assets/img/detail_img.png" alt="">
+              <span>品种：番茄</span>
+            </div>
+            <div class="d_item">
+              <img src="../assets/img/detail_img.png" alt="">
+              <span>数量：80000株</span>
+            </div>
+          </div>
+          <div class="grow">
+            <img src="../assets/img/grow_img.png" alt="">
+            <span>生长阶段：</span>
+            <span>幼苗期</span>
+          </div>
+          <div class="line" style="margin-top: 0.2rem;"></div>
+          <div class="icon_item">
+            <div class="icon_item_child" v-for="(item, index) in list" :key="index">
+              <img :src="item.img" alt="">
+              <div>
+                <span>{{ item.name }}</span>
+                <span>{{ item.data }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-dialog> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name:'largeScreen1',
+  data() {
+    return {
+      dialogVisible: false,
+      timer: '',
+      timer1: '',
+      timer2: '',
+      list: [
+        { img: require('../../assets/img/icon_1.png'), name: '空气温度', data: '29.6℃' },
+        { img: require('../../assets/img/icon_2.png'), name: '空气湿度', data: '18.5%' },
+        { img: require('../../assets/img/icon_3.png'), name: '光亮度', data: '38.8klux' },
+        { img: require('../../assets/img/icon_4.png'), name: '二氧化碳', data: '600PPM' },
+        { img: require('../../assets/img/icon_5.png'), name: '土壤温度', data: '29.0℃' },
+        { img: require('../../assets/img/icon_6.png'), name: '土壤湿度', data: '18.5%' },
+      ],
+      top_: 2,
+      left_: 2,
+
+      popContentList: [],
+      popContentCurrent: 5
+    }
+  },
+  mounted() {
+    this.drag_boxHandler()
+
+    // this.timer1 = setTimeout(() => {
+    //   this.$router.push({ path: '/largeScreen' })
+    // }, 20000);
+
+
+
+    // this.timer = setInterval(() => {
+    //   this.dialogVisible = !this.dialogVisible
+    // }, 3000);
+
+    this.login()
+
+    this.timer2 = setInterval(() => {
+      this.popContentCurrent++
+      if (this.popContentCurrent > 5) {
+        this.popContentCurrent = 0
+      }
+    }, 3000)
+  },
+  destroyed() {
+    this.timer = null;
+    this.timer1 = null;
+    this.timer2 = null
+  },
+  methods: {
+    // 根据用户id查询对应的设备大数据信息
+    dataInit(userid) {
+      this.api.Bigdata_getAllControl(userid).then(res => {
+        // console.log('根据用户id查询对应的设备大数据信息', res);
+        this.popContentList = res.data.data
+        this.popContentList = this.popContentList.map((item) => {
+          return {
+            ...item,
+            childList: []
+          }
+        })
+        this.popContentList.forEach(el => {
+
+          // 获取控制器实时数据
+          this.api.getcontrol_rtdata(el.deviceId).then(res1 => {
+            // console.log('获取控制器实时数据', res1);
+            if(res1.data.code == 200){
+              el.childList = res1.data.data
+            }
+          })
+        })
+        // console.log(this.popContentList,'12121212');
+      })
+    },
+
+    
+    
+
+    getTopOrLeft(name) {
+      if (name == '二号') {
+        // this.top_ = 1;
+        // this.left_ = 6.2
+        return 'top:1rem;left:6.2rem'
+      } else if (name == '一号') {
+        // this.top_ = 3.5;
+        // this.left_ = 3.8
+        return 'top:3.5rem;left:3.8rem'
+      } else if (name == '3号') {
+        // this.top_ = 2;
+        // this.left_ = 9
+        return 'top:2rem;left:9rem'
+      } else if (name == '4号') {
+        // this.top_ = 2;
+        // this.left_ = 9.3
+        return 'top:2rem;left:9.3rem'
+      } else if (name == '5') {
+        // this.top_ = 3.5;
+        // this.left_ = 6.5
+        return 'top:3.5rem;left:6.5rem'
+      } else if (name == '6') {
+        // this.top_ = 0.8;
+        // this.left_ = 7.2
+        return 'top:0.8rem;left:7.2rem'
+      }
+    },
+
+    // 获取本地的userid和token
+    login() {
+      // var data = {
+      //   "username": "lsjskymdp",
+      //   "password": "lihemix888"
+      // }
+      // this.api.login(data).then(res => {
+      //   // console.log('信息', res);
+
+      //   if (res.status == 200) {
+      //     localStorage.setItem('token', res.data.data.token)
+      //     localStorage.setItem('userid', res.data.data.userid)
+      //     // console.log(localStorage.getItem('token'),localStorage.getItem('userid'));
+      //     this.dataInit(res.data.data.userid)
+      //   }
+
+      // })
+      let userInfo = JSON.parse(localStorage.getItem('userInfo'));
+      this.dataInit(userInfo.userid)
+    },
+
+    handleClose(done) {
+      done();
+    },
+
+    handlerPop() {
+      this.dialogVisible = true
+    },
+
+    toBack() {
+      this.$router.push({ path: '/largeScreen' })
+
+    },
+
+    drag_boxHandler() {
+      let demo = this.$refs.drag_box
+      demo = document.querySelector('.drag_box') //待拖拽元素
+      let canMove = false //拖拽状态
+      let x = 0,
+        y = 0 //鼠标位置
+      //监听按下鼠标事件
+      demo.onmousedown = function (e) {
+        x = e.pageX - demo.offsetLeft
+        y = e.pageY - demo.offsetTop
+        canMove = true //激活拖拽状态
+      }
+      //监听右击鼠标事件
+      demo.oncontextmenu = function (e) {
+        e.preventDefault() //阻止默认行为
+      }
+      //监听鼠标抬起事件
+      window.onmouseup = function () {
+        canMove = false //关闭拖拽状态
+      }
+
+      window.onblur = function () { //窗口失去焦点事件
+        canMove = false //关闭拖拽状态
+      }
+
+      //监听鼠标移动事件
+      window.onmousemove = function (e) {
+        e.preventDefault(); //阻止默认行为(字不能拖走)
+        if (canMove) { //对范围判断
+          let left = e.pageX - x
+          let top = e.pageY - y
+
+          //if (left > 0) left = 0 //当距离左边小于0时 让它为0
+          //if (top > 0) top = 0 //当距离上边小于0时 让它为0
+          // //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到)
+          // let maxLeft = window.innerWidth - demo.offsetWidth
+          // //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到)
+          // let maxTop = window.innerHeight - demo.offsetHeight
+
+          // if (left > maxLeft) left = maxLeft
+          // if (top > maxTop) top = maxTop
+
+
+          demo.style.left = left + 'px'
+          demo.style.top = top + 'px'
+
+        }
+      }
+      let scale = 1
+      demo.onwheel = function (e) {
+
+        if (e.wheelDelta > 0) {
+          scale += 0.05
+          if (scale > 4) {
+            scale = 4
+          }
+          demo.style.transform = `scale(${scale})`
+          // console.log(scale);
+        } else {
+          scale -= 0.05
+          if (scale < 1) {
+            scale = 1
+          }
+          demo.style.transform = `scale(${scale})`
+          // console.log(scale);
+        }
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.about {
+  width: 100%;
+  height: 100%;
+  background: url('../../assets/img/bg.png') center no-repeat;
+  background-size: 100% 100%;
+  box-sizing: border-box;
+  padding-bottom: 0.1rem;
+
+  .kuang {
+    width: 100%;
+    height: 100%;
+    background: url('../../assets/img/kuang.png') center no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+
+    .title {
+      width: 100%;
+      height: auto;
+      box-sizing: border-box;
+      padding-top: 0.06rem;
+      font-size: .54rem;
+      font-family: YouSheBiaoTiHei;
+      font-weight: 400;
+      color: #EFF8FC;
+      line-height: .54rem;
+      opacity: 0.89;
+      text-shadow: 0.01 0.1rem 0.2rem rgba(0, 51, 103, 0.25);
+
+      background: linear-gradient(to bottom, #FFFFFF 45%, #E9F8FF 90%, #77BAFF 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      text-align: center;
+
+    }
+
+    .yuan {
+      width: .56rem;
+      height: .56rem;
+      background: url('../../assets/img/yuan_bg.png') center no-repeat;
+      background-size: 100% 100%;
+      position: absolute;
+      top: .53rem;
+      left: .71rem;
+      z-index: 999;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      >img {
+        width: .20rem;
+        height: .20rem;
+      }
+    }
+
+    .calendar {
+      width: 4rem;
+      height: .3rem;
+      position: absolute;
+      top: .63rem;
+      right: .66rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      >img {
+        width: .28rem;
+        height: .3rem;
+      }
+
+      >span:nth-child(2) {
+        font-size: .24rem;
+        font-family: PingFang-SC-Bold;
+        font-weight: bold;
+        color: #7ABAFF;
+      }
+
+      >span:nth-child(4) {
+        font-size: .2rem;
+        font-family: PingFang-SC-Bold;
+        font-weight: bold;
+        color: #7ABAFF;
+      }
+
+      >span:nth-child(6) {
+        font-size: .3rem;
+        font-family: PingFang-SC-Bold;
+        font-weight: bold;
+        color: #7ABAFF;
+      }
+
+      .line {
+        width: .02rem;
+        height: .30rem;
+        background: #FFFFFF;
+        opacity: 0.2;
+      }
+    }
+
+    .content {
+      width: 100%;
+      height: calc(100% - .6rem);
+
+      .map {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 99;
+        -webkit-mask-image: linear-gradient(90deg, transparent 0%, blue 7%, blue 87%, transparent 97%);
+
+        .map1 {
+          width: 100%;
+          height: 100%;
+          // background: url('../assets/img/map.png') center no-repeat;
+          // background-size: 100% 100%;
+          -webkit-mask-image: linear-gradient(transparent 4%, blue 15%, blue 86%, transparent 100%);
+          overflow: hidden;
+          position: absolute;
+
+          .drag_box {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            -webkit-mask-image: linear-gradient(90deg, transparent 4%, blue 18%, blue 88%, transparent 100%);
+
+            .drag_img {
+              width: 100%;
+              height: 100%;
+              -webkit-mask-image: linear-gradient(transparent 0%, blue 13%, blue 73%, transparent 97%);
+            }
+
+            .pole_item {
+              width: 1.45rem;
+              height: 1.8rem;
+
+
+              .p_title {
+                width: 1.45rem;
+                height: .44rem;
+                background: rgba(1, 12, 28, 0.7);
+                border-radius: 22px;
+                display: flex;
+                align-items: center;
+                box-sizing: border-box;
+                padding: 0 0 0 10px;
+                position: absolute;
+                top: 0;
+                left: 0;
+
+                >img {
+                  width: .32rem;
+                  height: .32rem;
+                  margin-right: 0.15rem;
+                }
+
+                >span {
+                  font-size: .18rem;
+                  font-family: MicrosoftYaHei;
+                  font-weight: 400;
+                  color: #FFFFFF;
+                  flex: 1;
+                }
+              }
+
+              .pole1 {
+                width: .77rem;
+                height: 1.8rem;
+                position: absolute;
+                top: 0;
+                left: 40%;
+              }
+            }
+
+            .pole_item1 {
+              position: absolute;
+              top: 13%;
+              left: 26%;
+            }
+
+            .pole_item2 {
+              position: absolute;
+              top: 41%;
+              left: 13%;
+            }
+
+            .pole_item3 {
+              position: absolute;
+              top: 22%;
+              left: 40%;
+            }
+
+            .pole_item4 {
+              position: absolute;
+              top: 43%;
+              left: 42%;
+            }
+
+            .pole_item5 {
+              position: absolute;
+              top: 29%;
+              left: 76%;
+            }
+
+            .pole_item6 {
+              position: absolute;
+              top: 61%;
+              left: 62%;
+            }
+
+            .pole_item7 {
+              position: absolute;
+              top: 1%;
+              left: 62%;
+            }
+
+
+            .pop_content {
+              width: 5.38rem;
+              height: 6.92rem;
+              background: url('../../assets/img/pop_bg.png') center no-repeat;
+              background-size: 100% 100%;
+              overflow: hidden;
+              position: absolute;
+              z-index: 999999;
+              // top: 2rem;
+              // left: 2rem;
+
+              .p_video {
+                width: 4.9rem;
+                height: 2.8rem;
+                margin: 0.2rem auto 0;
+
+                >img {
+                  width: 100%;
+                  height: 100%;
+                }
+              }
+
+              .text {
+                width: 100%;
+                height: 0.6rem;
+                font-size: .28rem;
+                font-family: AlimamaShuHeiTi-Bold;
+                font-weight: bold;
+                color: #F3FDFF;
+                line-height: 0.6rem;
+                box-sizing: border-box;
+                padding-left: 0.3rem;
+              }
+
+              .line {
+                width: 4.90rem;
+                height: .01rem;
+                background: #51D4FA;
+                opacity: 0.5;
+                margin: 0 auto;
+              }
+
+              .detail {
+                width: 100%;
+                height: 0.7rem;
+                display: flex;
+                align-items: center;
+                justify-content: space-evenly;
+
+                .d_item {
+                  height: .30rem;
+                  background: rgba(81, 212, 250, 0.15);
+                  border: .01rem solid rgba(106, 222, 255, 0.4);
+                  border-radius: .02rem;
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                  box-sizing: border-box;
+                  padding: 0 0.1rem 0 0.1rem;
+
+                  >img {
+                    width: 0.18rem;
+                    height: 0.18rem;
+                    margin-right: 0.05rem;
+                  }
+
+                  >span {
+                    font-size: .16rem;
+                    font-family: MicrosoftYaHei;
+                    font-weight: 400;
+                    color: #D9EFFD;
+                  }
+                }
+              }
+
+              .grow {
+                width: 4rem;
+                height: .4rem;
+                background: url('../../assets/img/grow_bg.png') center no-repeat;
+                background-size: 100% 100%;
+                margin: 0 auto;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                >img {
+                  width: .22rem;
+                  height: .18rem;
+                  margin-right: 0.1rem;
+                }
+
+                >span:nth-child(2) {
+                  font-size: .16rem;
+                  font-family: MicrosoftYaHei;
+                  font-weight: 400;
+                  color: #FFFFFF;
+                }
+
+                >span:nth-child(3) {
+                  font-size: .16rem;
+                  font-family: MicrosoftYaHei;
+                  font-weight: 400;
+                  color: #36FFD2;
+                }
+              }
+
+              .icon_item {
+                width: 100%;
+                height: calc(100% - 5rem);
+                box-sizing: border-box;
+                padding: 0.3rem 0.2rem;
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: space-between;
+                overflow: auto;
+
+                .icon_item_child {
+                  width: 33.33%;
+                  height: 50%;
+                  display: flex;
+                  margin-bottom: 0.1rem;
+
+                  >img {
+                    width: .6rem;
+                    height: .53rem;
+                    margin-right: 0.1rem;
+                  }
+
+                  >div {
+                    display: flex;
+                    flex-direction: column;
+
+                    >span:nth-child(1) {
+                      font-size: .14rem;
+                      font-family: MicrosoftYaHei;
+                      font-weight: bold;
+                      color: #86D9FF;
+                    }
+
+                    >span:nth-child(2) {
+                      font-size: .2rem;
+                      font-family: AlibabaPuHuiTiB;
+                      font-weight: bold;
+                      color: #FFFFFF;
+                      margin-top: 0.02rem;
+                    }
+                  }
+                }
+              }
+            }
+
+
+          }
+
+
+
+
+
+        }
+      }
+
+    }
+
+    // ::v-deep .el-dialog {
+    //   background: unset !important;
+
+    //   .el-icon-close:before {
+    //     contain: " ";
+    //     width: .44rem;
+    //     height: .44rem;
+    //     background: url('../assets/img/close.png') center no-repeat;
+    //     background-size: 100% 100%;
+    //     position: absolute;
+    //     top: 0.3rem;
+    //     left: -0.1rem;
+    //   }
+    // }
+
+
+  }
+}
+</style>