id9大数据页面修改/加入i18n翻译

2025-06-18 16:28:47 +08:00 · 2025-06-18 16:28:47 +08:00 · 9763b320eb
commit 9763b320eb
parent f56010172c
13 changed files with 421 additions and 90 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -21,6 +21,7 @@
        "videojs-contrib-hls": "^5.15.0",
        "videojs-contrib-hls.js": "^3.2.0",
        "vue": "^2.7.14",
+        "vue-i18n": "^8.27.0",
        "vue-router": "^3.5.1",
        "vue-seamless-scroll": "^1.1.23",
        "vuex": "^3.6.2",
@ -11017,6 +11018,12 @@
      "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
      "dev": true
    },
+    "node_modules/vue-i18n": {
+      "version": "8.27.0",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.27.0.tgz",
+      "integrity": "sha512-SX35iJHL5PJ4Gfh0Mo/q0shyHiI2V6Zkh51c+k8E9O1RKv5BQyYrCxRzpvPrsIOJEnLaeiovet3dsUB0e/kDzw==",
+      "deprecated": "Vue I18n v8.x has reached EOL and is no longer actively maintained. About maintenance status, see https://vue-i18n.intlify.dev/guide/maintenance.html"
+    },
    "node_modules/vue-loader": {
      "version": "17.2.2",
      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-17.2.2.tgz",
--- a/package.json
+++ b/package.json
@ -20,6 +20,7 @@
    "videojs-contrib-hls": "^5.15.0",
    "videojs-contrib-hls.js": "^3.2.0",
    "vue": "^2.7.14",
+    "vue-i18n": "^8.27.0",
    "vue-router": "^3.5.1",
    "vue-seamless-scroll": "^1.1.23",
    "vuex": "^3.6.2",
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@ -385,14 +385,22 @@ textarea {
  margin-right: 5px;
 }

+#app {
+  background-image: url(../image/index-background.png);
+  background-size: cover;
+  background-position: center bottom;
+  background-repeat: no-repeat;
+}
+
 .index {
  width: 100%;
  height: 100%;
  min-height: 900px;
  overflow: auto;
-  background: url(../image/index-background.png) no-repeat;
+  background-image: url(../image/index-background.png);
  background-size: cover;
-  background-position: center top;
+  background-position: center -100px;
+  background-repeat: no-repeat;
  color: #fff;
 }

