diff --git a/src/api/index.js b/src/api/index.js
index a2c06df9..dd6d4f1b 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -886,5 +886,8 @@ getIccid(data){
       getInsectChartData(data){
         return sendPostParamsRequest(`/v1/getInsectChartData`, data)
       },
+      getGetDeviceRunParam(data){
+        return sendPostParamsRequest(`/v1/getGetDeviceRunParam`, data)
+      },
 
 };
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index ad4fde75..ee617822 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -1257,7 +1257,6 @@ textarea {
   font-family: Microsoft YaHei;
   font-weight: 400;
   color: #FFFFFF;
-  padding: 0 8px;
 }
 
 .input-sel-time .el-input__inner {
@@ -1265,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 {
diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
index 2bc9bbcd..4c5a8361 100644
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -1329,7 +1329,6 @@ textarea {
         font-family: Microsoft YaHei;
         font-weight: 400;
         color: #FFFFFF;
-        padding: 0 8px;
     }
 
     .el-input__inner {
@@ -1337,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;
         }
     }
 }
diff --git a/src/assets/img/img-13.jpg b/src/assets/img/img-13.jpg
new file mode 100644
index 00000000..91e41e14
Binary files /dev/null and b/src/assets/img/img-13.jpg differ
diff --git a/src/assets/js/echarts.js b/src/assets/js/echarts.js
index d38d942a..28f09a3a 100644
--- a/src/assets/js/echarts.js
+++ b/src/assets/js/echarts.js
@@ -311,6 +311,151 @@ export function thisWeekTemperature_echart(id, data) {
 
     ]
   };
+  option && myChart.setOption(option);
+  window.addEventListener("resize", function () {
+    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();
diff --git a/src/components/large-nav.vue b/src/components/large-nav.vue
index a56ffe3b..f04e6e15 100644
--- a/src/components/large-nav.vue
+++ b/src/components/large-nav.vue
@@ -17,8 +17,13 @@
           <img v-else src="../assets/img/nav2.png" alt="" />
           <span>虫情监测</span>
         </div>
-        <div class="item"  :class="active==3?'item_act':''" @click="toBackPage">
-          <img v-if="active==3" src="../assets/img/nav5_act.png" alt="" />
+            <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>
@@ -48,6 +53,9 @@ export default {
     },
     largeScreen3() {
       this.$router.push({ path: "/largeScreen3" });
+    },
+     largeScreen4() {
+      this.$router.push({ path: "/largeScreen4" });
     },
     toBackPage() {
       this.$router.push({ path: "/realTime" });
diff --git a/src/router/index.js b/src/router/index.js
index 4cee9fa4..648de555 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -51,6 +51,10 @@ const routes = [
     path: '/largeScreen3',
     name: 'largeScreen3',
     component: () => import('../views/page/largeScreen3.vue')
+  },{
+    path: '/largeScreen4',
+    name: 'largeScreen4',
+    component: () => import('../views/page/largeScreen4.vue')
   },
   // 虫情查看的
   {
diff --git a/src/views/page/heatFan.vue b/src/views/page/heatFan.vue
index 535865e8..5cae15f1 100644
--- a/src/views/page/heatFan.vue
+++ b/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.gearOptions.gear1',{index:1}), value: 1 },
-                  { label:this.$t('heatFan.gearOptions.gear1',{index:2}), value: 2 },
-                  { label:this.$t('heatFan.gearOptions.gear1',{index:3}), value: 3 },
-                  { label:this.$t('heatFan.gearOptions.gear1',{index:4}), value: 4 },
+            { label:this.$t('heatFan.gear0'), value: 0 },
+                  { label:this.$t('heatFan.gear1',{index:1}), value: 1 },
+                  { label:this.$t('heatFan.gear1',{index:2}), value: 2 },
+                  { label:this.$t('heatFan.gear1',{index:3}), value: 3 },
+                  { 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 },
diff --git a/src/views/page/intrinsicParameter.vue b/src/views/page/intrinsicParameter.vue
index 09e56c12..e873e3e5 100644
--- a/src/views/page/intrinsicParameter.vue
+++ b/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 },
diff --git a/src/views/page/largeScreen.vue b/src/views/page/largeScreen.vue
index 6eb1c69f..e5b170b6 100644
--- a/src/views/page/largeScreen.vue
+++ b/src/views/page/largeScreen.vue
@@ -269,20 +269,10 @@
           </div>
         </div>
         <div class="right"  v-if="limitUserId == 13">
-           <div class="e_title">虫情图片</div>
-            <div class="right-image-list">
-               <div
-            class="image-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 class="e_title">项目简介</div>
+            <div class="right-aboutUs ">
+              <img src="@/assets/img/img-13.jpg" alt="">
+              <div class="scroll">上海前卫柑桔有限公司成立于1992年，地处长江入海口的长兴岛上，位于青草沙水源保护区和长兴岛郊野公园内。是目前我国规模最大、集约化程度最高的柑桔生产经营企业之一。也是上海市首批通过国家认证的绿色食品，通过了HACCP国际食品安全管理体系认证，并多次在全国柑桔评比中获得金奖、银奖和“农业部优质果品”称号。公司主营业务为柑桔生产和销售，兼营场地租赁、农业旅游、衍生品开发、技术推广等业务。 </div>
             </div>
              <div class="e_title">虫情趋势图</div>
             <div class="right-charts" id="pest-charts"></div>
@@ -405,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>
@@ -451,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>
@@ -477,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>
@@ -502,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>
@@ -527,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>
@@ -1313,16 +1303,32 @@ 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);
+// });
 
     
 // 添加画范围
@@ -1376,6 +1382,10 @@ size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以
         title: "上海前卫柑桔有限公司",
          offset: new AMap.Pixel(-17.5, -40), //以 icon 的 [center bottom] 为原点
       });
+         marker.on("click", function (e) {
+           
+      that.$router.push({ path: "/largeScreen1" });
+        });
           map.add(marker);
         }
            
