src/assets/css/main.css

@@ -1542,6 +1542,7 @@ textarea {
   grid-template-columns: repeat(2, 1fr);
   grid-row-gap: 20px;
   grid-column-gap: 20px;
+  grid-auto-rows: minmax(min-content, 50px);
   padding: 19px 30px;
 }
 
@@ -2903,13 +2904,17 @@ textarea {
   align-items: center;
   padding: 0 20px;
   margin-bottom: 30px;
+  color: #FFFFFF;
+}
+
+.input-100-view input {
+  color: #FFFFFF;
 }
 
 .input-100-view .title {
   font-size: 20px;
   font-family: Microsoft YaHei;
   font-weight: bold;
-  color: #FFFFFF;
 }
 
 .input-100-view span {

src/assets/css/main.scss

@@ -1625,6 +1625,7 @@ textarea {
         grid-template-columns: repeat(2, 1fr);
         grid-row-gap: 20px; //纵向间隔
         grid-column-gap: 20px; //横向间隔
+        grid-auto-rows: minmax(min-content, 50px);
         padding: 19px 30px;
 
         &.upload-content1 {
@@ -3082,11 +3083,14 @@ textarea {
     padding: 0 20px;
     margin-bottom: 30px;
 
+    color: #FFFFFF;
+    input{
+        color: #FFFFFF;}
+    
     .title {
         font-size: 20px;
         font-family: Microsoft YaHei;
         font-weight: bold;
-        color: #FFFFFF;
     }
 
     span {
@@ -4996,3 +5000,6 @@ textarea {
         }
     }
 }
+
+
+

src/components/large-bar-charts.vue

@@ -0,0 +1,46 @@
+<template>
+    <div class="thisWeekTemperature_echart" id="thisWeekTemperature_echart"></div>
+</template>
+<script>
+
+import {
+  thisWeekTemperature_echart
+} from "@/assets/js/echarts";
+export default {
+      props:{
+           chartsData: {
+                type: Object,
+                default:{}
+            },
+           
+    },
+  data(){
+      return {}
+  },
+   watch: {
+    chartsData: {
+      deep: true, // 深度监听对象内部变化
+      handler(newVal) {
+       this.initChart();
+      }
+    }
+  },
+  mounted(){
+    this.initChart();
+   
+  },
+  methods:{
+    initChart(){
+         thisWeekTemperature_echart("thisWeekTemperature_echart", this.chartsData);
+    },
+  },
+
+}
+</script>
+<style lang="scss">
+       .thisWeekTemperature_echart {
+            width: 100%;
+            height: calc(100% - 0.19rem);
+          }
+
+</style>

src/components/large-line-charts.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="realTime-line" id="realTime-line"></div>
+</template>
+<script>
+
+import { realTimeLine2 } from '@/assets/js/charts'
+export default {
+      props:{
+           chartsData: {
+                type: Array,
+                default:[]
+            },
+            deviceId:{
+                type: String,
+                default:''
+            },
+            length:{
+                default:null
+            }
+    },
+  data(){
+      return {}
+  },
+   watch: {
+    chartsData: {
+      deep: true, // 深度监听对象内部变化
+      handler(newVal) {
+       this.initChart();
+      }
+    }
+  },
+  mounted(){
+    this.initChart();
+   
+  },
+  methods:{
+    initChart(){
+         realTimeLine2("realTime-line", this.chartsData,this.deviceId,this.length)
+    },
+  },
+
+}
+</script>
+<style lang="scss">
+       .realTime-line{
+          width: 100%;
+           height: calc((100% - 3.5rem) / 2);
+        }
+
+</style>

src/components/large-seamless.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="environmentData" :class="`environmentData-${id}`">
+            <div class="e_title">{{title}}</div>
+            <div class="detail">
+              <vue-seamless class="e_content" :data="list" :class-option="defaultOption">
+                <div class="item" v-for="(el, index) in list" :key="index">
+                  <img :src="el.img" alt="" />
+                  <div class="item_child">
+                    <span>{{ el.name }}</span>
+                    <span>{{ el.num }}</span>
+                  </div>
+                </div>
+              </vue-seamless>
+            </div>
+          </div>
+</template>
+<script>
+import vueSeamless from "vue-seamless-scroll";
+export default {
+
+  components: { vueSeamless },
+
+        props:{
+           list: {
+                type: Array,
+                default:[]
+            },
+            id:{
+                type: String,
+                default:''
+            },
+            title:{
+                default:'数据'
+            }
+    },
+     computed: {
+    defaultOption() {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        limitMoveNum: this.id != 5 ? 8 : 18, // 开始无缝滚动的数据量 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)
+      };
+    },},
+  data(){
+      return {}
+  },
+  mounted(){},
+  methods:{},
+
+}
+</script>
+<style lang="scss">
+
+        .e_title {
+          width: 3.98rem;
+          height: 0.19rem;
+          background: url("../assets/img/environmentData_bg.png") center no-repeat;
+          background-size: 100% 100%;
+          font-size: 0.18rem;
+          font-family: AlibabaPuHuiTiM;
+          font-weight: 500;
+          color: #83ccff;
+          box-sizing: border-box;
+          padding-left: 0.32rem;
+          line-height: 0.19rem;
+        }
+.environmentData {
+  .e_content {
+
+    >div {
+      width: 100% !important;
+
+
+      >div {
+        width: 100% !important;
+
+        display: flex;
+        flex-wrap: wrap;
+      }
+    }
+  }
+}
+        .environmentData {
+          width: 3.98rem;
+          height: 3.27rem;
+          &.environmentData-11{
+            height: calc(100% - 0.77rem);
+            .detail{
+              height: calc(100% - 0.19rem);
+            }
+          }
+          .detail {
+            width: 3.98rem;
+            height: 3.08rem;
+            overflow: hidden;
+            padding-top: 0.15rem;
+
+            .title_child {
+              width: 100%;
+              height: 0.55rem;
+              box-sizing: border-box;
+              padding: 0.19rem 0 0 0.32rem;
+              font-size: 0.18rem;
+              font-family: MicrosoftYaHei-Bold;
+              font-weight: bold;
+              color: #ffffff;
+            }
+
+            .e_content {
+              width: 100%;
+              //height: 2.53rem;
+              display: flex;
+              flex-wrap: wrap;
+
+              .item {
+                width: 50%;
+                display: flex;
+                align-items: center;
+                margin-bottom: 0.1rem;
+                box-sizing: border-box;
+                padding-bottom: 0.1rem;
+
+                >img {
+                  width: 0.68rem;
+                  height: 0.68rem;
+                  margin: 0 0.1rem 0 0.13rem;
+                }
+
+                .item_child {
+                  display: flex;
+                  flex-direction: column;
+
+                  >span:nth-child(1) {
+                    font-size: 0.16rem;
+                    font-family: MicrosoftYaHei-Bold;
+                    font-weight: bold;
+                    color: #86c2ff;
+                  }
+
+                  >span:nth-child(2) {
+                    font-size: 0.22rem;
+                    font-family: AlibabaPuHuiTiB;
+                    font-weight: bold;
+                    color: #ffffff;
+                  }
+                }
+              }
+            }
+          }
+        }
+</style>

src/components/large-weather-charts.vue

@@ -0,0 +1,51 @@
+<template>
+<div class="weather_echart" id="weather_echart"></div>
+</template>
+<script>
+import {
+  weather_echart
+} from "@/assets/js/echarts";
+export default {
+      props:{
+           chartsData: {
+                type: Object,
+                default:{}
+            },
+    },
+  data(){
+      return {}
+  },
+   watch: {
+    chartsData: {
+      deep: true, // 深度监听对象内部变化
+      handler(newVal) {
+       this.initChart();
+      }
+    }
+  },
+  mounted(){
+    this.initChart();
+   
+  },
+  methods:{
+    initChart(){
+         weather_echart("weather_echart", this.chartsData)
+    },
+  },
+
+}
+</script>
+<style lang="scss">
+       .weather_echart {
+          width: 100%;
+          height: calc((100% - 4.04rem) / 2);
+          &.weather_img{
+            height: calc((100% - 4.04rem) / 2 + 0.5rem);
+          }
+          .img{
+            width: 100%;
+            height: 100%;
+          }
+        }
+
+</style>

src/components/large-weather-img.vue

@@ -0,0 +1,34 @@
+<template>
+   <div class="weather_echart weather_img">
+            <img class="img" :src="url" alt="">
+          </div>
+</template>
+<script>
+export default {
+     props:{
+           url: {
+                type: Object,
+                default:{}
+            },
+    },
+  data(){
+      return {}
+  },
+  mounted(){},
+  methods:{},
+
+}
+</script>
+<style lang="scss">
+      .weather_echart {
+          width: 100%;
+          height: calc((100% - 4.04rem) / 2);
+          &.weather_img{
+            height: calc((100% - 4.04rem) / 2 + 0.5rem);
+          }
+          .img{
+            width: 100%;
+            height: 100%;
+          }
+        }
+</style>

src/components/large-weather-swiper.vue

@@ -0,0 +1,107 @@
+<template>
+        <div class="weather">
+            <div>
+              <marquee behavior="" direction="" scrollamount="3">
+                <div class="item" v-for="(item, index) in list" :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>
+</template>
+<script>
+export default {
+      props:{
+           list: {
+                type: Array,
+                default:[]
+            },
+    },
+      computed: {
+          typeList() {
+    return this.$store.state.typeList.map(item => {
+      return {
+        ...item,
+        label: this.$t(`types.${item.value}`) // 假设你为每个value创建了对应的翻译key
+      }
+    })
+  }
+      },
+  data(){
+      return {}
+  },
+  mounted(){},
+  methods:{
+        // 数据单位
+    getTypeList(val) {
+      var store = this.$store.state;
+      let typeList1 = [];
+      typeList1 = this.typeList.filter((item) => {
+        return item.value == val;
+      });
+      return typeList1[0].unit;
+    },
+
+  },
+
+}
+</script>
+<style lang="scss">
+       .weather {
+          width: 3.84rem;
+          height: 0.34rem;
+
+          >div {
+            width: 100%;
+            height: 100%;
+            box-sizing: border-box;
+            padding: 0 0.1rem;
+            background: rgba(14, 91, 165, 0.1);
+            border: 0.01rem solid rgba(97, 152, 209, 0.65);
+            line-height: 0.34rem;
+            font-size: 0.16rem;
+            font-family: MicrosoftYaHei;
+            font-weight: 400;
+            color: #ffffff;
+            display: -webkit-box;
+            -webkit-line-clamp: 1;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+
+            marquee {
+              width: 100%;
+              height: 100%;
+
+              .item {
+                height: 100%;
+                margin-right: 0.1rem;
+                display: inline-block;
+
+                >img {
+                  width: 0.3rem;
+                  height: 0.3rem;
+                  position: relative;
+                  top: 0.01rem;
+                  margin-right: 0.05rem;
+                }
+
+                >span {
+                  font-size: 0.16rem;
+                  font-weight: 400;
+                  color: #fff;
+                  font-family: Microsoft YaHei;
+                  position: relative;
+                  top: -0.08rem;
+                }
+              }
+            }
+          }
+        }
+</style>

src/views/officialWebsite/new.vue

@@ -165,7 +165,7 @@
       title="新闻内容编写"
       top="10vh"
       :visible.sync="newsModel"
-      width="1000px"
+      width="1300px"
       class="vrcode-model manage-model"
       :append-to-body="true"
     >
@@ -182,7 +182,7 @@
             :mode="mode"
           />
           <Editor
-            style="height: 500px; overflow-y: hidden"
+            style="height:600px; overflow-y: hidden"
             v-model="html"
             :defaultConfig="editorConfig"
             :mode="mode"

src/views/page/largeScreen.vue

@@ -60,8 +60,8 @@
       <div class="content">
         <div class="left" v-show="limitUserId != 5">
           <div class="weatherStation" v-if="limitUserId != 12&&limitUserId != 9"></div>
-
-          <div class="weather" v-if="limitUserId != 12&&limitUserId != 9">
+          <large-weather-swiper :list="weatherDataList" v-if="limitUserId != 12&&limitUserId != 9"></large-weather-swiper>
+          <!-- <div class="weather" v-if="limitUserId != 12&&limitUserId != 9">
             <div>
               <marquee behavior="" direction="" scrollamount="3">
                 <div class="item" v-for="(item, index) in weatherDataList" :key="index">
@@ -74,22 +74,24 @@
                 </div>
               </marquee>
             </div>
-          </div>
-
-          <div class="weather_echart" id="weather_echart" v-if="limitUserId != 11&&limitUserId != 12&&limitUserId != 9"></div>
+          </div> -->
+          <large-weather-charts :chartsData='weather_echart' v-if="limitUserId != 11&&limitUserId != 12&&limitUserId != 9"></large-weather-charts>
+          <!-- <div class="weather_echart" id="weather_echart" v-if="limitUserId != 11&&limitUserId != 12&&limitUserId != 9"></div> -->
                <div class="e_title" v-if="limitUserId == 9">作物模型</div>
-          <div class="weather_echart weather_img" v-if="limitUserId==9">
+               <large-weather-img url="https://lihemix.oss-cn-hangzhou.aliyuncs.com/%E7%94%98%E4%BA%95%E6%9D%91%E5%A4%A7%E6%95%B0%E6%8D%AE/%E8%A5%BF%E7%BA%A2%E6%9F%BF%E7%94%9F%E9%95%BF%E5%9B%BE.gif"  v-if="limitUserId==9"></large-weather-img>
+          <!-- <div class="weather_echart weather_img" v-if="limitUserId==9">
             <img class="img" src="https://lihemix.oss-cn-hangzhou.aliyuncs.com/%E7%94%98%E4%BA%95%E6%9D%91%E5%A4%A7%E6%95%B0%E6%8D%AE/%E8%A5%BF%E7%BA%A2%E6%9F%BF%E7%94%9F%E9%95%BF%E5%9B%BE.gif" alt="">
-          </div>
+          </div> -->
+          
               <div class="e_title" v-show="limitUserId == 12">实时数据</div>
-    <div class="realTime-line" id="realTime-line"  v-if="limitUserId == 12"></div>
-          <div class="environmentData" :class="`environmentData-${limitUserId}`">
+              <large-line-charts :chartsData="chartsData11.chartsData" :deviceId="chartsData11.deviceId" v-if="limitUserId == 12"></large-line-charts>
+    <!-- <div class="realTime-line" id="realTime-line"  v-if="limitUserId == 12"></div> -->
+    <large-seamless :list="list" :id="limitUserId" title="温室环境数据"></large-seamless>
+          <!-- <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>
@@ -97,25 +99,19 @@
                   </div>
                 </div>
               </vue-seamless>
-              <!-- <div class="e_content">
-                <div class="item" v-for="(el, index) in list" :key="index">
-                  <img :src="el.img" alt="">
-                  <div class="item_child">
-                    <span>{{ el.name }}</span>
-                    <span>{{ el.num }}</span>
-                  </div>
-                </div>
-              </div> -->
             </div>
-          </div>
+          </div> -->
 
           <div class="thisWeekTemperature"  v-show="limitUserId != 11">
             <div class="e_title">本周温度统计</div>
-            <div class="thisWeekTemperature_echart" id="thisWeekTemperature_echart"></div>
+              <large-bar-charts :chartsData="thisWeekTemperature_echart" ></large-bar-charts>
+
+            <!-- <div class="thisWeekTemperature_echart" id="thisWeekTemperature_echart"></div> -->
           </div>
         </div>
         <div class="left" v-show="limitUserId == 5" style="height: calc(100% - 0.9rem);">
-          <div class="environmentData" style="height: 100%;overflow: hidden;">
+           <large-seamless :list="list" :id="limitUserId" title="温室环境数据"></large-seamless>
+          <!-- <div class="environmentData" style="height: 100%;overflow: hidden;">
             <div class="e_title">温室环境数据</div>
             <div class="detail" style="height: 100%;">
               <vue-seamless class="e_content e_content1" :data="list" :class-option="defaultOption">
@@ -128,7 +124,7 @@
                 </div>
               </vue-seamless>
             </div>
-          </div>
+          </div> -->
         </div>
         <div class="middle">
           <div class="middle-data" v-if="limitUserId==9">
@@ -299,8 +295,8 @@
               </div>
             </div>
           </div>
-               
-                 <div class="weather" v-if="limitUserId == 9">
+             <large-weather-swiper :list="weatherDataList" v-if="limitUserId == 9"></large-weather-swiper> 
+              <!--      <div class="weather" v-if="limitUserId == 9">
             <div>
               <marquee behavior="" direction="" scrollamount="3">
                 <div class="item" v-for="(item, index) in weatherDataList" :key="index">
@@ -313,9 +309,10 @@
                 </div>
               </marquee>
             </div>
-          </div>      
+          </div>       -->
         <div class="e_title">温室实时数据</div>
-          <div class="weather_echart" id="realTime-line" v-if="limitUserId == 9"></div>
+         <large-line-charts :chartsData="chartsData9.chartsData" :deviceId="chartsData9.deviceId" v-if="limitUserId == 9"></large-line-charts>
+          <!-- <div class="weather_echart" id="realTime-line" v-if="limitUserId == 9"></div> -->
             <div class="e_title">薄膜温室番茄</div>
           
            <div class="liveVideo_content liveVideo_content_9">
@@ -554,9 +551,15 @@ 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'
+import LargeWeatherSwiper from '@/components/large-weather-swiper.vue'
+import LargeWeatherCharts from '@/components/large-weather-charts.vue'
+import LargeWeatherImg from '@/components/large-weather-img.vue';
+import LargeLineCharts from '@/components/large-line-charts.vue';
+import LargeSeamless from '@/components/large-seamless.vue';
+import LargeBarCharts from '@/components/large-bar-charts.vue';
 export default {
   name: "largeScreen",
-  components: { vueSeamless,largeNav },
+  components: { vueSeamless,largeNav,LargeWeatherSwiper,LargeWeatherCharts, LargeWeatherImg,LargeLineCharts,LargeSeamless,LargeBarCharts },
   computed: {
     defaultOption() {
       return {
@@ -601,7 +604,7 @@ export default {
 
       current: 5,
       current1: 1,
-
+      weather_echart:{},
       dataList: [
         // "一号温室", "二号温室", "三号温室", "四号温室", "五号温室", "六号温室"
       ],
@@ -702,13 +705,14 @@ export default {
           close_btn: false,
         },
       ],
-
+      thisWeekTemperature_echart:{},
       // 金山吕港草莓数据id12
         imgUrl: '',
       //长兴前卫柑桔新优品种扩繁基地id13单独虫情接口数据
          imageList: [],
       chartsData: null,
       srcList: [],
+            chartsData11:{},
 
       // id9的甘井设施农业大数据云平台
        dateRange: [],
@@ -716,6 +720,7 @@ export default {
             pageSize: 20,
             tableData: [],
             tableList: [],
+            chartsData9:{},
     };
   },
   beforeMount() {
@@ -903,8 +908,8 @@ export default {
                 }
                       this.api.getControlFsdata(params).then(res => {
                     if (res.data.code == 200) {
-                        var chartsData = res.data.data
-                        realTimeLine2('realTime-line', chartsData, data1,0)
+                        this.chartsData9 = {chartsData:res.data.data,deviceId:data1}
+                        realTimeLine2('realTime-line', this.chartsData9, data1,0)
                     } else {
                         // this.$message.error(res.data.msg);
                     }
@@ -939,8 +944,8 @@ export default {
                 }
                       this.api.getControlFsdata(params).then(res => {
                     if (res.data.code == 200) {
-                        var chartsData = res.data.data
-                        realTimeLine2('realTime-line', chartsData, data1)
+                        this.chartsData11 =  {chartsData:res.data.data,deviceId:data1}
+                        realTimeLine2('realTime-line', this.chartsData11, data1)
                     } else {
                         // this.$message.error(res.data.msg);
                     }
@@ -1030,7 +1035,11 @@ export default {
           data_value: this.weather_echart_list_value,
           data_category: this.weather_echart_list_category,
         };
-        weather_echart("weather_echart", data);
+        this.weather_echart=data
+        setTimeout(() => {
+            this.$forceUpdate()
+        }, 0);
+        // weather_echart("weather_echart", data);
       });
     },
 
@@ -1048,8 +1057,9 @@ export default {
           maxTemperature: this.maxTemperature_list,
           minTemperature: this.minTemperature_list,
         };
+        this.thisWeekTemperature_echart=data
         // console.log('00000000',data);
-        thisWeekTemperature_echart("thisWeekTemperature_echart", data);
+        // thisWeekTemperature_echart("thisWeekTemperature_echart", data);
       });
     },
 
@@ -2406,58 +2416,7 @@ window.open("http://localhost:8080/");
       justify-content: space-between;
       box-sizing: border-box;
       padding: 0 0.66rem;
-       .weather {
-          width: 3.84rem;
-          height: 0.34rem;
 
-          >div {
-            width: 100%;
-            height: 100%;
-            box-sizing: border-box;
-            padding: 0 0.1rem;
-            background: rgba(14, 91, 165, 0.1);
-            border: 0.01rem solid rgba(97, 152, 209, 0.65);
-            line-height: 0.34rem;
-            font-size: 0.16rem;
-            font-family: MicrosoftYaHei;
-            font-weight: 400;
-            color: #ffffff;
-            display: -webkit-box;
-            -webkit-line-clamp: 1;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-
-            marquee {
-              width: 100%;
-              height: 100%;
-
-              .item {
-                height: 100%;
-                margin-right: 0.1rem;
-                display: inline-block;
-
-                >img {
-                  width: 0.3rem;
-                  height: 0.3rem;
-                  position: relative;
-                  top: 0.01rem;
-                  margin-right: 0.05rem;
-                }
-
-                >span {
-                  font-size: 0.16rem;
-                  font-weight: 400;
-                  color: #fff;
-                  font-family: Microsoft YaHei;
-                  position: relative;
-                  top: -0.08rem;
-                }
-              }
-            }
-          }
-        }
         .e_title {
           width: 3.98rem;
           height: 0.19rem;