src/api/index.js

@@ -886,5 +886,8 @@ getIccid(data){
       getInsectChartData(data){
         return sendPostParamsRequest(`/v1/getInsectChartData`, data)
       },
+      getGetDeviceRunParam(data){
+        return sendPostParamsRequest(`/v1/getGetDeviceRunParam`, data)
+      },
 
 };

src/assets/css/main.css

@@ -33,8 +33,6 @@
 
 .tips-model {
   padding: 10px;
-  color: #ff7f00;
-  color: #ff7f00;
   color: #fff;
 }
 
@@ -1259,7 +1257,6 @@ textarea {
   font-family: Microsoft YaHei;
   font-weight: 400;
   color: #FFFFFF;
-  padding: 0 8px;
 }
 
 .input-sel-time .el-input__inner {
@@ -1267,11 +1264,12 @@ textarea {
   border: 2px solid rgba(0, 186, 255, 0.4);
   cursor: pointer;
   position: relative;
+  color: #fff;
 }
 
 .input-sel-time .el-input__inner .el-range-input {
   background: transparent;
-  color: #fff;
+  color: #fff !important;
 }
 
 .input-btn {

src/assets/css/main.scss

@@ -36,8 +36,7 @@
 
 .tips-model {
     padding: 10px;
-    color: #ff7f00;
+   
-    color: #ff7f00;
     color: #fff;
 
     .tips-model-title {
@@ -1330,7 +1329,6 @@ textarea {
         font-family: Microsoft YaHei;
         font-weight: 400;
         color: #FFFFFF;
-        padding: 0 8px;
     }
 
     .el-input__inner {
@@ -1338,10 +1336,10 @@ textarea {
         border: 2px solid rgba(0, 186, 255, 0.40);
         cursor: pointer;
         position: relative;
-
+        color: #fff;
         .el-range-input {
             background: transparent;
-            color: #fff;
+            color: #fff!important;
         }
     }
 }

src/assets/js/echarts.js

@@ -316,3 +316,148 @@ export function thisWeekTemperature_echart(id, data) {
     myChart.resize();
   });
 }
+
+export function pestMonitor_num(id, data) {
+  let chartDom = document.getElementById(id);
+  let myChart = echarts.init(chartDom);
+  var myColor = [
+    "#eb2100",
+    "#eb3600",
+    "#d0570e",
+    "#d0a00e",
+    "#34da62",
+    "#00e9db",
+    "#00c0e9",
+    "#0096f3",
+    "#33CCFF",
+    "#33FFCC",
+  ];
+  var header=data.header
+  var dataList=data.data.list[0]
+  // 排序header
+  var headerNames = Object.keys(header).sort().map(key => header[key]);
+  // 排序数据
+  var  objValues = Object.keys(header).sort().map(key => Number(dataList[key]) || 0);
+  const maxValue = Math.max(...objValues); 
+  const maxList = new Array(objValues.length).fill(maxValue);
+  const minList = new Array(objValues.length).fill(0);
+ var  option = {
+    grid: {
+      left: "11%",
+      top: "3%",
+      right: "0%",
+      bottom: "3%",
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        show: false,
+      },
+    ],
+    yAxis: [
+      {
+        axisTick: "none",
+        axisLine: "none",
+        offset: "27",
+        axisLabel: {
+          textStyle: {
+            color: "#ffffff",
+            fontSize: "12",
+          },
+        },
+        data:headerNames
+      },
+      {
+        axisTick: "none",
+        axisLine: "none",
+        axisLabel: {
+          textStyle: {
+            color: "#ffffff",
+            fontSize: "12",
+          },
+        },
+        data: objValues,
+      },
+      {
+        name: "",
+        nameTextStyle: {
+          color: "#ffffff",
+          fontSize: "16",
+        },
+        axisLine: {
+          lineStyle: {
+            color: "rgba(0,0,0,0)",
+          },
+        },
+        data: [],
+      },
+    ],
+    series: [
+      {
+        name: "条",
+        type: "bar",
+        yAxisIndex: 0,
+        data: objValues,
+        // label: {
+        //   normal: {
+        //     show: true,
+        //     position: "right",
+        //     textStyle: {
+        //       color: "#ffffff",
+        //       fontSize: "16",
+        //     },
+        //   },
+        // },
+        barWidth: 6,
+        itemStyle: {
+          normal: {
+            color: function (params) {
+              var num = myColor.length;
+              return myColor[params.dataIndex % num];
+            },
+          },
+        },
+        z: 2,
+      },
+      {
+        name: "白框",
+        type: "bar",
+        yAxisIndex: 1,
+        barGap: "-100%",
+        data:maxList,
+        barWidth: 12,
+        itemStyle: {
+          normal: {
+            color: "#0e2147",
+            barBorderRadius: 5,
+          },
+        },
+        z: 1,
+      },
+     
+      {
+        name: "外圆",
+        type: "scatter",
+        hoverAnimation: false,
+        data: minList,
+        yAxisIndex: 2,
+        symbolSize: 14,
+        itemStyle: {
+          normal: {
+            color: function (params) {
+              var num = myColor.length;
+              return myColor[params.dataIndex % num];
+            },
+            opacity: 1,
+          },
+        },
+        z: 2,
+      },
+    ],
+  };
+  
+  option && myChart.setOption(option);
+  window.addEventListener("resize", function () {
+    myChart.resize();
+  });
+}

src/assets/js/mapData.js

@@ -0,0 +1 @@
+export default {"features":[{"geometry":{"coordinates":[[121.694759,31.411309],[121.694814,31.410775],[121.695937,31.410855],[121.695883,31.411398],[121.694758,31.411311]],"type":"LineString"},"type":"Feature","properties":{}},{"geometry":{"coordinates":[[121.695245,31.409673],[121.695312,31.409294],[121.69597,31.40934],[121.695928,31.409709],[121.695257,31.409663]],"type":"LineString"},"type":"Feature","properties":{}},{"geometry":{"coordinates":[[121.696057,31.409703],[121.696095,31.409358],[121.696776,31.409394],[121.69675,31.409753],[121.696064,31.409704]],"type":"LineString"},"type":"Feature","properties":{}},{"geometry":{"coordinates":[[[121.696013,31.410749],[121.696052,31.41026],[121.696782,31.410319],[121.696747,31.410808],[121.696013,31.410749]]],"type":"Polygon"},"type":"Feature","properties":{}},{"geometry":{"coordinates":[[121.694947,31.410667],[121.694989,31.410171],[121.695972,31.410251],[121.69591,31.410749],[121.694947,31.410673]],"type":"LineString"},"type":"Feature","properties":{}},{"geometry":{"coordinates":[[121.698151,31.408888],[121.698187,31.408636],[121.700038,31.408772],[121.700008,31.409038],[121.698153,31.408888]],"type":"LineString"},"type":"Feature","properties":{}},{"geometry":{"coordinates":[[121.698434,31.410897],[121.698487,31.410465],[121.700263,31.410594],[121.700227,31.411016],[121.698435,31.410893]],"type":"LineString"},"type":"Feature","properties":{}},{"geometry":{"coordinates":[[121.698255,31.410282],[121.698273,31.41009],[121.698288,31.409971],[121.70049,31.410145],[121.700478,31.410303],[121.700445,31.410441],[121.698257,31.410285]],"type":"LineString"},"type":"Feature","properties":{}},{"geometry":{"coordinates":[[121.69812,31.409843],[121.698143,31.409519],[121.700527,31.409692],[121.700479,31.410019],[121.698123,31.409847]],"type":"LineString"},"type":"Feature","properties":{}},{"geometry":{"coordinates":[[121.698114,31.409371],[121.698147,31.409028],[121.700575,31.409207],[121.700542,31.409552],[121.698123,31.409378]],"type":"LineString"},"type":"Feature","properties":{}},{"geometry":{"coordinates":[[121.696878,31.411439],[121.696932,31.410937],[121.697815,31.411001],[121.697767,31.411515],[121.696878,31.411447]],"type":"LineString"},"type":"Feature","properties":{}},{"geometry":{"coordinates":[[121.695977,31.411383],[121.696023,31.410857],[121.696822,31.410916],[121.696769,31.411456],[121.695975,31.411393]],"type":"LineString"},"type":"Feature","properties":{}}],"type":"FeatureCollection"}

src/components/large-nav.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="large-nav">
+           <div class="nav">
+        <div class="item" :class="active==0?'item_act':''"  @click="largeScreen">
+         
+          <img v-if="active==0" src="../assets/img/nav1_act.png" alt="" />
+           <img v-else src="../assets/img/nav1.png" alt="" />
+          <span>基地总览</span>
+        </div>
+            <div class="item"  :class="active==1?'item_act':''" @click="largeScreen2">
+          <img v-if="active==1" src="../assets/img/nav4_act.png" alt="" />
+          <img v-else src="../assets/img/nav4.png" alt="" />
+          <span>监控设备</span>
+        </div>
+          <div class="item"  :class="active==2?'item_act':''" @click="largeScreen3">
+            <img v-if="active==2" src="../assets/img/nav2_act.png" alt=""  />
+          <img v-else src="../assets/img/nav2.png" alt="" />
+          <span>虫情监测</span>
+        </div>
+            <div class="item"  :class="active==3?'item_act':''" @click="largeScreen4">
+          <img v-if="active==3" src="../assets/img/nav3_act.png" alt="" />
+          <img v-else src="../assets/img/nav3.png" alt="" />
+          <span>智能施肥机</span>
+        </div>
+        <div class="item"  :class="active==4?'item_act':''" @click="toBackPage">
+          <img v-if="active==4" src="../assets/img/nav5_act.png" alt="" />
+          <img v-else src="../assets/img/nav5.png" alt="" />
+          <span>环境监测</span>
+        </div>
+    
+      
+      </div>
+  </div>
+</template>
+<script>
+export default {
+    props:{
+           active: {
+                type: Number,
+                default:0
+            },
+    },
+  data(){
+      return {}
+  },
+  mounted(){},
+  methods:{
+     largeScreen() {
+      this.$router.push({ path: "/largeScreen" });
+    },
+     largeScreen2() {
+      this.$router.push({ path: "/largeScreen2" });
+    },
+    largeScreen3() {
+      this.$router.push({ path: "/largeScreen3" });
+    },
+     largeScreen4() {
+      this.$router.push({ path: "/largeScreen4" });
+    },
+    toBackPage() {
+      this.$router.push({ path: "/realTime" });
+    },
+
+  },
+
+}
+</script>
+<style lang="scss">
+    .nav {
+      // width: 2.5rem;
+      position: absolute;
+      z-index: 999999;
+      left: 50%;
+      transform: translate(-50%);
+      bottom: 0.17rem;
+      display: flex;
+      justify-content: space-between;
+
+      .item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        margin: 0 .2rem;
+        cursor: pointer;
+        >img {
+          width: 1.08rem;
+          height: 0.91rem;
+        }
+
+        >span {
+          font-size: 0.2rem;
+          font-family: AlibabaPuHuiTiB;
+          font-weight: bold;
+          color: #b1eaff;
+        }
+      } 
+
+      .item_act {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        >img {
+          width: 1.08rem;
+          height: 0.91rem;
+        }
+
+        >span {
+          font-size: 0.2rem;
+          font-family: AlibabaPuHuiTiB;
+          font-weight: bold;
+          color: #ffffff;
+        }
+      }
+    }
+</style>