@@ -3502,10 +3512,23 @@ 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{
+           height: calc(100% - 1.7rem);
+        }
+}
         .liveVideo {
           width: 4rem;
           height: 0.43rem;
diff --git a/src/views/page/largeScreen2.vue b/src/views/page/largeScreen2.vue
index f2b613cb..601f5a40 100644
--- a/src/views/page/largeScreen2.vue
+++ b/src/views/page/largeScreen2.vue
@@ -10,44 +10,127 @@
         <span class="line"></span>
         <span>{{ time.time }}</span>
       </div>
-           <largeNav :active="1"></largeNav>
+      <largeNav :active="1"></largeNav>
       <div class="content">
-          <div class="video" v-for="item,index in 12" :key="index"></div>
+        <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="16"
+        >
+        </el-pagination>
       </div>
-    
     </div>
   </div>
 </template>
 
 <script>
 import { getnowtime } from "../../assets/js/nowTime";
-import largeNav from '@/components/large-nav.vue'
+import largeNav from "@/components/large-nav.vue";
+import EZUIKit from "ezuikit-js";
 export default {
   name: "largeScreen2",
-  
-  components: {largeNav },
+
+  components: { largeNav },
   data() {
     return {
-     typeList:[],
-     limitUserId:13,
-     time:{}
+      typeList: [],
+      limitUserId: 13,
+      time: {},
+      videoList: [],
+      list1: [],
+      list2: [],
+      currentPage: 1,
     };
   },
   mounted() {
-    this.login();
+    // this.login();
 
     this.getTime();
-  this.typeList=this.$store.state.typeList
-
-  },
-  beforeDestroy() {
+    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 },
+    ];
+    this.list2 = [
+      { cameraid: "FT5712546", channelid: 13, player: null },
+      { cameraid: "FT5712546", channelid: 14, player: null },
+    ];
+    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) {
@@ -60,12 +143,9 @@ export default {
 
     // 获取本地的userid和token
     login() {
-   
       let userInfo = JSON.parse(localStorage.getItem("userInfo"));
 
       this.dataInit(userInfo.userid);
-
-   
     },
 
     getTime() {
@@ -76,7 +156,40 @@ export default {
         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();
@@ -85,8 +198,7 @@ export default {
       const formattedDate = `${year}.${month}.${day}`;
       return formattedDate;
     },
- 
-  }
+  },
 };
 </script>
 <style lang="scss" scoped>
@@ -118,16 +230,17 @@ export default {
       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%);
+      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;
@@ -141,7 +254,7 @@ export default {
       align-items: center;
       justify-content: center;
 
-      >img {
+      > img {
         width: 0.2rem;
         height: 0.2rem;
       }
@@ -157,26 +270,26 @@ export default {
       align-items: center;
       justify-content: space-between;
 
-      >img {
+      > img {
         width: 0.28rem;
         height: 0.3rem;
       }
 
-      >span:nth-child(2) {
+      > span:nth-child(2) {
         font-size: 0.24rem;
         font-family: PingFang-SC-Bold;
         font-weight: bold;
         color: #7abaff;
       }
 
-      >span:nth-child(4) {
+      > span:nth-child(4) {
         font-size: 0.2rem;
         font-family: PingFang-SC-Bold;
         font-weight: bold;
         color: #7abaff;
       }
 
-      >span:nth-child(6) {
+      > span:nth-child(6) {
         font-size: 0.3rem;
         font-family: PingFang-SC-Bold;
         font-weight: bold;
@@ -194,15 +307,24 @@ export default {
     .content {
       width: 100%;
       padding: 0 1rem;
-      height: calc(100% - 2.4rem);
-  display: grid;
-	grid-template-columns: repeat(4,1fr);
-grid-row-gap:.2rem;//纵向间隔
-grid-column-gap:.2rem;//横向间隔
-.video{
-  // height: calc((100% - .4rem) / 3);
-  background-color: #fff;
-}
+      height: calc(100% - 2.7rem);
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      grid-row-gap: 0.2rem; //纵向间隔
+      grid-column-gap: 0.2rem; //横向间隔
+      .video {
+        height: calc((100vh - 3.1rem) / 3);
+        .video-js {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .pagination {
+      width: 100%;
+      display: flex;
+      padding-right: 100px;
+      justify-content: flex-end;
     }
   }
 }
diff --git a/src/views/page/largeScreen3.vue b/src/views/page/largeScreen3.vue
index b26e4d3c..4bc6fbf8 100644
--- a/src/views/page/largeScreen3.vue
+++ b/src/views/page/largeScreen3.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="home">
+  <div class="home largeScreen3">
     
     <div class="kuang">
       <div class="title">温室智慧云数据统计</div>
@@ -16,46 +16,30 @@
       <largeNav :active="2"></largeNav>
       <div class="content">
         <div class="left">
-          <div class="weatherStation"></div>
-
-          <div class="weather">
-            <div>
-              <marquee behavior="" direction="" scrollamount="3">
-                <div class="item" v-for="(item, index) in weatherDataList" :key="index">
-                  <img :src="require(`../../assets/image/real-time-${item.formula}.png`)
-                    " alt="" />
-                  <span>{{ item.environmentDataId }} : </span>
-                  <span>{{
-                    item.environmentData + getTypeList(item.formula)
-                  }}</span>
-                </div>
-              </marquee>
-            </div>
-          </div>
-
-          <div class="weather_echart" id="weather_echart"></div>
-              <div class="e_title" v-show="limitUserId == 12">实时数据</div>
+               <div class="e_title">虫情视频简介</div>
+               <div class="left-video">
+              <video class="video" controls muted loop autoplay src="https://lihemix.oss-cn-hangzhou.aliyuncs.com/%E9%95%BF%E5%85%B4%E5%B2%9B%E8%99%AB%E6%83%85%E8%A7%86%E9%A2%91.mp4"></video>
+               </div>
           <div class="environmentData" :class="`environmentData-${limitUserId}`">
-            <div class="e_title">温室环境数据</div>
-            <div class="detail">
-              <!-- <div class="title_child">一号温室</div> -->
-              <vue-seamless class="e_content" :data="list" :class-option="defaultOption">
-                <div class="item" v-for="(el, index) in list" :key="index">
-                  <!-- <img :src="el.formula" alt=""> -->
-                  <img :src="el.img" alt="" />
-                  <div class="item_child">
-                    <span>{{ el.name }}</span>
-                    <span>{{ el.num }}</span>
-                  </div>
-                </div>
-              </vue-seamless>
-             
+            <div class="e_title">虫情趋势图</div>
+            <div class="detail" id="pest-charts">
             </div>
           </div>
 
           <div class="thisWeekTemperature" >
-            <div class="e_title">本周温度统计</div>
-            <div class="thisWeekTemperature_echart" id="thisWeekTemperature_echart"></div>
+            <div class="e_title">当日虫情数量</div>
+  <div class=" input-sel-time">
+            <el-date-picker
+      v-model="lefttime"
+      value-format="yyyy-MM-dd"
+      type="date"
+       :picker-options="pickerOptions"
+      @change="getInsectChartData"
+      placeholder="选择日期">
+    </el-date-picker>
+  </div>
+            <div v-show="chartsShow" class="thisWeekTemperature_echart" id="pestMonitor_num"></div>
+            <div v-show="!chartsShow" class="thisWeekTemperature_echart noData">当日无数据~</div>
           </div>
         </div>
         <div class="middle">
@@ -70,6 +54,7 @@
           </div>
               <div class="right" >
            <div class="e_title">虫情图片</div>
+         
             <div class="right-image-list">
                <div
             class="image-div"
@@ -84,8 +69,81 @@
             <div class="image-time">{{ item.shootTime }}</div>
           </div>
             </div>
-             <div class="e_title">虫情趋势图</div>
-            <div class="right-charts" id="pest-charts"></div>
+             <div class="e_title">虫情设备运行状态</div>
+               <div class="device_content scroll">
+              <div class="content_item"  v-if="rightList">
+              <div  style="margin-bottom: 0.15rem">
+                <div class="i_title">
+                  <span>{{rightList.intervalTime?.label}}</span>
+                  <span class="line"></span>
+                  <span class="data-num">{{rightList.intervalTime?.value}}分钟</span>
+                </div>
+              </div>
+               <div  style="margin-bottom: 0.15rem">
+                <div class="i_title">
+                  <span>{{rightList.acquisitionTime?.label}}</span>
+                  <span class="line"></span>
+                  <span class="data-num">{{rightList.acquisitionTime?.value}}分钟</span>
+                </div>
+              </div>
+               <div  style="margin-bottom: 0.15rem">
+                <div class="i_title">
+                  <span>{{rightList.heatingTime?.label}}</span>
+                  <span class="line"></span>
+                  <span class="data-num">{{rightList.heatingTime?.value}}分钟</span>
+                </div>
+              </div>
+               <div  style="margin-bottom: 0.15rem">
+                <div class="i_title">
+                  <span>{{rightList.heatingTempMax?.label}}</span>
+                  <span class="line"></span>
+                  <span class="data-num">{{rightList.heatingTempMax?.value}}℃</span>
+                </div>
+              </div>
+               <div  style="margin-bottom: 0.15rem">
+                <div class="i_title">
+                  <span>{{rightList.lowTemperature?.label}}</span>
+                  <span class="line"></span>
+                  <span class="data-num">{{rightList.lowTemperature?.value}}℃</span>
+                </div>
+              </div>
+               <div  style="margin-bottom: 0.15rem">
+                <div class="i_title">
+                  <span>{{rightList.highTemperature?.label}}</span>
+                  <span class="line"></span>
+                  <span class="data-num">{{rightList.highTemperature?.value}}℃</span>
+                </div>
+              </div>
+               <div  style="margin-bottom: 0.15rem">
+                <div class="i_title">
+                  <span>{{rightList.delayAfterRain?.label}}</span>
+                  <span class="line"></span>
+                  <span class="data-num">{{rightList.delayAfterRain?.value}}分钟</span>
+                </div>
+              </div>
+               <div  style="margin-bottom: 0.15rem">
+                <div class="i_title">
+                  <span>{{rightList.startTime?.label}}</span>
+                  <span class="line"></span>
+                  <span class="data-num">{{rightList.startTime?.value}}</span>
+                </div>
+              </div>
+               <div  style="margin-bottom: 0.15rem">
+                <div class="i_title">
+                  <span>{{rightList.endTime?.label}}</span>
+                  <span class="line"></span>
+                  <span class="data-num">{{rightList.endTime?.value}}</span>
+                </div>
+              </div>
+               <div  style="margin-bottom: 0.15rem">
+                <div class="i_title">
+                  <span>{{rightList.uploadIntervalTime?.label}}</span>
+                  <span class="line"></span>
+                  <span class="data-num">{{rightList.uploadIntervalTime?.value}}分钟</span>
+                </div>
+              </div>
+            </div>
+            </div>
         </div>
       
         </div>
@@ -100,7 +158,7 @@ import Swiper from "@/assets/js/swiper.min.js";
 import "@/assets/js/swiper.min.css";
 import {
   weather_echart,
-  thisWeekTemperature_echart
+  pestMonitor_num
 } from "@/assets/js/echarts";
 import vueSeamless from "vue-seamless-scroll";
 
@@ -245,7 +303,18 @@ export default {
          imageList: [],
       chartsData: null,
       srcList: [],
-
+      lefttime:'',
+       chartsShow:true,
+       rightList:null,
+ pickerOptions: {
+        disabledDate: (time) => {
+          // 获取当前日期的 00:00:00
+          const today = new Date();
+          today.setHours(0, 0, 0, 0);
+          
+          // 禁用今天及未来的日期（time 是当前遍历的日期）
+          return time.getTime() > today.getTime() - 86400000; // 86400000 = 1天的毫秒数
+        },},
       // id9的甘井设施农业大数据云平台
        dateRange: [],
         currentPage: 1,
@@ -338,9 +407,8 @@ export default {
               }
             })
             list.sort(this.compare('equipmentStatu'))
-            // 大冶鑫
-            this.get_weather_echart_data(list[0].deviceId);
-            this.get_thisWeekTemperature_echart_data(list[0].deviceId);
+            this.lefttime=this.getTime1()
+         
             this.get_environmentData(list[0].deviceId);
             this.get_readControl_getState(list[0].deviceId);
             this.getWeatherData(list[0].deviceId);
@@ -348,6 +416,7 @@ export default {
       this.getImage();
       this.getCharts();
                    this.mapInit()
+                      this.getInsectChartData()
 
           } 
       });
@@ -365,6 +434,13 @@ export default {
       const formattedOneWeekAgo = oneWeekAgo.toISOString().split("T")[0];
       return formattedOneWeekAgo;
     },
+    getTime1() {
+      // 获取一周前的日期（格式：YYYY-MM-DD）
+      const oneWeekAgo = new Date();
+      oneWeekAgo.setDate(oneWeekAgo.getDate() - 1);
+      const formattedOneWeekAgo = oneWeekAgo.toISOString().split("T")[0];
+      return formattedOneWeekAgo;
+    },
    // 获取图片列表
     getImage() {
       var data = {
@@ -384,11 +460,22 @@ export default {
     // 左下角虫情趋势图
     getCharts() {
       var data = {
+        // beginTime: this.getTime7(),
+        // endTime: this.getTimeNew(),
+        deviceId: 613,
+      };
+        this.api.getGetDeviceRunParam(data).then((res) => {
+          if (res.data.code == 200) {
+            this.rightList = res.data.data;
+          
+          }
+        });
+        var data1 = {
         beginTime: this.getTime7(),
         endTime: this.getTimeNew(),
         deviceId: 613,
       };
-        this.api.getInsectChartData(data).then((res) => {
+        this.api.getInsectChartData(data1).then((res) => {
           if (res.data.code == 200) {
             this.chartsData = res.data;
             pestLine("pest-charts", this.chartsData);
@@ -413,22 +500,33 @@ export default {
     },
 
     // 获取设备一周的温度
-    get_thisWeekTemperature_echart_data(deviceId) {
-      this.api.Bigdata_getWeekTemperature(deviceId).then((res) => {
-        // console.log('获取设备一周的温度', res);
-        res.data.data.forEach((e) => {
-          this.day_list.push(e.day);
-          this.maxTemperature_list.push(Number(e.maxTemperature));
-          this.minTemperature_list.push(Number(e.minTemperature));
+    getInsectChartData(deviceId) {
+
+       var data = {
+        beginTime: this.lefttime,
+        endTime:  this.lefttime,
+        deviceId: 613,
+      };
+      
+        this.api.getInsectChartData(data).then((res) => {
+          if (res.data.code == 200) {
+            if(JSON.stringify(res.data.header) === '{}'){
+              this.chartsShow=false
+            }else{
+               this.chartsShow=true
+               pestMonitor_num('pestMonitor_num',res.data)
+            }
+           
+          }
         });
-        let data = {
-          day: this.day_list,
-          maxTemperature: this.maxTemperature_list,
-          minTemperature: this.minTemperature_list,
-        };
-        // console.log('00000000',data);
-        thisWeekTemperature_echart("thisWeekTemperature_echart", data);
-      });
+      // this.api.getInsectChartData(deviceId).then((res) => {
+      //   // console.log('获取设备一周的温度', res);
+       
+      //   console.log('00000000',res);
+        
+      //       // pestMonitor_num('pestMonitor_num',data)
+      //   // thisWeekTemperature_echart("thisWeekTemperature_echart", data);
+      // });
     },
 
     // 主页查看控制器实时数据
@@ -669,11 +767,12 @@ export default {
       });
     },
 mapInit(){
+  const that = this
   const map = new AMap.Map("map-13", {
     zoom: 18,
        viewMode: "3D",
         terrain: true,
-    center: [121.696506, 31.410799],
+    center: [121.697751,31.410188],
      pitch: 45
   });
   var  satelliteLayer = new AMap.TileLayer.Satellite();
@@ -698,8 +797,13 @@ size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以
         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);
+        
         }
            
       })
@@ -716,15 +820,15 @@ size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以
           fillColor: '#ff0000', //填充色
           fillOpacity: 0.5, //填充透明度
         });
-        polygon.on("click", function (e) {
-          // 在点击事件处理程序中获取点击位置的经纬度坐标
-          var lng = e.lnglat.getLng(); // 获取经度
-          var lat = e.lnglat.getLat(); // 获取纬度
+        // polygon.on("click", function (e) {
+        //   // 在点击事件处理程序中获取点击位置的经纬度坐标
+        //   var lng = e.lnglat.getLng(); // 获取经度
+        //   var lat = e.lnglat.getLat(); // 获取纬度
 
-          // 输出经纬度坐标
-          console.log("点击位置的经度：" + lng);
-          console.log("点击位置的纬度：" + lat);
-        });
+        //   // 输出经纬度坐标
+        //   console.log("点击位置的经度：" + lng);
+        //   console.log("点击位置的纬度：" + lat);
+        // });
         polygon.on("mouseover", (e) => {
           // 点击之后覆盖物的样式
           // console.log(e,index);
@@ -808,6 +912,22 @@ size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以
   }
 }
 </style>
+<style lang="scss">
+.largeScreen3{
+   .input-sel-time {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  .el-input__inner{
+    height: 35px;
+    line-height: 35px;
+  }
+  .el-input__icon{
+    line-height: 35px;
+  }
+}
+}
+</style>
 <style lang="scss" scoped>
 .home {
   width: 100%;
@@ -817,6 +937,14 @@ size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以
   box-sizing: border-box;
   padding-bottom: 0.1rem;
   position: relative;
+  .left-video{
+    width: 100%;
+    height: calc(50% - 1.5rem);
+    video{
+      width: 100%;
+      height: 100%;
+    }
+  }
 
   .park {
     position: absolute;
@@ -1145,7 +1273,7 @@ size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以
           }
           .detail {
             width: 3.98rem;
-            height: 3.08rem;
+            height: 2.58rem;
             overflow: hidden;
             padding-top: 0.15rem;
 
@@ -1205,11 +1333,17 @@ size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以
 
         .thisWeekTemperature {
           width: 100%;
-          height: calc((100% - 4.04rem) / 2);
+          height: calc((100% - 3.04rem) / 2);
 
           .thisWeekTemperature_echart {
             width: 100%;
             height: calc(100% - 0.19rem);
+            &.noData{
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              color: #fff;
+            }
           }
         }
       }
@@ -2199,6 +2333,24 @@ size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以
       .right-image-list,.right-charts{
         width: 100%;
         height: calc((100% - .38rem) / 2);
+        &.right-data{
+          display: grid;
+	grid-template-columns: repeat(2,1fr);
+grid-row-gap:10px;//纵向间隔
+grid-column-gap:10px;//横向间隔
+.data-item{
+  color: #fff;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  .data-name{
+    margin-bottom: 5px;
+    font-size: 17px;
+    font-weight: bold;
+  }
+}
+        }
       }
         .liveVideo {
           width: 4rem;
@@ -2400,9 +2552,10 @@ size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以
 
         .device_content {
           width: 100%;
-          height: calc(100% - 5.14rem);
+            height: calc((100% - .38rem) / 2);
           overflow: auto;
 
+              color: #fff;
           .content_item {
             margin-top: 0.2rem;
 
@@ -2416,16 +2569,20 @@ size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以
               justify-content: space-between;
               box-sizing: border-box;
               padding: 0 0.1rem 0 0.05rem;
-
+              .data-num{
+                text-align: right;
+              }
               >img {
                 width: 0.5rem;
                 height: 0.5rem;
               }
 
-              >span:nth-child(2) {
+              >span {
                 font-size: 0.16rem;
                 font-family: MicrosoftYaHei-Bold;
-                font-weight: bold;
+                // font-weight: bold;
+                display: block;
+                width: 50%;
                 color: #ffffff;
               }
 
@@ -2436,20 +2593,7 @@ size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以
                 opacity: 0.2;
               }
 
-              >span:nth-child(4) {
-                font-size: 0.14rem;
-                font-family: MicrosoftYaHei;
-                font-weight: 400;
-                color: #4effd5;
-              }
-
-              // >span:nth-child(6) {
-              //   font-size: .14rem;
-              //   font-family: MicrosoftYaHei;
-              //   font-weight: 400;
-              //   color: #7AE1FF;
-              //   margin-right: 0.47rem;
-              // }
+          
 
               .progress {
                 width: 18%;
@@ -2461,22 +2605,7 @@ size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以
                 margin-right: 0.47rem;
               }
 
-              >span:nth-child(6),
-              >span:nth-child(7) {
-                width: 0.66rem;
-                height: 0.3rem;
-                background: linear-gradient(-35deg,
-                    rgba(122, 225, 255, 0.49) 1%,
-                    rgba(122, 225, 255, 0.5) 100%);
-                border: 0.01rem solid rgba(122, 225, 255, 0.5);
-                border-radius: 0.15rem;
-                font-size: 0.14rem;
-                font-family: MicrosoftYaHei;
-                font-weight: 400;
-                color: #7ae1ff;
-                text-align: center;
-                line-height: 0.3rem;
-              }
+              
             }
 
             .i_title_ {
diff --git a/src/views/page/largeScreen4.vue b/src/views/page/largeScreen4.vue
new file mode 100644
index 00000000..d2f5d9a8
--- /dev/null
+++ b/src/views/page/largeScreen4.vue
@@ -0,0 +1,1115 @@
+<template>
+    <div class="status content">
+        
+      <largeNav :active="3"></largeNav>
+        <div class="content-left">
+            <div class="left-view1">
+                <div class="main-title"><span>{{$t('status.irrigationStatus')}} </span></div>
+                <div class="view-content">
+                    <div>
+                        <div class="input-50">
+                            <div class="input-title">{{$t('status.remainingTime')}}</div>
+                            <div class="input">{{ countData(inputData['36']) }}</div>
+                        </div>
+                        <div class="input-50">
+                            <div class="input-title">{{$t('status.instantFlow')}}</div>
+                            <div class="input">{{ countData(inputData['28']) }}</div>
+                        </div>
+                    </div>
+                    <div>
+                        <div class="input-50">
+                            <div class="input-title">{{$t('status.currentVolume')}}</div>
+                            <div class="input">{{ countData(inputData['37']) }}</div>
+                        </div>
+                        <div class="input-50">
+                            <div class="input-title">{{$t('status.startupMethod')}}</div>
+                            <div class="input green">{{ openType }}</div>
+                        </div>
+                    </div>
+                    <div>
+                        <div class="input-50">
+                            <div class="input-title">{{$t('status.formulaNumber')}}</div>
+                            <div class="input">{{ countData(inputData['31']) }}</div>
+                        </div>
+                        <div class="input-50">
+                            <div class="input-title">{{$t('status.executingGroup')}}</div>
+                            <div class="input">{{ countData(inputData['38']) }}</div>
+                        </div>
+                    </div>
+                    <div class="left-btn">
+                        <div :class="left1Act[1]==1 ? 'active' : ''">{{$t('status.inletPump')}}</div>
+                        <div :class="left1Act[0]==1 ? 'active' : ''">{{$t('status.fertilizerPump')}}</div>
+                    </div>
+                </div>
+
+            </div>
+            <div class="left-view2">
+                <div class="main-title"><span>{{$t('status.fertilizerIntensity')}} </span></div>
+                <div class="view-content">
+                    <div v-for="item, index in left2List" :key="index">
+                        <div class="left" :style="item.img ? `background: url(${item.img}) no-repeat center;` : ''"><span>{{
+                            item.title }}</span></div>
+                        <div class="name">{{ item.name }}</div>
+                        <div class="number">{{ item.number }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="content-center">
+            <div class="center-title"><span v-if="deviceDetail">{{ deviceDetail.stationName }}</span></div>
+            <div>
+                <div class="center-center">
+                    <div class="view view-1">
+                        <div class="name">{{$t('status.targetPH')}}</div>
+                        <div class="number">{{ countData100(inputData['6']) }}</div>
+                    </div>
+                    <div class="view view-2">
+                        <div class="name">{{$t('status.measuredPH')}}</div>
+                        <div class="number">{{ countData100(inputData['8']) }}</div>
+                    </div>
+                    <div class="view view-3">
+                        <div class="name">{{$t('status.measuredEC')}}</div>
+                        <div class="number">{{ countData100(inputData['9']) }}</div>
+                    </div>
+                    <div class="view view-4">
+                        <div class="name">{{$t('status.targetEC')}}</div>
+                        <div class="number">{{ countData100(inputData['7']) }}</div>
+                    </div>
+                </div>
+                <div class="center-bottom">
+                    <div class="center-bottom-title"><span>{{$t('status.solenoidValveStatus')}}</span></div>
+                    <div class="center-bottom-flex">
+                        <template v-for="item, index in 64">
+                            <div v-if="centerBottom.indexOf(index) != -1">
+                                <span> {{ index + 1 }}#</span>
+                                <img src="../../assets/image/center-flex-active.png" alt="">
+                            </div>
+                        </template>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+        <div class="content-right">
+            <div class="right-view1">
+                <div class="main-table-title">
+                    <div>{{$t('status.sensorData')}}</div>
+                    <div>{{$t('status.value')}}</div>
+                    <div>{{$t('status.adValue')}}</div>
+                </div>
+                <div class="table-content">
+                    <div class="seamless-warp" v-if="!loading">
+                        <div class="tr" v-for="item, index in tableList1" :key="index" :class="'tr-' + (index + 1)">
+                            <div class="td name">
+                                <div>
+                                    {{ item.name }}
+                                </div>
+                            </div>
+                            <div class="td number">{{ item.data }}</div>
+                            <div class="td ADnumber">{{ item.ADdata }}</div>
+                        </div>
+                    </div>
+                    <!-- <vue-seamless class="seamless-warp" :data="tableList1" :class-option="defaultOption">
+                     
+                    </vue-seamless> -->
+                </div>
+            </div>
+            <div class="right-view2">
+                <div>
+                    <div v-for="item, index in rightList2.slice(0, 4)"
+                        :class="right2Index.indexOf(index) != -1 ? 'active' : ''">{{ item }}</div>
+                </div>
+                <div>
+                    <div v-for="item, index in rightList2.slice(4, 8)"
+                        :class="right2Index.indexOf(index + 4) != -1 ? 'active' : ''">{{ item }}</div>
+                </div>
+            </div>
+            <div class="right-view3">
+                <div class="main-title"><span>{{$t('status.fertilizationSpeed')}} (L/h) </span></div>
+                <div class="view-content">
+                    <div v-for="item, index in rightList3" :key="index">
+                        <div class="name">{{ item.name }}</div>
+                        <div class="number">{{ item.number }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import largeNav from '@/components/large-nav.vue'
+import vueSeamless from 'vue-seamless-scroll'
+export default {
+    data() {
+        return {
+            pageTimer: null,
+            left1Act: [0,0],
+            openType: '',
+            centerAct: 0,
+            right2Index: [],
+            inputData: [],
+            deviceDetail: null,
+            centerBottom: [],
+            numberList: [273, 278, 283, 288, 293, 298],
+            inputData1: [],
+            loading: true,
+        }
+    },
+    components: { vueSeamless,largeNav },
+    computed: {
+        defaultOption() {
+            return {
+                step: 0.3, // 数值越大速度滚动越快
+                limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length
+                hoverStop: true, // 是否开启鼠标悬停stop
+                direction: 1, // 0向下 1向上 2向左 3向右
+                openWatch: true, // 开启数据实时监控刷新dom
+                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
+            }
+        },
+        left2List(){
+            var data=[
+                {
+                    title: 'A',
+                    name: this.$t('status.fertilizerTypes.a'),
+                    number: '26%',
+                    img: ''
+                }, {
+                    title: 'B',
+                    name: this.$t('status.fertilizerTypes.b'),
+                    number: '26%',
+                    img: ''
+                }, {
+                    title: 'C',
+                    name: this.$t('status.fertilizerTypes.c'),
+                    number: '26%',
+                    img: ''
+                }, {
+                    title: 'D',
+                    name: this.$t('status.fertilizerTypes.d'),
+                    number: '26%',
+                    img: ''
+                }, {
+                    title: 'E',
+                    name: this.$t('status.fertilizerTypes.e'),
+                    number: '26%',
+                    img: ''
+                }, {
+                    title: 'F',
+                    name: this.$t('status.fertilizerTypes.f'),
+                    number: '26%',
+                    img: ''
+                }, {
+                    title: 'G',
+                    name: this.$t('status.fertilizerTypes.g'),
+                    number: '26%',
+                    img: ''
+                }, {
+                    title: '',
+                    name: this.$t('status.fertilizerTypes.acid'),
+                    number: '26%',
+                    img: require('../../assets/image/left2-icon1.png')
+                },
+            ]
+            return data
+        },
+        rightList3(){
+            var data=[
+                {
+                    name: this.$t('status.fertilizerTypes.a'),
+                    number: '0',
+                }, {
+                    name: this.$t('status.fertilizerTypes.b'),
+                    number: '0',
+                }, {
+                    name: this.$t('status.fertilizerTypes.c'),
+                    number: '0',
+                }, {
+                    name: this.$t('status.fertilizerTypes.d'),
+                    number: '0',
+                }, {
+                    name: this.$t('status.fertilizerTypes.e'),
+                    number: '0',
+                }, {
+                    name: this.$t('status.fertilizerTypes.f'),
+                    number: '0',
+                }, {
+                    name: this.$t('status.fertilizerTypes.g'),
+                    number: '0',
+                }, {
+                    name: this.$t('status.fertilizerTypes.acidFertilizer'),
+                    number: '0',
+                },
+            ]
+            return data
+        },
+      tableList1(){
+        var data=[{
+                name: this.$t('status.sensorTypes.ph'),
+                data: '1#PH 0',
+                ADdata: '2#PH 0',
+            }, {
+                name: this.$t('status.sensorTypes.ec'),
+                data: '1#EC 0',
+                ADdata: '2#EC 0',
+            }, {
+                name: this.$t('status.sensorTypes.generic',{index:1}),
+                data: 0,
+                ADdata: 0,
+            }, {
+                name: this.$t('status.sensorTypes.generic',{index:2}),
+                data: 0,
+                ADdata: 0,
+            }, {
+                name: this.$t('status.sensorTypes.generic',{index:3}),
+                data: 0,
+                ADdata: 0,
+            }, {
+                name: this.$t('status.sensorTypes.generic',{index:4}),
+                data: 0,
+                ADdata: 0,
+            }, {
+                name: this.$t('status.sensorTypes.generic',{index:5}),
+                data: 0,
+                ADdata: 0,
+            }, {
+                name: this.$t('status.sensorTypes.generic',{index:6}),
+                data: 0,
+                ADdata: 0,
+            },]
+            return data
+      },
+      rightList2(){
+        var data= [this.$t('status.externalControlSignal1',{index:1}),
+                this.$t('status.externalControlSignal1',{index:2}),
+               this.$t('status.externalControlSignal1',{index:3}),
+                this.$t('status.externalControlSignal1',{index:4}),
+                 this.$t('status.controlSignals.highLevel'),
+                 this.$t('status.controlSignals.mediumLevel'),
+                 this.$t('status.controlSignals.lowLevel'),
+                 this.$t('status.controlSignals.motor')
+                ]
+        return data
+      },
+    },
+    //清除监听
+    beforeDestroy() {
+        const that = this;
+        this.$bus.$off('refreshData')
+        that.pageTimer && clearInterval(that.pageTimer)
+    },
+    mounted() {
+        const that = this;
+        if (localStorage.getItem('token')) {
+            that.getEqbyid();
+              that.getReg()
+            setTimeout(() => {
+                that.pageTimer && clearInterval(that.pageTimer)
+                that.pageTimer = setInterval(() => {
+                    that.getEqbyid();
+                  
+                }, 5000);
+            }, 0);
+        } else {
+            //   this.$router.push({ name: 'login' })
+        }
+        this.$bus.$on('refreshData', (res) => {
+            that.getEqbyid();
+        })
+    },
+    methods: {
+        //countType计算类型 
+        //0是原数据 
+        //1是原数据-400 
+        //2是原数据/10 
+        //3是(原数据-400) / 10
+        countType1(data) {
+            var num = data - 400
+            return num.toFixed(2)
+        },
+        countType2(data) {
+            var num = data / 10
+            return num.toFixed(2)
+        },
+        countType3(data) {
+
+            var num = (data - 400) / 10
+            return num.toFixed(2)
+        },
+        countType4(data) {
+
+            var num = (data - 1000) / 10
+            return num.toFixed(2)
+        },
+        getTypeData(dataCode, typeCode) {
+            var typeList = this.$store.state.typeList
+
+            var countType = 0
+            typeList.forEach((el, index) => {
+
+                if (el.value == this.inputData1[typeCode]) {
+                    countType = el.countType
+                }
+            })
+
+
+            if (countType == 0) {
+                return this.inputData[dataCode]
+            } else if (countType == 1) {
+                return this.countType1(this.inputData[dataCode])
+            } else if (countType == 2) {
+                return this.countType2(this.inputData[dataCode])
+            } else if (countType == 3) {
+                return this.countType3(this.inputData[dataCode])
+            }
+        },
+        getTabelList() {
+
+            var inputData = this.inputData
+            this.tableList1[0] = {
+                name:  this.$t('status.sensorTypes.ph'),
+                data: '1#PH ' + this.countData100(inputData['51']),
+                ADdata: '2#PH ' + this.countData100(inputData['53']),
+            }
+
+            this.tableList1[1] = {
+                name: this.$t('status.sensorTypes.ec'),
+                data: '1#EC ' + this.countData100(inputData['52']),
+                ADdata: '2#EC ' + this.countData100(inputData['54']),
+            }
+
+            this.tableList1[2] = {
+                name: this.$t('status.sensorTypes.generic',{index:1}),
+                data: this.getTypeData('40', '273'),
+                ADdata: inputData['39'],
+            }
+
+            this.tableList1[3] = {
+                name: this.$t('status.sensorTypes.generic',{index:2}),
+                data: this.getTypeData('42', '278'),
+                ADdata: inputData['41'],
+            }
+
+            this.tableList1[4] = {
+                name: this.$t('status.sensorTypes.generic',{index:3}),
+                data: this.getTypeData('44', '283'),
+                ADdata: inputData['43'],
+            }
+
+            this.tableList1[5] = {
+                name: this.$t('status.sensorTypes.generic',{index:4}),
+                data: this.getTypeData('46', '288'),
+                ADdata: inputData['45'],
+            }
+
+            this.tableList1[6] = {
+                name: this.$t('status.sensorTypes.generic',{index:5}),
+                data: this.getTypeData('48', '293'),
+                ADdata: inputData['47'],
+            }
+
+            this.tableList1[7] = {
+                name: this.$t('status.sensorTypes.generic',{index:6}),
+                data: this.getTypeData('50', '298'),
+                ADdata: inputData['49'],
+            }
+            this.loading = false
+        },
+        getEqbyid() {
+            var store = this.$store.state
+              var list=[]
+              this.$store.state.equipmentList.forEach((el, index) => {
+                        //链接中的deviceId
+                        if (this.deviceId && this.deviceId == el.deviceId) {
+                            this.$store.state.equipmentIndex = index + 1
+                        }
+                      
+                        if (el.deviceName == 1) {
+                          list.push(el)
+                        }
+                      
+                    })
+                    list.sort(this.compare('equipmentStatu'))
+                    console.log( list,111);
+            this.deviceDetail = list.length?list[0]:{
+                "deviceId": 2023042214250005,
+                "deviceName": "10",
+                "deviceState": "1",
+                "deviceTypeName": "施肥机",
+                "stationName": "施肥机",
+                "equipmentStatu": 1,
+            },
+            this.dataInit()
+
+        },
+         compare(property) {
+            return function (a, b) {
+                let value1 = a[property];
+                let value2 = b[property];
+                return value1 - value2;
+            };
+        },
+        getcenterBottom() {
+            this.centerBottom = []
+            var inputData = this.inputData
+            var list1 = this.padString(inputData['32'].toString(2), 16)
+            var list2 = this.padString(inputData['33'].toString(2), 16)
+            var list3 = this.padString(inputData['34'].toString(2), 16)
+            var list4 = this.padString(inputData['35'].toString(2), 16)
+            var number = 16
+            for (var i = 0; i < number; i++) {
+                if (Number(list1[list1.length - 1 - i])) {
+                    this.centerBottom.push(i)
+                }
+            }
+            for (var j = 0; j < number; j++) {
+                if (Number(list2[list2.length - 1 - j])) {
+                    this.centerBottom.push(j + 16)
+                }
+            }
+            for (var k = 0; k < number; k++) {
+                if (Number(list3[list3.length - 1 - k])) {
+                    this.centerBottom.push(k + 32)
+                }
+            }
+            for (var l = 0; l < number; l++) {
+                if (Number(list4[list4.length - 1 - l])) {
+                    this.centerBottom.push(l + 48)
+                }
+            }
+        },
+        getrightList3() {
+            var list = [19, 20, 21, 22, 23, 24, 25, 27]
+            list.forEach((el, index) => {
+                this.rightList3[index].number = this.inputData[el]
+            })
+        },
+        getleft2List() {
+            var list = [10, 11, 12, 13, 14, 15, 16, 18]
+            list.forEach((el, index) => {
+                this.left2List[index].number = this.inputData[el] + '%'
+            })
+        },
+        countData(data) {
+            if (data) {
+                return data
+            } else {
+                return 0
+            }
+        },
+        padString(str, length) {
+            return str.padStart(length, '0');
+        },
+        countData100(data) {
+            if (data) {
+                return data / 100
+            } else {
+                return 0
+            }
+        },
+        getType29(index) {
+          if (index == 0) {
+                return  this.$t('status.startupMethods.manual')
+            } else if (index == 1) {
+                return  this.$t('status.startupMethods.externalControl')
+            } else if (index == 2) {
+                return  this.$t('status.startupMethods.lightAccumulation')
+            } else if (index == 3) {
+                return  this.$t('status.startupMethods.soilMoistureControl')
+            } else if (index == 4) {
+                return  this.$t('status.startupMethods.interval')
+            } else if (index == 5) {
+                return  this.$t('status.startupMethods.timed')
+            } else {
+                return  this.$t('status.startupMethods.none')
+            }
+        },
+        //什么方式启动的灌溉
+        getData29() {
+            var number = this.padString(this.inputData['29'].toString(2), 14)
+            var index = 6
+            var typeNumber = -1
+
+            for (var i = 0; i < index; i++) {
+                if (Number(number[i])) {
+                    typeNumber = i
+                }
+            }
+            this.openType = this.getType29(typeNumber)
+
+            var statusIndex = 8
+            var list=[]
+         
+            for (var j = 0; j < statusIndex; j++) {
+                if (Number(number[number.length - 1 - j])) {
+                    if (j == 0) {
+                        list.push('1')
+                    } else if (j == 1) {
+                        list.push('0')
+                    } else {
+                        list.push(j)
+                    }
+                }
+            }
+            this.right2Index=list
+        },
+        //进水泵和出水泵状态
+        getData30() {
+            var number = this.padString(this.inputData['30'].toString(2), 2)
+            this.left1Act=number
+        },
+        dataInit() {
+            const that = this
+            var deviceDetail = this.deviceDetail
+            var data = {
+                "equipmentId": deviceDetail.deviceId,
+                "pattern": 0,//需要根据文档填写 //6目标ph-数值
+                "regNum": 72
+            }
+            var week = [
+                "星期日",
+                "星期一",
+                "星期二",
+                "星期三",
+                "星期四",
+                "星期五",
+                "星期六",
+            ]
+            this.api.postState(data).then(res => {
+                if (res.data.code == 200) {
+                    this.inputData = res.data.data;
+                    this.getData30()    //数据30/进水出水泵
+                    this.getData29()//数据29 启动方式/信号
+
+
+                    this.getleft2List()//获取左下角数据
+                    this.getrightList3()//获取又下角数据
+                    this.getcenterBottom()//获取电磁阀
+                    var h = this.checkTime(this.inputData[3])
+                    var m = this.checkTime(this.inputData[4])
+                    var month_ = this.checkTime(this.inputData[1])
+                    var date_ = this.checkTime(this.inputData[2])
+                    var time = {
+                        year: { year: this.inputData[0], month: month_, date: date_ },
+                        week: week[this.inputData[5]],
+                        time: h + ":" + m,
+                    }
+                    this.$bus.$emit('refreshTime', time)
+                } else {
+                    this.$message.error(res.data.msg);
+                }
+            })
+
+        },
+        checkTime(i) {
+            if (i < 10) {
+                i = "0" + i;
+            }
+
+            return i;
+        },
+        getReg() {
+            var store = this.$store.state
+            var deviceDetail = this.deviceDetail
+            //获取传感器种类
+            var data1 = {
+                equipmentId: deviceDetail.deviceId,
+                pattern: 272, //需要根据文档填写 //6目标ph-数值
+                regNum: 31,//从pattern取多少个数据
+            };
+            this.api.postReg(data1).then((res) => {
+                if (res.data.code == 200) {
+                    this.inputData1 = res.data.data;
+                    this.getTabelList()//右上角标题
+                } else {
+                    this.$message.error(res.data.msg);
+                }
+            });
+        },
+    },
+
+}
+</script>
+<style lang="scss" scoped>
+.content {
+    width: 100%;
+    height: 100%;
+    padding: 0 3.6%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    >div {
+        height: 100%;
+    }
+
+    .content-left {
+        width: 25.8%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        .left-view1 {
+            width: 100%;
+
+            .view-content {
+                height: 400px;
+                padding: 20px 16px 37px;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: space-between;
+
+                >div {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    width: 100%;
+                }
+
+                .input-50 {
+                    width: calc((100% - 14px) / 2);
+                }
+
+                .left-btn {
+                    justify-content: space-between;
+
+                    >div {
+                        // margin-right: 20px;
+                        min-width: 140px;
+                        height: 44px;
+                        padding: 0 5px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        background: url(../../assets/image/left1-btn.png) no-repeat center;
+                        background-size: 100% 100%;
+                        font-size: 24px;
+                        font-family: Alibaba PuHuiTi;
+                        font-weight: 500;
+                        color: #A2C9F8;
+                        cursor: pointer;
+
+                        &.active {
+                            background: url(../../assets/image/left1-btn-act.png) no-repeat center;
+                            background-size: 100% 100%;
+                            color: #fff;
+                        }
+                    }
+                }
+            }
+        }
+
+        .left-view2 {
+            width: 100%;
+
+            .view-content {
+                height: 321px;
+                display: grid;
+                grid-template-columns: repeat(2, 1fr);
+                grid-row-gap: 10px; //纵向间隔
+                grid-column-gap: auto; //横向间隔
+                padding: 20px 20px 0;
+
+                >div {
+                    display: flex;
+                    align-items: center;
+
+                    .left {
+                        width: 65px;
+                        height: 65px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+
+                        background: url(../../assets/image/left2-icon0.png) no-repeat center;
+                        background-size: 100% 100%;
+
+                        span {
+                            font-size: 34px;
+                            font-family: Oswald;
+                            font-weight: 500;
+                            color: #FFFFFF;
+
+                            background: linear-gradient(0deg, #F9FBFF 0%, #74EFFF 100%);
+                            -webkit-background-clip: text;
+                            -webkit-text-fill-color: transparent;
+                        }
+                    }
+
+                    .name {
+                        font-size: 20px;
+                        font-family: Alibaba PuHuiTiR;
+                        font-weight: 400;
+                        color: #FFFFFF;
+                        width: 49px;
+                        padding-left: 5px;
+                    }
+
+                    .number {
+                        font-size: 32px;
+                        font-family: Oswald;
+                        font-weight: 500;
+                        color: #FFFFFF;
+
+                        background: linear-gradient(180deg, #34AFF6 0%, #EDFDFF 100%);
+                        -webkit-background-clip: text;
+                        -webkit-text-fill-color: transparent;
+                    }
+                }
+            }
+        }
+    }
+
+    .content-right {
+        width: 25.8%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        >div {
+            width: 100%;
+        }
+
+        .right-view3 {
+            width: 100%;
+
+            .view-content {
+                padding: 20px 20px 0;
+                display: grid;
+                grid-template-columns: repeat(4, 1fr);
+                grid-row-gap: 30px; //纵向间隔
+                grid-column-gap: auto; //横向间隔
+
+                >div {
+                    width: 86px;
+                    height: 117px;
+                    background: url(../../assets/image/right-view3.png) no-repeat center;
+                    background-size: 100% 100%;
+                    padding-top: 20px;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: space-between;
+
+                    .name {
+                        font-size: 20px;
+                        font-family: Alibaba PuHuiTi;
+                        font-weight: 500;
+                        color: #FFFFFF;
+
+                        background: linear-gradient(0deg, #F9FBFF 0%, #74EFFF 100%);
+                        -webkit-background-clip: text;
+                        -webkit-text-fill-color: transparent;
+                    }
+
+                    .number {
+                        width: 100%;
+                        height: 32px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        font-size: 24px;
+                        font-family: Alibaba PuHuiTi;
+                        font-weight: 500;
+                        color: #FFFFFF;
+                    }
+                }
+            }
+        }
+
+        .right-view2 {
+            width: 100%;
+            height: 136px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: space-around;
+            white-space: nowrap;
+
+            >div {
+                width: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+
+                >div {
+                    width: 90px;
+                    height: 34px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 16px;
+                    font-family: Alibaba PuHuiTi;
+                    font-weight: 500;
+                    color: #A9D1FF;
+                    background: url(../../assets/image/right-view2.png) no-repeat center;
+                    background-size: 100% 100%;
+                    cursor: pointer;
+
+                    &.active {
+                        background: url(../../assets/image/right-view2-act.png) no-repeat center;
+                        background-size: 100% 100%;
+
+                        text-shadow: 0px 2px 0px rgba(0, 111, 128, 0.5);
+                        color: #FFFFFF;
+                    }
+                }
+            }
+        }
+
+        .main-table-title {
+            width: 100%;
+            height: 41px;
+            display: flex;
+            align-items: center;
+            background: url(../../assets/image/main-title.png) no-repeat center;
+            background-size: 100% 100%;
+
+            >div {
+                width: calc(100% / 3);
+                height: 100%;
+                text-align: center;
+                line-height: 41px;
+                font-size: 16px;
+                font-family: Alibaba PuHuiTiR;
+                font-weight: 400;
+                color: #FFFFFF;
+            }
+        }
+
+        .table-content {
+            width: 100%;
+            height: 314px;
+            overflow: hidden;
+
+            .seamless-warp {
+                width: 100%;
+                height: 100%;
+
+
+
+
+                .tr {
+                    width: 100%;
+                    height: calc(314px / 8);
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    font-size: 14px;
+                    font-family: Alibaba PuHuiTiR;
+                    font-weight: 400;
+                    color: #FFFFFF;
+                    border-bottom: 1px solid rgba(216, 227, 238, 0.1);
+                    ;
+
+                    &:nth-child(odd) {
+                        background: rgba(0, 84, 170, 0.25);
+                    }
+
+                    &:nth-child(even) {
+
+                        background: rgba(23, 158, 228, 0.22);
+                    }
+                }
+
+                .td {
+                    width: calc(100% / 3);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    line-height: 100%;
+                    font-family: Alibaba PuHuiTiR;
+
+                    &.name {
+                        >div {
+                            width: 80px;
+                            height: 24px;
+                            background: rgba(23, 158, 228, 0.3);
+                            border: 1px solid rgba(20, 197, 255, 0.5);
+                            line-height: 24px;
+                            text-align: center;
+                            white-space: nowrap;
+                        }
+                    }
+                }
+
+            }
+        }
+    }
+
+    .content-center {
+        width: calc(100% - 51.6%);
+        position: relative;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+        padding: 60px 20px 240px;
+
+        >div {
+            width: 100%;
+        }
+
+        .center-title {
+            width: 660px;
+            height: 68px;
+            background: url(../../assets/image/center-title.png) no-repeat center;
+            background-size: 100% 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            span {
+                font-size: 40px;
+                font-family: Alimama ShuHeiTiB;
+                color: #F9CB9D;
+                // text-shadow: 0px 2px 0px rgba(0,55,160,0.75);
+
+                background: linear-gradient(180deg, #F3F9FF 0%, #A4C9F3 100%);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+            }
+        }
+
+        .center-center {
+            width: 100%;
+            position: relative;
+
+            .view {
+                width: 222px;
+                height: 234px;
+                display: flex;
+                flex-direction: column;
+                justify-content: flex-end;
+                align-items: center;
+
+                .name {
+                    font-size: 27px;
+                    font-family: Alimama ShuHeiTiB;
+                    color: #FFFFFF;
+                }
+
+                .number {
+                    font-size: 36px;
+                    font-family: Oswald;
+                    font-weight: 500;
+                    color: #3CFDFF;
+                }
+
+                &.view-1,
+                &.view-2 {
+                    background: url(../../assets/image/PH.png) no-repeat center;
+                    background-size: 100% 100%;
+                }
+
+                &.view-3,
+                &.view-4 {
+                    background: url(../../assets/image/EC.png) no-repeat center;
+                    background-size: 100% 100%;
+                }
+
+                &.view-1 {
+                    position: absolute;
+                    bottom: 245px;
+                    left: -20px;
+                }
+
+                &.view-2 {
+                    position: absolute;
+                    bottom: 30px;
+                    left: 87px;
+                }
+
+                &.view-3 {
+                    position: absolute;
+                    bottom: 30px;
+                    right: 87px;
+                }
+
+                &.view-4 {
+                    position: absolute;
+                    bottom: 245px;
+                    right: -20px;
+                }
+            }
+        }
+
+        .center-bottom {
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+        }
+
+        .center-bottom-title {
+            width: 427px;
+            height: 54px;
+            background: url(../../assets/image/center-title.png) no-repeat center;
+            background-size: 100% 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            span {
+                font-size: 24px;
+                font-family: Alimama ShuHeiTiB;
+                color: #F9CB9D;
+                // text-shadow: 0px 2px 0px rgba(0,55,160,0.75);
+
+                background: linear-gradient(180deg, #F3F9FF 0%, #A4C9F3 100%);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+            }
+        }
+
+        .center-bottom-flex {
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+
+            >div {
+                flex-shrink: 0;
+                width: 64px;
+                height: 64px;
+                background: url(../../assets/image/center-flex.png) no-repeat;
+                background-size: 100% 100%;
+                background-position: center center;
+                position: relative;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 20px;
+                font-family: Alibaba PuHuiTi;
+                font-weight: 500;
+                color: #FFFFFF;
+                cursor: pointer;
+
+                >img {
+                    width: 81px;
+                    height: 81px;
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                    z-index: 1;
+                }
+
+                span {
+                    position: relative;
+                    z-index: 2;
+                }
+
+                &.active {
+                    background: unset;
+                }
+            }
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/src/views/page/wetFan.vue b/src/views/page/wetFan.vue
index c381d979..8f9155e9 100644
--- a/src/views/page/wetFan.vue
+++ b/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.gearOptions.gear1',{index:1}), value: 1 },
-                  { label:this.$t('heatFan.gearOptions.gear1',{index:2}), value: 2 },
-                  { label:this.$t('heatFan.gearOptions.gear1',{index:3}), value: 3 },
-                  { label:this.$t('heatFan.gearOptions.gear1',{index:4}), value: 4 },
-                  { label:this.$t('heatFan.gearOptions.gear1',{index:5}), value: 5 },
+         { label:this.$t('heatFan.gear0'), value: 0 },
+                  { label:this.$t('heatFan.gear1',{index:1}), value: 1 },
+                  { label:this.$t('heatFan.gear1',{index:2}), value: 2 },
+                  { label:this.$t('heatFan.gear1',{index:3}), value: 3 },
+                  { label:this.$t('heatFan.gear1',{index:4}), value: 4 },
+                  { label:this.$t('heatFan.gear1',{index:5}), value: 5 },
             ],
             inputDataNew: [],
         }