@ -416,6 +424,10 @@ textarea {
  display: flex;
  align-items: center;
  justify-content: space-between;
+  background-image: url(../image/index-background.png);
+  background-size: 100% 1080px;
+  background-position: center top;
+  background-repeat: no-repeat;
 }

 .index .header .header-left {
@ -526,7 +538,7 @@ textarea {
 }

 .index .header .header-right {
-  width: 260px;
+  width: 300px;
  display: flex;
  align-items: center;
  padding-right: 20px;
@ -1960,7 +1972,7 @@ textarea {
 }

 .login .login-view .save > div {
-  width: 150px;
+  width: 300px;
  display: flex;
  font-size: 18px;
  font-family: Alibaba PuHuiTi;
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@ -415,15 +415,21 @@ textarea {
        }
    }
 }
-
+#app{
+    background-image: url(../image/index-background.png);
+    background-size:cover;
+    background-position: center bottom;
+    background-repeat: no-repeat;
+}
 .index {
    width: 100%;
    height: 100%;
    min-height: 900px;
    overflow: auto;
-    background: url(../image/index-background.png) no-repeat;
+    background-image: url(../image/index-background.png);
    background-size: cover;
-    background-position: center top;
+    background-position: center -100px;
+    background-repeat: no-repeat;

    color: #fff;

@ -447,7 +453,10 @@ textarea {
        display: flex;
        align-items: center;
        justify-content: space-between;
-
+        background-image: url(../image/index-background.png);
+        background-size: 100% 1080px;
+        background-position: center top;
+        background-repeat: no-repeat;
        .header-left {
            position: relative;
            width: 373px;
@ -558,7 +567,7 @@ textarea {
        }

        .header-right {
-            width: 260px;
+            width: 300px;
            display: flex;
            align-items: center;
            padding-right: 20px;
@ -2084,7 +2093,7 @@ textarea {
            width: 450px;

            >div {
-                width: 150px;
+                width: 300px;
                display: flex;
                font-size: 18px;
                font-family: Alibaba PuHuiTi;
--- a/src/assets/js/charts.js
+++ b/src/assets/js/charts.js
@ -574,7 +574,7 @@ export function realTimeLine1(id, data,pageId) {
    });
 }
 // 大数据页面金山吕港草莓显示
-export function realTimeLine2(id, data,pageId) {
+export function realTimeLine2(id, data,pageId,legend) {
    var chartDom = document.getElementById(id);
    var myChart = echarts.init(chartDom);
    chartDom.removeAttribute('_echarts_instance_')//解决切换页面echarts不显示的问题
@ -661,6 +661,7 @@ export function realTimeLine2(id, data,pageId) {
            extraCssText: 'z-index: 9999;', // 设置 z-index
        },
        legend: {
+            show:legend===0?false:true,
            icon: "circle",
            itemWidth: 10,
            itemHeight: 10,
@ -685,7 +686,8 @@ export function realTimeLine2(id, data,pageId) {
        grid: {
            left: "8%",
            right: "10%",
-            bottom: "13%",
+            bottom: "5%",
+            top:legend===0?'5%':60,
            containLabel: true,
        },
        xAxis: [
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@ -0,0 +1,25 @@
+
+import Vue from "vue";
+import VueI18n from "vue-i18n";
+import zh from "element-ui/lib/locale/lang/zh-CN"; // element-ui的中文包
+import en from "element-ui/lib/locale/lang/en"; // element-ui的英语包
+import { getLanguage, DEFAULT_LANGUAGE } from "../utils/language";
+ 
+Vue.use(VueI18n); // 全局挂载
+// 引入i18n
+const i18n = new VueI18n({
+  locale: getLanguage(), // 从localStorage中获取 默认中文
+  fallbackLocale: DEFAULT_LANGUAGE, // 没有找到匹配的语言将回退到中文
+  messages: {
+    zh: {
+      ...require("./lang/zh"), // 系统中文语言包模块
+      ...zh,
+    }, // 中文语言包
+    en: {
+      ...require("./lang/en"), // 系统英语语言包模块
+      ...en,
+    }, // 英语语言包
+  },
+});
+ 
+export default i18n;
--- a/src/i18n/lang/en.js
+++ b/src/i18n/lang/en.js
@ -0,0 +1,69 @@
+module.exports = {
+  login: {
+    title: "Login Form",
+    login: "Login",
+    username: "Username",
+    password: "Password",
+    rememberPassword: 'Remember password',
+    loggingIn: "Logging in...",
+    usernamePlaceholder: "Please enter username",
+    passwordPlaceholder: "Please enter password",
+    loginSuccess: "Login Success",
+  },
+  index: {
+    // header
+     realTimeData: "Realtime",  
+      setParams: "Params",      
+      galleryData: "Gallery",   
+      videoMonitor: "Monitor",  
+      historyData: "History",   
+      dataAnalysis: "Analytics",
+      management: "Admin",      
+      bigData: "Dashboard",     
+      qrTrace: "Trace"  ,       
+
+    // leftMenu
+    home: "Home",
+    greenhouse: "Greenhouse",
+    fertigation: "Fertigation",
+    smartIrrigation: "Smart Irrigation",
+    dataCollector: "Data Collector",
+    weatherStation: "Agro-Weather Station",
+    pestMonitor: "Pest Monitoring",
+
+    // management
+    userMgmt: "User Management",
+    adminMgmt: "Admin Management",
+    deviceStatusConfig: "Device Status Settings",
+    deviceSetConfig: "Device Parameter Settings",
+    deviceInfoMgmt: "Device Management",
+    weatherBinding: "Weather Data Binding",
+    bigDataDevice: "Big Data Devices",
+    mobileControl: "Mobile Control",
+    userControl: "User Control",
+    deviceControl: "Device Management",
+    websiteBanner: "Website Banners",
+    websiteProducts: "Website Products",
+    websiteCases: "Case Studies",
+    companyProfile: "Company Profile",
+    websiteNews: "News Management",
+
+    // status
+    online: "Online",
+    offline: "Offline",
+
+    // system
+    welcome: "Welcome, ",
+    noPermission: "No access permission!",
+    developing: "Page under development",
+    noPageForDevice: "Not available for {device}",
+    logoutSuccess: "Logout successful",
+
+    // devices
+    greenhouse: "Greenhouse",
+    fertigationMachine: "Fertigation Machine",
+    weatherStation: "Weather Station",
+    dataCollector: "Data Collector",
+
+  }
+};
--- a/src/i18n/lang/zh.js
+++ b/src/i18n/lang/zh.js
@ -0,0 +1,67 @@
+module.exports = {
+  login: {
+    title: "用户登录",
+    login: "登录",
+    username: "用户名",
+    password: "密码",
+    rememberPassword: '记住密码',
+    loggingIn: "登录中",
+    usernamePlaceholder: "请输入用户名",
+    passwordPlaceholder: "请输入密码",
+    loginSuccess: "登录成功",
+  },
+  index: {
+    // header
+    realTimeData: "实时数据",
+    setParams: "设定值参数",
+    galleryData: "图库数据",
+    videoMonitor: "视频监控",
+    historyData: "历史数据",
+    dataAnalysis: "数据分析",
+    management: "管理",
+    bigData: "大数据",
+    qrTrace: "二维码追溯",
+
+    // leftMenu
+    home: "首页",
+    greenhouse: "温室",
+    fertigation: "施肥机",
+    smartIrrigation: "智能灌溉",
+    dataCollector: "数据采集器",
+    weatherStation: "生态气象站",
+    pestMonitor: "虫情",
+
+    // management
+    userMgmt: "用户管理",
+    adminMgmt: "管理员管理",
+    deviceStatusConfig: "控制器设备状态值设置",
+    deviceSetConfig: "控制器设备设定值设置",
+    deviceInfoMgmt: "设备信息管理",
+    weatherBinding: "设备绑定气象站数据",
+    bigDataDevice: "大数据设备信息",
+    mobileControl: "手机控制模块信息",
+    userControl: "用户信息管理",
+    deviceControl: "设备管理",
+    websiteBanner: "官网顶部轮播图管理",
+    websiteProducts: "官网产品管理",
+    websiteCases: "官网案例管理",
+    companyProfile: "官网公司简介",
+    websiteNews: "官网新闻管理",
+
+    // status
+    online: "在线",
+    offline: "离线",
+
+    // system
+    welcome: "欢迎，",
+    noPermission: "您当前没有权限查看!",
+    developing: "当前页面正在努力开发中",
+    noPageForDevice: "{device}无该页面",
+    logoutSuccess: "退出登录成功",
+    // devices
+    greenhouse: "温室",
+    fertigationMachine: "施肥机",
+    weatherStation: "气象站",
+    dataCollector: "数据采集器"
+  }
+};
--- a/src/main.js
+++ b/src/main.js
@ -18,6 +18,11 @@ Vue.use(ElementUI);
 import 'video.js/dist/video-js.css'; // 引入video.js的样式
 import 'video.js';
 import 'videojs-contrib-hls'; // 引入支持HLS的插件
+import i18n from "./i18n/index"; // 国际化模块
+// element-ui的国际化
+Vue.use(ElementUI, {
+  i18n: (key, value) => i18n.t(key, value), 
+});
 new Vue({
  router,
  store,
@ -25,4 +30,5 @@ new Vue({
  beforeCreate(){
    Vue.prototype.$bus=this
  },
+  i18n,
 }).$mount('#app')
--- a/src/utils/language.js
+++ b/src/utils/language.js
@ -0,0 +1,54 @@
+
+// 语言选项缓存的key
+const CACHE_KEY = "local";
+ 
+// 缓存语言类型
+const SET_CACHE_LANGUAGE = (language) => {
+  localStorage.setItem(CACHE_KEY, language);
+};
+ 
+// 读取语言类型
+const GET_CACHE_LANGUAGE = () => {
+  return localStorage.getItem(CACHE_KEY);
+};
+ 
+// 默认语言选项
+export const DEFAULT_LANGUAGE = "zh";
+ 
+// 可选语言列表
+export let languageOption = [
+  { label: "中文", value: "zh" },
+  { label: "英文", value: "en" },
+];
+ 
+/**
+ * @desc 获取网站语言
+ * @return {string} 语言类型
+ */
+export const getLanguage = () => {
+  const { language } = navigator;
+  const lang = language && language.split("-")[0];
+ 
+  const isValidLanguage = languageOption.some((s) => s.value === lang);
+  const browserLanguage = isValidLanguage ? lang : DEFAULT_LANGUAGE;
+ 
+  // TODO: 已设置vue-i18n默认值和兜底都是zh 所以这里没有缓存zh 可自行按需求缓存
+  return GET_CACHE_LANGUAGE() || browserLanguage;
+};
+ 
+/**
+ * @param {string} language - 语言类型: en、ch
+ * @param {object} vm - 当前vue实例指向
+ * @desc 改变网站语言
+ * @example
+ * ```js
+ *  changeLanguage("en",this);
+ * ```
+ */
+export const changeLanguage = (language, vm) => {
+  if (!vm) {
+    throw "缺少 vm 实例入参";
+  }
+  vm.$i18n.locale = language;
+  SET_CACHE_LANGUAGE(language);
+};
--- a/src/views/index.vue
+++ b/src/views/index.vue
@ -23,10 +23,15 @@
            <div class="header-right" v-if="userInfo">
                <img src="../assets/image/avatar.png" alt="">
                <div class="user-data">
-                    <div class="name">欢迎，{{ userInfo.nickName }}
+                    <div class="name">{{$t('index.welcome')}}{{ userInfo.nickName }}
                        </div>
                    <div class="time" v-if="time"> {{ time.year.year }}-{{ time.year.month }}-{{ time.year.date }}</div>
                </div>
+                   <!-- <el-button 
+      @click="changeLanguage()"
+    >
+        {{ currentLanguage === 'zh' ? 'EN' : '中' }}
+    </el-button> -->
                <div class="login-out" @click="loginOut"></div>
            </div>
        </div>
@ -44,7 +49,7 @@
                                    v-for="item1, index1 in item.list" :key="index1">{{ item1.deviceTypeName }} <div
                                        class="status" :class="item1.deviceState == 0 ? 'outline' : 'online'"
                                        v-if="item1.deviceState >= 0 && item1.deviceState">{{
-                    item1.deviceState == 0 ? '离线' : '在线' }}</div>
+                    item1.deviceState == 0 ? $t('index.offline') : $t('index.online') }}</div>
                                </li>
                            </ul>
                        </el-collapse-item>
@ -88,29 +93,17 @@

 <script>
 import { getnowtime } from '../assets/js/nowTime'
+//切换中英文
+  import {  changeLanguage, getLanguage } from '@/utils/language'
 import axios from "axios";
 export default {
    data() {
        return {
+            
+      currentLanguage: getLanguage(),//切换中英文
            time: null,//当前时间
            headerActive: 0,
-            headerList: [
-                { name: '实时数据', router: 'realTime', routerList: ['realTime'], img: require('../assets/image/header-img1.png') },
-                // { name: '设定值参数', router: 'status', index: 1, routerList: ['formula', 'irrigateSet', 'PIDSet', 'systemSet', 'upload', 'sensorSet'], img: require('../assets/image/header-img0.png') },
-                { name: '设定值参数', router: 'status', index: 1, routerList: ['formula', 'status', 'exitSettings', 'skylight', 'systemSet-con', 'fan', 'upload-con', 'sensorSet-con', 'alarmSettings', 'synthesis-con', 'waterPump', 'geothermalFan', 'uptake', 'downtake', 'rollByRoll', 'snowRemoval', "targetTemperature", "targetHumidity", "targetCo2", "sunroofControl", "outsizeSunshade", "insizeSunshade", "wetFan", "LED", 'electromagneticControl', "coercionMist", "circulationCan", "internalInsulation", "forceOutput", "intrinsicParameter", "parameterSet",], img: require('../assets/image/header-img0.png') },
-                { name: '图库数据', router: 'imageData', routerList: ['imageData'], img: require('../assets/image/header-img1.png') },
-                { name: '视频监控', router: 'videoMonitoring', routerList: ['videoMonitoring'], img: require('../assets/image/header-img2.png') },
-                //  history history
-                { name: '历史数据', router: 'historyData', index: 1, routerList: ['historyData'], img: require('../assets/image/header-img3.png') },
-                //dataAnalysis dataAnalysis
-                { name: '数据分析', router: 'dataAnalysis', index: 1, routerList: ['dataAnalysis'], img: require('../assets/image/header-img4.png') },
-                // { name: '设备菜单', router: '', routerList: [], img: require('../assets/image/header-img5.png') },
-                //systemManage systemManage
-                // manage
-                { name: '管理', router: 'manage', routerList: ['manage','dataDevice','deviceStatusSet','officialWebsiteBanner','officialWebsiteProduct','officialWebsiteCase','officialWebsiteDetail','officialWebsiteNews','deviceSet','deviceInfoManage','weatherData','mobileControl','userInfoControl','deviceManage','videoManage'], img: require('../assets/image/header-img6.png') },
-
-                { name: '大数据', router: 'largeScreen', routerList: ['largeScreen'], img: require('../assets/image/header-img8.png') }
-            ],
+           

            activeNames: [3],
            leftList: [
@ -163,6 +156,27 @@ export default {
            mainData:null,
        }
    },
+    computed:{
+         headerList(){
+            return  [
+                { name: this.$t('index.realTimeData'), router: 'realTime', routerList: ['realTime'], img: require('../assets/image/header-img1.png') },
+                // { name: '设定值参数', router: 'status', index: 1, routerList: ['formula', 'irrigateSet', 'PIDSet', 'systemSet', 'upload', 'sensorSet'], img: require('../assets/image/header-img0.png') },
+                { name:this.$t('index.setParams') , router: 'status', index: 1, routerList: ['formula', 'status', 'exitSettings', 'skylight', 'systemSet-con', 'fan', 'upload-con', 'sensorSet-con', 'alarmSettings', 'synthesis-con', 'waterPump', 'geothermalFan', 'uptake', 'downtake', 'rollByRoll', 'snowRemoval', "targetTemperature", "targetHumidity", "targetCo2", "sunroofControl", "outsizeSunshade", "insizeSunshade", "wetFan", "LED", 'electromagneticControl', "coercionMist", "circulationCan", "internalInsulation", "forceOutput", "intrinsicParameter", "parameterSet",], img: require('../assets/image/header-img0.png') },
+                { name:this.$t('index.galleryData'), router: 'imageData', routerList: ['imageData'], img: require('../assets/image/header-img1.png') },
+                { name:this.$t('index.videoMonitor'), router: 'videoMonitoring', routerList: ['videoMonitoring'], img: require('../assets/image/header-img2.png') },
+                //  history history
+                { name:this.$t('index.historyData'), router: 'historyData', index: 1, routerList: ['historyData'], img: require('../assets/image/header-img3.png') },
+                //dataAnalysis dataAnalysis
+                { name:this.$t('index.dataAnalysis'), router: 'dataAnalysis', index: 1, routerList: ['dataAnalysis'], img: require('../assets/image/header-img4.png') },
+                // { name: '设备菜单', router: '', routerList: [], img: require('../assets/image/header-img5.png') },
+                //systemManage systemManage
+                // manage
+                { name:this.$t('index.management'), router: 'manage', routerList: ['manage','dataDevice','deviceStatusSet','officialWebsiteBanner','officialWebsiteProduct','officialWebsiteCase','officialWebsiteDetail','officialWebsiteNews','deviceSet','deviceInfoManage','weatherData','mobileControl','userInfoControl','deviceManage','videoManage'], img: require('../assets/image/header-img6.png') },
+
+                { name:this.$t('index.bigData') , router: 'largeScreen', routerList: ['largeScreen'], img: require('../assets/image/header-img8.png') }
+            ]
+         }
+    },
    watch: {
        "$route"(newName, oldName) {
            this.gerRouter();
@ -732,6 +746,13 @@ var iccidList=[]
                that.time = getnowtime()
            }, 1000);
        },
+          changeLanguage() {
+        const newLang = this.currentLanguage === 'zh' ? 'en' : 'zh'
+      changeLanguage(newLang, this)
+      this.$forceUpdate()
+      this.currentLanguage = newLang
+    },
+
    },

 }
--- a/src/views/login.vue
+++ b/src/views/login.vue
@ -1,12 +1,14 @@
 <template>
  <div class="login">
-    <div class="login-header">
+    <!-- <div class="login-header">
      <img src="../assets/image/logo.png" alt="" />
-    </div>
+    </div> -->
    <div class="login-view">
      <div class="login-title">
        <img src="../assets/image/login-icon.png" alt="" />
-        <span>用户登录</span>
+        <!-- <span>用户登录</span> -->
+    
+        <span>{{ $t("login.title") }}</span>
      </div>
      <div class="login-input username" :class="usernameAct ? 'active' : ''">
        <img src="../assets/image/username.png" alt="" />
@ -15,7 +17,7 @@
          @focus="usernameAct = true"
          @blur="usernameAct = false"
          type="text"
-          placeholder="用户名"
+          :placeholder="$t('login.username')"
        />
      </div>
      <div class="login-input password" :class="passwordAct ? 'active' : ''">
@ -25,20 +27,22 @@
          @focus="passwordAct = true"
          @blur="passwordAct = false"
          type="password"
-          placeholder="密   码"
+          :placeholder="$t('login.password')"
        />
      </div>
      <div class="save" @click="save = !save">
        <div>
          <div><i v-if="save" class="el-icon-check"></i></div>
-          记住密码
+          {{$t("login.rememberPassword")}}
        </div>
      </div>
-      <div class="login-btn"  @click="login">登 录</div>
+      <div class="login-btn"  @click="login">{{$t("login.login")}}</div>
    </div>
  </div>
 </template>
  <script>
+  //切换中英文
+  import {  changeLanguage, getLanguage } from '@/utils/language'
 export default {
  data() {
    return {
@ -49,6 +53,8 @@ export default {
      username: "",
      loading:null,
      isLoad:false,
+
+      currentLanguage: getLanguage()//切换中英文
    };
  },
  mounted() {
@ -69,12 +75,18 @@ export default {
    window.removeEventListener('keyup', this.handleKeyUp);
  },
  methods: {
+     changeLanguage() {
+        const newLang = this.currentLanguage === 'zh' ? 'en' : 'zh'
+      changeLanguage(newLang, this)
+      this.currentLanguage = newLang
+    },
+
     handleKeyUp() {
       if (event.key === 'Enter'&&this.isLoad==false) {
        this.isLoad=true
               this.loading = this.$loading({
        lock: true,
-        text: '登录中',
+        text: this.$t("login.loggingIn"),
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
@ -97,18 +109,20 @@ export default {
      var store = this.$store.state;
 this.loading = this.$loading({
        lock: true,
-        text: '登录中',
+        text: this.$t("login.loggingIn"),
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      // "username": "xiaomeng",
      //     "password": "lihe12345"
      if (!this.username) {
-        this.$message.error("用户名未填写");
+        this.$message.error(this.$t("login.usernamePlaceholder"));
+          this.loading.close()
        return;
      }
      if (!this.password) {
-        this.$message.error("密码未填写");
+        this.$message.error(this.$t("login.passwordPlaceholder"));
+          this.loading.close()
        return;
      }

@ -132,9 +146,10 @@ export default {
        }
        if (res.data.code == 200) {
          this.$message({
-            message: "登陆成功",
+            message: this.$t("login.loginSuccess"),
            type: "success",
          });
+            this.loading.close()
          store.equipmentIndex = 1;
          localStorage.setItem("token", res.data.data.token);
          localStorage.setItem("userInfo", JSON.stringify(res.data.data));
--- a/src/views/page/largeScreen.vue
+++ b/src/views/page/largeScreen.vue
@ -40,9 +40,9 @@
      </div>
      <div class="content">
        <div class="left" v-show="limitUserId != 5">
-          <div class="weatherStation" v-show="limitUserId != 12"></div>
+          <div class="weatherStation" v-if="limitUserId != 12&&limitUserId != 9"></div>

-          <div class="weather" v-show="limitUserId != 12">
+          <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">
@ -58,7 +58,8 @@
          </div>

          <div class="weather_echart" id="weather_echart" v-if="limitUserId != 11&&limitUserId != 12&&limitUserId != 9"></div>
-          <div class="weather_echart" v-if="limitUserId==9">
+               <div class="e_title" v-if="limitUserId == 9">作物模型</div>
+          <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 class="e_title" v-show="limitUserId == 12">实时数据</div>
@ -267,12 +268,47 @@
         <!--  甘井设施农业大数据云平台 -->
         <div class="right"  v-else-if="limitUserId == 9">
           <div class="liveVideo"></div>
-                <div class="liveVideo_content">
+           
+          <div class="liveVideo_content">
+            <div class="swiper-container mySwiper_video">
+              <div class="swiper-wrapper">
+                <div class="swiper-slide swiper-slide_video" v-for="(item, index) in get_sel_eqbyid_list" :key="index">
+                  <div class="monitor" :id="'monitor' + item.number">
+                    <div ref="videoPlayer" class="video-js" :id="'video-js' + item.number"></div>
+                  </div>
+                  <div class="c_bottom">{{ item.deviceTypeName }}</div>
+                </div>
+              </div>
+              <div class="swiper-button-next swiper-button-next_video">
+                <img src="../../assets/img/right_video.png" alt="" />
+              </div>
+              <div class="swiper-button-prev swiper-button-prev_video">
+                <img src="../../assets/img/left_video.png" alt="" />
+              </div>
+            </div>
+          </div>
+               
+                 <div class="weather" v-if="limitUserId == 9">
+            <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="e_title">温室实时数据</div>
+          <div class="weather_echart" id="realTime-line" v-if="limitUserId == 9"></div>
+            <div class="e_title">薄膜温室番茄</div>
+          
+           <div class="liveVideo_content liveVideo_content_9">
                  <video class="video" controls muted loop autoplay 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/%E7%95%AA%E8%8C%84%E7%94%9F%E9%95%BF%E8%A7%86%E9%A2%91.mp4"></video>
                </div>
-                    
-                 <div class="e_title">温室实时数据</div>
-          <div class="weather_echart" id="realTime-line" v-if="limitUserId == 9"></div>
        </div>
        <div class="right" v-else>
          <!-- 监控 -->
@ -826,7 +862,7 @@ export default {
                      this.api.getControlFsdata(data1).then(res => {
                    if (res.data.code == 200) {
                        var chartsData = res.data.data
-                        realTimeLine2('realTime-line', chartsData, data1)
+                        realTimeLine2('realTime-line', chartsData, data1,0)
                    } else {
                        // this.$message.error(res.data.msg);
                    }
@ -1037,11 +1073,12 @@ export default {
        res.data.data.forEach((item, index) => {
          //规定 指定id获取监控
          //规定 id为1(丽水) 并且使用第一个设备ID的监控
-          // item.deviceId == 2024070113400048  甘井设施农业大数据云平台监控
+          //   甘井设施农业大数据云平台监控
          if (
            item.cameraSerialNumber != null &&
            (item.deviceId == 2023042214250027 ||
              item.deviceId == 2023120613270115 ||
+              item.deviceId == 2024070113400047 ||
              item.deviceId == 2023042214250017||
              item.deviceId == 2023120613270053|| (this.limitUserId==1&&index==0)
             )
@ -2182,42 +2219,7 @@ export default {
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 0.66rem;
-  
-        .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;
-        }
-
-      .left {
-        width: 4rem;
-        height: calc(100% - 0.66rem);
-        box-sizing: border-box;
-        // padding-top: 0.56rem;
-        position: relative;
-        // top: 0.56rem;
-        // left: 0.66rem;
-        z-index: 999;
-        .realTime-line{
-          width: 100%;
-           height: calc((100% - 3.5rem) / 2);
-        }
-        .weatherStation {
-          width: 4rem;
-          height: 0.43rem;
-          background: url("../../assets/img/weatherStation.png") center no-repeat;
-          background-size: 100% 100%;
-        }
-
-        .weather {
+       .weather {
          width: 3.84rem;
          height: 0.34rem;

@ -2269,10 +2271,48 @@ export default {
            }
          }
        }
+        .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;
+        }
+
+      .left {
+        width: 4rem;
+        height: calc(100% - 0.66rem);
+        box-sizing: border-box;
+        // padding-top: 0.56rem;
+        position: relative;
+        // top: 0.56rem;
+        // left: 0.66rem;
+        z-index: 999;
+        .realTime-line{
+          width: 100%;
+           height: calc((100% - 3.5rem) / 2);
+        }
+        .weatherStation {
+          width: 4rem;
+          height: 0.43rem;
+          background: url("../../assets/img/weatherStation.png") center no-repeat;
+          background-size: 100% 100%;
+        }
+
+   

        .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%;
@ -3308,7 +3348,7 @@ export default {
        // right: 0.66rem;
        z-index: 999;
        .weather_echart{
-          height: calc(100% - 3.5rem);
+          height: calc((100% - 4.5rem) * 0.4);
        }
        .right-image-list{
          padding: 20px 0;
@ -3342,9 +3382,12 @@ export default {
          flex-direction: column;
          align-items: center;
          justify-content: center;
+          &.liveVideo_content_9{
+            height: calc((100% - 4.5rem) * 0.6);
+          }
          .video{
            width: 3.7rem;
-              height: 2.6rem;
+              height:80%;
          }
          .mySwiper_video {
            width: 100%;