src/i18n/lang/en.js

@@ -225,6 +225,8 @@ module.exports = {
   },
 
   realTime: {
+    due:'Due',
+    Expiration:'Expiration Date',
     target: 'Target',
     average: 'Avg',
     title: 'Real-time Data',
@@ -351,7 +353,9 @@ module.exports = {
       growthStage: "Growth Stage",
       operations: "Operations",
       edit: "Edit",
-      delete: "Delete"
+      delete: "Delete",
+      
+      role:'Role',
     },
     dialog: {
       title: "Edit",
@@ -454,6 +458,7 @@ module.exports = {
       nickname: "Nickname",
       phone: "Phone Number",
       changePassword: "Change Password",
+      role:'Role',
     },
 
     dialogs: {

src/i18n/lang/zh.js

@@ -232,6 +232,8 @@ module.exports = {
   },
   // 实时页面
   realTime: {
+    due:'即将到期',
+    Expiration:'到期时间',
     target: '目标',
     average: '平均',
     title: '实时数据',
@@ -360,7 +362,8 @@ module.exports = {
       growthStage: "生长阶段",
       operations: "操作",
       edit: "编辑",
-      delete: "删除"
+      delete: "删除",
+      role:'角色',
     },
     dialog: {
       title: "编辑",
@@ -464,6 +467,7 @@ module.exports = {
       changePassword: "修改密码",
       deviceCode: "设备code码",
       deviceType: "设备类型",
+      role:'角色',
     },
 
     dialogs: {

src/router/index.js

@@ -43,6 +43,18 @@ const routes = [
     path: '/largeScreen1',
     name: 'largeScreen1',
     component: () => import('../views/page/largeScreen1.vue')
+  },{
+    path: '/largeScreen2',
+    name: 'largeScreen2',
+    component: () => import('../views/page/largeScreen2.vue')
+  },{
+    path: '/largeScreen3',
+    name: 'largeScreen3',
+    component: () => import('../views/page/largeScreen3.vue')
+  },{
+    path: '/largeScreen4',
+    name: 'largeScreen4',
+    component: () => import('../views/page/largeScreen4.vue')
   },
   // 虫情查看的
   {

src/views/manage/deviceManage.vue

@@ -232,7 +232,6 @@ export default {
       },
 
       deviceType: "",
-      deviceSel: [],
     };
   },
     computed:{

src/views/manage/userInfoControl.vue

@@ -225,10 +225,7 @@ export default {
         "id": ''
       },
       confirmPwd: '',
-      typeSelList: [],
-
       deviceType:'',
-     deviceSel: [],
     }
   },
       computed:{

src/views/page/heatFan.vue

@@ -200,11 +200,12 @@ export default {
         return {
             inputData: [],
             typeList1: [
-                { label:this.$t('heatFan.gearOptions.gear0'), value: 0 },
+            { label:this.$t('heatFan.gear0'), value: 0 },
-                { label:this.$t('heatFan.gearOptions.gear1',{index:1}), value: 1 },
+                  { label:this.$t('heatFan.gear1',{index:1}), value: 1 },
-                  { label:this.$t('heatFan.gearOptions.gear1',{index:2}), value: 2 },
+                  { label:this.$t('heatFan.gear1',{index:2}), value: 2 },
-                  { label:this.$t('heatFan.gearOptions.gear1',{index:3}), value: 3 },
+                  { label:this.$t('heatFan.gear1',{index:3}), value: 3 },
-                  { label:this.$t('heatFan.gearOptions.gear1',{index:4}), value: 4 },
+                  { label:this.$t('heatFan.gear1',{index:4}), value: 4 },
+                  { label:this.$t('heatFan.gear1',{index:5}), value: 5 },
             ],
              typeList2: [
                 { label: this.$t('realTime.heatingMode'), value: 1 },

src/views/page/intrinsicParameter.vue

@@ -671,7 +671,7 @@ export default {
     warnModel: true,
             modelPassword:'',
             sensorType: '',
-            typeList1: [{ label: this.$t('intrinsicParameter.averageSoilHumidity', {index: 1}), value: 0 },
+            typeList1: [{ label: this.$t('intrinsicParameterSoil.averageSoilHumidity', {index: 1}), value: 0 },
             { label:  this.$t('intrinsicParameterSoil.soilHumidityOptionLabel', { index: 1 }), value: 1 },
             { label:  this.$t('intrinsicParameterSoil.soilHumidityOptionLabel', { index: 2 }), value: 2 },
             { label:  this.$t('intrinsicParameterSoil.soilHumidityOptionLabel', { index: 3 }), value: 3 },

src/views/page/largeScreen.vue

@@ -3,7 +3,7 @@
     <div class="park" v-if="limitUserId == 2" @click="handlerOther">{{ other_show ? '后退' : '园区简介' }}</div>
     <div class="other" v-show="other_show"></div>
     <div class="kuang">
-      <div class="title"> {{ limitUserId == 9 ? '甘井设施农业大数据云平台' : '温室智慧云数据统计' }}</div>
+      <div class="title"> {{getName()}}</div>
       <!-- <div class="auto_play">
         <span :class="autoPlay ? '' : 'act'" @click="autoPlay1">手动播放</span>
         <span :class="autoPlay ? 'act' : ''" @click="autoPlay2">自动播放</span>
@@ -20,7 +20,7 @@
         <span>{{ time.time }}</span>
       </div>
       <el-button class="large-btn" @click="toBackPage" type="primary" v-if="limitUserId==9">{{$t('text.return')}}</el-button>
-      <div class="nav" v-if="limitUserId!=9">
+      <div class="nav" v-if="limitUserId!=9 && limitUserId!=13">
         <div class="item" >
           <img src="../../assets/img/nav1_act.png" alt="" />
           <span>大数据平台</span>
@@ -38,6 +38,25 @@
           <span>市场行情</span>
         </div>
       </div>
+      <largeNav :active="0" v-if="limitUserId==13"></largeNav>
+      <!-- <div class="nav" >
+        <div class="item" >
+          <img src="../../assets/img/nav1_act.png" alt="" />
+          <span>基地总览</span>
+        </div>
+        <div class="item item_act" @click="toBackPage">
+          <img src="../../assets/img/nav5.png" alt="" />
+          <span>环境监测</span>
+        </div>
+        <div class="item item_act">
+          <img src="../../assets/img/nav4.png" alt="" />
+          <span>监控设备</span>
+        </div>
+        <div class="item item_act">
+          <img src="../../assets/img/nav2.png" alt="" />
+          <span>虫情监测</span>
+        </div>
+      </div> -->
       <div class="content">
         <div class="left" v-show="limitUserId != 5">
           <div class="weatherStation" v-if="limitUserId != 12&&limitUserId != 9"></div>
@@ -126,7 +145,7 @@
                 </div>
               </vue-seamless>
           </div>
-          <div class="map">
+          <div class="map"  :class="`map1-${limitUserId}`">
             <div class="map1">
               <!-- 丽水 -->
               <div class="drag_box" ref="drag_box" v-show="limitUserId == 1">
@@ -250,20 +269,10 @@
           </div>
         </div>
         <div class="right"  v-if="limitUserId == 13">
-           <div class="e_title">虫情图片</div>
+           <div class="e_title">项目简介</div>
-            <div class="right-image-list">
+            <div class="right-aboutUs ">
-               <div
+              <img src="@/assets/img/img-13.jpg" alt="">
-            class="image-div"
+              <div class="scroll">上海前卫柑桔有限公司成立于1992年，地处长江入海口的长兴岛上，位于青草沙水源保护区和长兴岛郊野公园内。是目前我国规模最大、集约化程度最高的柑桔生产经营企业之一。也是上海市首批通过国家认证的绿色食品，通过了HACCP国际食品安全管理体系认证，并多次在全国柑桔评比中获得金奖、银奖和“农业部优质果品”称号。公司主营业务为柑桔生产和销售，兼营场地租赁、农业旅游、衍生品开发、技术推广等业务。 </div>
-            v-for="(item, index) in imageList"
-            :key="index"
-          >
-            <el-image :src="item.thumbnailUrl" :preview-src-list="srcList">
-              <div slot="error" class="image-slot">
-                <i class="el-icon-picture-outline"></i>
-              </div>
-            </el-image>
-            <div class="image-time">{{ item.shootTime }}</div>
-          </div>
             </div>
              <div class="e_title">虫情趋势图</div>
             <div class="right-charts" id="pest-charts"></div>
@@ -386,7 +395,7 @@
                 <img src="../../assets/img/i_title_img.png" alt="" />
                 <span>风机</span>
                 <span class="line"></span>
-                <span>$t('text.invalid')</span>
+                <span>{{$t('text.invalid')}}</span>
                 <span class="line"></span>
                 <span>菜单</span>
               </div>
@@ -432,7 +441,7 @@
                   <img src="../../assets/img/i_title_img.png" alt="" />
                   <span>{{ item.name }}</span>
                   <span class="line"></span>
-                  <span>$t('text.invalid')</span>
+                  <span>{{$t('text.invalid')}}</span>
                   <span class="line"></span>
                   <span>位置{{ item.progress }}%</span>
                   <span>菜单</span>
@@ -458,7 +467,7 @@
                   <img src="../../assets/img/i_title_img.png" alt="" />
                   <span>{{ item.title }}</span>
                   <span class="line"></span>
-                  <span>$t('text.invalid')</span>
+                  <span>{{$t('text.invalid')}}</span>
                   <span class="line"></span>
                   <span>菜单</span>
                 </div>
@@ -483,7 +492,7 @@
                   <img src="../../assets/img/i_title_img.png" alt="" />
                   <span>{{ item.title }}</span>
                   <span class="line"></span>
-                  <span>$t('text.invalid')</span>
+                  <span>{{$t('text.invalid')}}</span>
                   <span class="line"></span>
                   <span>菜单</span>
                 </div>
@@ -508,7 +517,7 @@
                   <img src="../../assets/img/i_title_img.png" alt="" />
                   <span>{{ item.title }}</span>
                   <span class="line"></span>
-                  <span>$t('text.invalid')</span>
+                  <span>{{$t('text.invalid')}}</span>
                   <span class="line"></span>
                   <span>菜单</span>
                 </div>
@@ -541,11 +550,13 @@ import vueSeamless from "vue-seamless-scroll";
 
 import axios from "axios";
 
+import mapData from "@/assets/js/mapData.js";
   import {  changeLanguage, getLanguage } from '@/utils/language'
 import { pestLine } from "@/assets/js/charts";
+import largeNav from '@/components/large-nav.vue'
 export default {
   name: "largeScreen",
-  components: { vueSeamless },
+  components: { vueSeamless,largeNav },
   computed: {
     defaultOption() {
       return {
@@ -723,10 +734,21 @@ export default {
   },
   watch:{
      '$i18n.locale'() {
-    this.dataInit()
+  let userInfo = JSON.parse(localStorage.getItem("userInfo"));
+
+    this.dataInit(userInfo.userid, this.limitUserId)
   }
   },
   methods: {
+    getName(){
+      if(this.limitUserId==9){
+        return  '甘井设施农业大数据云平台'
+      }else if(this.limitUserId==13){
+        return  '上海前卫柑桔大数据平台'
+      }else{
+        return '温室智慧云数据统计'
+      }
+    },
       // id9的甘井设施农业大数据云平台
       timeInit() {
             const start = new Date()
@@ -746,7 +768,6 @@ export default {
             return formattedTime
         },
   getData() {
-            console.log(this.dateRange);
             var data = {
                 equipmentId:'2024070113400048',
                 startTime: this.getdataTime(this.dateRange[0]),
@@ -798,7 +819,7 @@ export default {
     // 根据用户id查询对应的设备大数据信息
     dataInit(userid, limitUserId) {
       this.api.Bigdata_getAllControl(userid).then((res) => {
-        // console.log('根据用户id查询对应的设备大数据信息', res);
+        console.log('根据用户id查询对应的设备大数据信息', res);
         this.dataList = res.data.data;
         setTimeout(() => {
           new Swiper(".middle_disasterWarningAnalysis", {
@@ -935,6 +956,7 @@ export default {
             this.getWeatherData(list[0].deviceId);
             // 长兴前卫柑桔新优品种扩繁基地 id为13 有单独的虫情接口
             if(limitUserId == 13){
+                 this.mapInit()
       this.getImage();
       this.getCharts();
             }
@@ -1282,7 +1304,7 @@ export default {
             this.dataInit(userId, this.limitUserId);
           }else if (this.limitUserId == 13) {
             // this.drag_boxHandler13();
-            this.mapInit()
+         
             this.dataInit(userId, this.limitUserId);
           }
 
@@ -1290,15 +1312,69 @@ export default {
       });
     },
 mapInit(){
+  const that = this
   const map = new AMap.Map("map-13", {
     zoom: 18,
-    center: [121.696506, 31.410799],
+    center: [121.697751,31.410188],
   });
   var  satelliteLayer = new AMap.TileLayer.Satellite();
    var    roadNetLayer = new AMap.TileLayer.RoadNet();
       //  map.setLayers([]); // 先清空现有图层
       satelliteLayer.setMap(map); // 加载卫星图层
       // roadNetLayer.setMap(map);  // 加载路网图层（覆盖在卫星图上）
+// map.on("click", function (e) {
+//     // 获取点击的经纬度
+//     const lnglat = e.lnglat; // 返回 AMap.LngLat 对象
+//     console.log("点击的经纬度：", lnglat.toString()); // 输出：121.696506,31.410799
+
+//     // 也可以直接获取经度和纬度
+//     console.log("经度：", lnglat.getLng());
+//     console.log("纬度：", lnglat.getLat());
+
+//     // 弹出提示框（可选）
+//     const infoWindow = new AMap.InfoWindow({
+//         content: `位置：${lnglat.getLng()}, ${lnglat.getLat()}`,
+//         offset: new AMap.Pixel(0, -30),
+//     });
+//     infoWindow.open(map, lnglat);
+// });
+
+    
+// 添加画范围
+   var listall = mapData.features;
+    listall.forEach((el, index) => {
+        var polygon = new AMap.Polygon({
+          map: map,
+          path: el.geometry.coordinates, //设置多边形边界路径
+          strokeColor: '#ff0000', //线颜色
+          strokeOpacity: 1, //线透明度
+          strokeWeight: 2, //线宽
+          fillColor: '#ff0000', //填充色
+          fillOpacity: 0.5, //填充透明度
+        });
+        polygon.on("click", function (e) {
+          // 在点击事件处理程序中获取点击位置的经纬度坐标
+          var lng = e.lnglat.getLng(); // 获取经度
+          var lat = e.lnglat.getLat(); // 获取纬度
+
+          // 输出经纬度坐标
+          console.log("点击位置的经度：" + lng);
+          console.log("点击位置的纬度：" + lat);
+        });
+        polygon.on("mouseover", (e) => {
+          // 点击之后覆盖物的样式
+          // console.log(e,index);
+        });
+        //  鼠标移出事件
+        polygon.on("mouseout", () => {
+          // 鼠标移开覆盖物之后覆盖物的样式
+          // console.log('离开');
+        });
+
+        //将绘制的面对象添加到地图上
+        map.add(polygon);
+      });
+
       
       // 添加标点
       const iconUrl = require("@/assets/img/axis1.png");
@@ -1307,15 +1383,23 @@ mapInit(){
 size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以根据需要进行调整或忽略
   imageSize: new AMap.Size(35, 43) // 设置实际显示的大小为35x43像素
       });
-
+      this.dataList.forEach((el,index)=>{
+        if(el.xaxis&&el.yaxis){
            const marker = new AMap.Marker({
-        position:new AMap.LngLat(121.696506, 31.410799),
+        position:new AMap.LngLat(el.xaxis,el.yaxis),
         icon: icon,
         title: "上海前卫柑桔有限公司",
          offset: new AMap.Pixel(-17.5, -40), //以 icon 的 [center bottom] 为原点
       });
+         marker.on("click", function (e) {
            
+      that.$router.push({ path: "/largeScreen1" });
+        });
           map.add(marker);
+        }
+           
+      })
+  
 },
     // autoPlay1() {
     //   this.autoPlay = false;
@@ -2219,7 +2303,7 @@ window.open("http://localhost:8080/");
     }
 
     .nav {
-      width: 2.5rem;
+      // width: 2.5rem;
       position: absolute;
       z-index: 999999;
       left: 50%;
@@ -2233,7 +2317,8 @@ window.open("http://localhost:8080/");
         flex-direction: column;
         align-items: center;
         justify-content: center;
-
+        margin: 0 .2rem;
+        cursor: pointer;
         >img {
           width: 1.08rem;
           height: 0.91rem;
@@ -2521,6 +2606,12 @@ window.open("http://localhost:8080/");
               blue 80%,
               transparent 90%,
               transparent 100%);
+                &.map1-13{
+              -webkit-mask-image: unset;
+              .map1{
+                width: 100%;
+              }
+            }
 
           .map1 {
             width: 90%;
@@ -2743,8 +2834,8 @@ window.open("http://localhost:8080/");
               z-index: 10;
                -webkit-mask-image: linear-gradient(90deg,
                   transparent 0%,
-                  blue 13%,
+                  blue 27%,
-                  blue 87%,
+                  blue 73%,
                   transparent 100%);
                .drag_img {
                 width: 100%;
@@ -3430,9 +3521,24 @@ window.open("http://localhost:8080/");
               color: #fff;
             }
         }
-      .right-image-list,.right-charts{
+      .right-image-list,.right-charts,.right-aboutUs{
         width: 100%;
         height: calc((100% - .38rem) / 2);
+      }
+      .right-aboutUs{
+        color:#fff;
+        line-height:28px;
+        margin-top: .2rem;
+        img{
+          width: 100%;
+          height: 1.5rem;
+          object-fit: cover
+        }
+        >div{
+           text-indent: 2em;
+           font-size: .16rem;
+           height: calc(100% - 1.7rem);
+        }
 }
         .liveVideo {
           width: 4rem;

src/views/page/largeScreen1.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="about">
     <div class="kuang">
-      <div class="title"> {{ limitUserId == 9 ? '甘井设施农业大数据云平台' : '温室智慧云数据统计' }}</div>
+      <div class="title"> {{getName()}}</div>
 
       <div class="yuan" @click="toBack">
         <img src="../../assets/img/small.png" alt="" />
@@ -907,6 +907,15 @@ export default {
     clearInterval(this.timer2) && this.timer2;
   },
   methods: {
+     getName(){
+      if(this.limitUserId==9){
+        return  '甘井设施农业大数据云平台'
+      }else if(this.limitUserId==13){
+        return  '上海前卫柑桔大数据平台'
+      }else{
+        return '温室智慧云数据统计'
+      }
+    },
     // 根据用户id查询对应的设备大数据信息
     dataInit(userid) {
       this.api.Bigdata_getAllControl(userid).then((res) => {

src/views/page/largeScreen2.vue

@@ -0,0 +1,336 @@
+<template>
+  <div class="about">
+    <div class="kuang">
+      <div class="title">上海前卫柑桔大数据平台</div>
+      <div class="calendar">
+        <img src="../../assets/img/calendar.png" alt="" />
+        <span>{{ getNowTime() }}</span>
+        <span class="line"></span>
+        <span>{{ time.week }}</span>
+        <span class="line"></span>
+        <span>{{ time.time }}</span>
+      </div>
+      <largeNav :active="1"></largeNav>
+      <div class="content scroll">
+        <div
+          class="video monitor"
+          v-for="(item, index) in videoList"
+          :key="index"
+          :id="'monitor' + index"
+        >
+          <div
+            ref="videoPlayer"
+            class="video-js"
+            :id="`video-js${index}`"
+          ></div>
+        </div>
+      </div>
+      <!-- <div class="pagination">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page.sync="currentPage"
+          :page-size="12"
+          layout="total, prev, pager, next"
+          :total="14"
+        >
+        </el-pagination>
+      </div> -->
+    </div>
+  </div>
+</template>
+
+<script>
+import { getnowtime } from "../../assets/js/nowTime";
+import largeNav from "@/components/large-nav.vue";
+import EZUIKit from "ezuikit-js";
+export default {
+  name: "largeScreen2",
+
+  components: { largeNav },
+  data() {
+    return {
+      typeList: [],
+      limitUserId: 13,
+      time: {},
+      videoList: [],
+      list1: [],
+      list2: [],
+      currentPage: 1,
+    };
+  },
+  mounted() {
+    // this.login();
+
+    this.getTime();
+    this.typeList = this.$store.state.typeList;
+    this.list1 = [
+      { cameraid: "FT5712546", channelid: 1, player: null },
+      { cameraid: "FT5712546", channelid: 2, player: null },
+      { cameraid: "FT5712546", channelid: 3, player: null },
+      { cameraid: "FT5712546", channelid: 4, player: null },
+      { cameraid: "FT5712546", channelid: 5, player: null },
+      { cameraid: "FT5712546", channelid: 6, player: null },
+      { cameraid: "FT5712546", channelid: 7, player: null },
+      { cameraid: "FT5712546", channelid: 8, player: null },
+      { cameraid: "FT5712546", channelid: 9, player: null },
+      { cameraid: "FT5712546", channelid: 10, player: null },
+      { cameraid: "FT5712546", channelid: 11, player: null },
+      { cameraid: "FT5712546", channelid: 12, player: null },
+         { cameraid: "FT5712546", channelid: 13, player: null },
+      { cameraid: "FT5712546", channelid: 14, player: null },
+    ];
+    this.list2 = [
+   
+    ];
+    setTimeout(() => {
+      this.dataInit();
+    }, 0);
+  },
+   beforeDestroy() {
+      this.videoList.forEach((el, index) => {
+        // 销毁播放器
+        if (el.player) {
+          // this.player.dispose();
+          el.player.stop();
+          el.player.destroy();
+          el.player = null;
+        }
+      });
+    },
+  methods: {
+    // 根据用户id查询对应的设备大数据信息
+    dataInit(userid) {
+      this.currentPage = 1;
+      this.videoList = this.list1;
+      this.videoList.forEach((el, index) => {
+        this.getVideoData(el.cameraid, el.channelid, index);
+      });
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+ 
+    handleCurrentChange(val) {
+      this.videoList.forEach((el, index) => {
+        // 销毁播放器
+        if (el.player) {
+          // this.player.dispose();
+          el.player.stop();
+          el.player.destroy();
+          el.player = null;
+        }
+      });
+      setTimeout(() => {
+        if (val == 1) {
+          this.videoList = this.list1;
+        } else {
+          this.videoList = this.list2;
+        }
+        this.videoList.forEach((el, index) => {
+          this.getVideoData(el.cameraid, el.channelid, index);
+        });
+      }, 0);
+    },
+
+    // 数据单位
+    getTypeList(val) {
+      let typeList1 = [];
+      typeList1 = this.typeList.filter((item) => {
+        return item.value == val;
+      });
+      return typeList1[0].unit;
+    },
+
+    // 获取本地的userid和token
+    login() {
+      let userInfo = JSON.parse(localStorage.getItem("userInfo"));
+
+      this.dataInit(userInfo.userid);
+    },
+
+    getTime() {
+      this.time = getnowtime();
+      // console.log(this.time);
+      const that = this;
+      setInterval(() => {
+        that.time = getnowtime();
+      }, 1000);
+    },
+    // 获取摄像头得地址 Copy
+    getVideoData(cameraid, channelid, index) {
+      this.api.camera_gethls(cameraid, channelid).then((res) => {
+        // console.log("获取摄像头得地址 Copy", res);
+        if (res.data.code == 200) {
+          // this.url = res.data.data.ezopen
+          this.createVideoNew(
+            res.data.data.accesstoken,
+            res.data.data.ezopen,
+            index
+          );
+          // this.createVideo()
+        }
+      });
+    },
+    createVideoNew(accessToken, url, index) {
+      // console.log(accessToken, url, index, 111);
+      // divW和divH是获取了父级宽高 使播放容器能铺满div
+      let divW = document.getElementById("monitor" + index).clientWidth;
+      let divH = document.getElementById("monitor" + index).clientHeight;
+      this.videoList[index].player = new EZUIKit.EZUIKitPlayer({
+        id: "video-js" + index, // 视频容器ID
+        accessToken: accessToken,
+        url: url,
+        // 官方url例子：ezopen://open.ys7.com/G39444019/1.live 也可并非.live结尾 详见GitHub
+        // 播放主题  simple-极简版; standard-标准版; security-安防版; voice-语音版; 自定义主题详见GitHub
+        template: "security",
+        useHardDev: true, // 开启高性能模式 依赖需高于7.7.x 截止到2023.11.7 建议保持最新版本为7.7.6
+        // plugin: ["talk"], // 加载插件，talk-对讲 非必填
+        width: divW, // 播放容器宽高 也可以直接设置成数字 如 1920 单位是px
+        height: divH, // 播放容器宽高 也可以直接设置成数字 如 1080 单位是px
+      });
+      // console.log(this.player);
+    },
+    getNowTime() {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = (now.getMonth() + 1).toString().padStart(2, "0");
+      const day = now.getDate().toString().padStart(2, "0");
+      const formattedDate = `${year}.${month}.${day}`;
+      return formattedDate;
+    },
+  },
+};
+</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: 1rem;
+      box-sizing: border-box;
+      padding-top: 0.06rem;
+      font-size: 0.54rem;
+      font-family: YouSheBiaoTiHei;
+      font-weight: 400;
+      color: #eff8fc;
+      line-height: 0.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: 0.56rem;
+      height: 0.56rem;
+      background: url("../../assets/img/yuan_bg.png") center no-repeat;
+      background-size: 100% 100%;
+      position: absolute;
+      top: 0.53rem;
+      left: 0.71rem;
+      z-index: 999;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      > img {
+        width: 0.2rem;
+        height: 0.2rem;
+      }
+    }
+
+    .calendar {
+      width: 4rem;
+      height: 0.3rem;
+      position: absolute;
+      top: 0.33rem;
+      right: 0.66rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      > img {
+        width: 0.28rem;
+        height: 0.3rem;
+      }
+
+      > span:nth-child(2) {
+        font-size: 0.24rem;
+        font-family: PingFang-SC-Bold;
+        font-weight: bold;
+        color: #7abaff;
+      }
+
+      > span:nth-child(4) {
+        font-size: 0.2rem;
+        font-family: PingFang-SC-Bold;
+        font-weight: bold;
+        color: #7abaff;
+      }
+
+      > span:nth-child(6) {
+        font-size: 0.3rem;
+        font-family: PingFang-SC-Bold;
+        font-weight: bold;
+        color: #7abaff;
+      }
+
+      .line {
+        width: 0.02rem;
+        height: 0.3rem;
+        background: #ffffff;
+        opacity: 0.2;
+      }
+    }
+
+    .content {
+      width: 100%;
+      padding: 0 1rem;
+      height: calc(100% - 2.5rem);
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      grid-row-gap: 0.2rem; //纵向间隔
+      grid-column-gap: 0.2rem; //横向间隔
+      .video {
+        height: calc((100vh - 3.3rem) / 3);
+        .video-js {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .pagination {
+      width: 100%;
+      display: flex;
+      padding-right: 100px;
+      justify-content: flex-end;
+    }
+  }
+}
+
+::-webkit-scrollbar {
+  display: none;
+}
+</style>

src/views/page/realTime.vue

@@ -36,7 +36,9 @@
         </div>
         <!-- 控制器/施肥机 -->
         <div class="page-content new-data" v-else :class="deviceName !=1 ? 'control-page' : ''">
-            <div class="page-iccid" v-if="validateIccid($store.state.equipmentList[indexs - 1].iccidcode)"><span>{{$t('realTime.iccid')}}:{{$store.state.equipmentList[indexs - 1].iccidcode?$store.state.equipmentList[indexs - 1].iccidcode:''}}</span>&nbsp;&nbsp;&nbsp;<span>到期时间: </span><span :class="getPackageTimeColor()?'color-red':''">{{getPackageTime()}}<span v-if="getPackageTimeColor()">(即将到期)</span></span> </div>
+            <div class="page-iccid" v-if="validateIccid($store.state.equipmentList[indexs - 1].iccidcode)"><span>{{$t('realTime.iccid')}}:{{$store.state.equipmentList[indexs - 1].iccidcode?$store.state.equipmentList[indexs - 1].iccidcode:''}}</span>&nbsp;&nbsp;&nbsp;
+            <span v-if="getPackageTimeColor()">{{$t('realTime.Expiration')}}: </span>
+            <span v-if="getPackageTimeColor()" :class="getPackageTimeColor()?'color-red':''">{{getPackageTime()}}<span v-if="getPackageTimeColor()">({{$t('realTime.due')}})</span></span> </div>
             <div class="control-view" v-if="deviceName !=1">
                 <div class="title" @click='weatherModel = true'>{{$t('index.weatherStation')}}:</div>
                 <vue-seamless class="control-list" :data="controlList" :class-option="defaultOption1">

src/views/page/wetFan.vue

@@ -402,12 +402,12 @@ export default {
       loading:null,
       pageName:'湿帘风机',
       typeList1: [
-         { label:this.$t('heatFan.gearOptions.gear0'), value: 0 },
+         { label:this.$t('heatFan.gear0'), value: 0 },
-                  { label:this.$t('heatFan.gearOptions.gear1',{index:1}), value: 1 },
+                  { label:this.$t('heatFan.gear1',{index:1}), value: 1 },
-                  { label:this.$t('heatFan.gearOptions.gear1',{index:2}), value: 2 },
+                  { label:this.$t('heatFan.gear1',{index:2}), value: 2 },
-                  { label:this.$t('heatFan.gearOptions.gear1',{index:3}), value: 3 },
+                  { label:this.$t('heatFan.gear1',{index:3}), value: 3 },
-                  { label:this.$t('heatFan.gearOptions.gear1',{index:4}), value: 4 },
+                  { label:this.$t('heatFan.gear1',{index:4}), value: 4 },
-                  { label:this.$t('heatFan.gearOptions.gear1',{index:5}), value: 5 },
+                  { label:this.$t('heatFan.gear1',{index:5}), value: 5 },
             ],
             inputDataNew: [],
         }