pc-master #254
7
package-lock.json
generated
7
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 7.1 MiB After Width: | Height: | Size: 2.5 MiB |
BIN
src/assets/img/map51.png
Normal file
BIN
src/assets/img/map51.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.1 MiB |
@ -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不显示的问题
|
||||
@ -616,11 +616,11 @@ export function realTimeLine2(id, data,pageId) {
|
||||
|
||||
|
||||
})
|
||||
if(!selTure){
|
||||
dataList.forEach((el, index) => {
|
||||
selList[el.name]=(index==0?true:false)
|
||||
})
|
||||
}
|
||||
// if(!selTure){
|
||||
// dataList.forEach((el, index) => {
|
||||
// selList[el.name]=(index==0?true:false)
|
||||
// })
|
||||
// }
|
||||
|
||||
dataList.forEach((el, index) => {
|
||||
list.push({
|
||||
@ -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: [
|
||||
|
||||
25
src/i18n/index.js
Normal file
25
src/i18n/index.js
Normal file
@ -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;
|
||||
69
src/i18n/lang/en.js
Normal file
69
src/i18n/lang/en.js
Normal file
@ -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",
|
||||
|
||||
}
|
||||
};
|
||||
67
src/i18n/lang/zh.js
Normal file
67
src/i18n/lang/zh.js
Normal file
@ -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: "数据采集器"
|
||||
}
|
||||
};
|
||||
@ -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')
|
||||
|
||||
54
src/utils/language.js
Normal file
54
src/utils/language.js
Normal file
@ -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);
|
||||
};
|
||||
@ -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
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
@ -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));
|
||||
|
||||
@ -19,7 +19,8 @@
|
||||
<span class="line"></span>
|
||||
<span>{{ time.time }}</span>
|
||||
</div>
|
||||
<div class="nav">
|
||||
<el-button class="large-btn" @click="toBackPage" type="primary" v-if="limitUserId==9">返回</el-button>
|
||||
<div class="nav" v-if="limitUserId!=9">
|
||||
<div class="item">
|
||||
<img src="../../assets/img/nav1_act.png" alt="" />
|
||||
<span>大数据平台</span>
|
||||
@ -39,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">
|
||||
@ -56,9 +57,13 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="weather_echart" id="weather_echart" v-show="limitUserId != 11&&limitUserId != 12"></div>
|
||||
<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">
|
||||
<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>
|
||||
<div class="realTime-line" id="realTime-line" v-show="limitUserId == 12"></div>
|
||||
<div class="realTime-line" id="realTime-line" v-if="limitUserId == 12"></div>
|
||||
<div class="environmentData" :class="`environmentData-${limitUserId}`">
|
||||
<div class="e_title">温室环境数据</div>
|
||||
<div class="detail">
|
||||
@ -107,6 +112,20 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle">
|
||||
<div class="middle-data" v-if="limitUserId==9">
|
||||
<div class="data-title" :style="`--dataNumber:${tableList.length+1}`">
|
||||
<div>时间</div>
|
||||
<div v-for="item,index in tableList" :key="index">{{item}}</div>
|
||||
</div>
|
||||
<vue-seamless :style="`--dataNumber:${tableList.length+1}`" class="data-data" :data="tableData" :class-option="defaultOption1">
|
||||
<div class="data-table" v-for="item,index in tableData" :key="index">
|
||||
<div>{{item.time}}</div>
|
||||
<div v-for="item1,index1 in tableList" :key="index1">
|
||||
<div>{{ item[item1] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</vue-seamless>
|
||||
</div>
|
||||
<div class="map">
|
||||
<div class="map1">
|
||||
<!-- 丽水 -->
|
||||
@ -246,10 +265,11 @@
|
||||
<div class="e_title">虫情趋势图</div>
|
||||
<div class="right-charts" id="pest-charts"></div>
|
||||
</div>
|
||||
<div class="right" v-else>
|
||||
<div class="liveVideo"></div>
|
||||
<!-- 甘井设施农业大数据云平台 -->
|
||||
<div class="right" v-else-if="limitUserId == 9">
|
||||
<div class="liveVideo"></div>
|
||||
|
||||
<div class="liveVideo_content" v-show="limitUserId != 12">
|
||||
<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">
|
||||
@ -267,14 +287,63 @@
|
||||
</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>
|
||||
<div class="right" v-else>
|
||||
<!-- 监控 -->
|
||||
<template v-if="limitUserId != 12">
|
||||
<div class="liveVideo"></div>
|
||||
|
||||
<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>
|
||||
</template>
|
||||
<!-- 金山吕港草莓单独显示控制器南图片 -->
|
||||
<div class="liveVideo_content" style="padding:10px;" v-show="limitUserId == 12">
|
||||
<img style="width: 100%;height: 100%;" :src="imgUrl" alt="">
|
||||
</div>
|
||||
|
||||
<div class="deviceState"></div>
|
||||
|
||||
<div class="device_detail">
|
||||
<!-- 右下角设备状态 -->
|
||||
<template>
|
||||
<div class="deviceState"></div>
|
||||
<div class="device_detail">
|
||||
<div class="swiper_timer">
|
||||
<div>
|
||||
<div class="swiper-container middle_disasterWarningAnalysis" :style="styleContainer">
|
||||
@ -299,7 +368,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="device_content scroll">
|
||||
<!-- 丽水 -->
|
||||
<div class="content_item" v-if="limitUserId == 1">
|
||||
@ -420,7 +488,7 @@
|
||||
</div>
|
||||
<!-- 大冶鑫 -->
|
||||
<div class="content_item"
|
||||
v-if="limitUserId == 7 || limitUserId == 9 || limitUserId == 10 || limitUserId == 11 || limitUserId == 12|| limitUserId == 13">
|
||||
v-if="limitUserId == 7 || limitUserId == 10 || limitUserId == 11 || limitUserId == 12|| limitUserId == 13">
|
||||
<div v-for="(item, index) in fiveControlList" :key="index" style="margin-bottom: 0.15rem">
|
||||
<div class="i_title" v-if="item.controlState != 0">
|
||||
<img src="../../assets/img/i_title_img.png" alt="" />
|
||||
@ -443,7 +511,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -484,6 +555,18 @@ export default {
|
||||
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
|
||||
};
|
||||
},
|
||||
defaultOption1() {
|
||||
return {
|
||||
step: 0.1, // 数值越大速度滚动越快
|
||||
limitMoveNum: 5, // 开始无缝滚动的数据量 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 {
|
||||
@ -603,6 +686,13 @@ export default {
|
||||
imageList: [],
|
||||
chartsData: null,
|
||||
srcList: [],
|
||||
|
||||
// id9的甘井设施农业大数据云平台
|
||||
dateRange: [],
|
||||
currentPage: 1,
|
||||
pageSize: 20,
|
||||
tableData: [],
|
||||
tableList: [],
|
||||
};
|
||||
},
|
||||
beforeMount() {
|
||||
@ -628,6 +718,62 @@ export default {
|
||||
clearInterval(this.timer_) && this.timer_;
|
||||
},
|
||||
methods: {
|
||||
// id9的甘井设施农业大数据云平台
|
||||
timeInit() {
|
||||
const start = new Date()
|
||||
start.setHours(0, 0, 0, 0)
|
||||
const end = new Date()
|
||||
this.dateRange = [start, end]
|
||||
},
|
||||
getdataTime(time) {
|
||||
// 中国标准时间
|
||||
var chinaTime = new Date(time);
|
||||
|
||||
// 将中国标准时间转换为UTC时间
|
||||
var utcTime = new Date(chinaTime.getTime() - chinaTime.getTimezoneOffset() * 60000);
|
||||
|
||||
// 将UTC时间转换为2024-02-17 00:00:00格式
|
||||
var formattedTime = utcTime.toISOString().slice(0, 19).replace('T', ' ');
|
||||
return formattedTime
|
||||
},
|
||||
getData() {
|
||||
console.log(this.dateRange);
|
||||
var data = {
|
||||
equipmentId:'2024070113400048',
|
||||
startTime: this.getdataTime(this.dateRange[0]),
|
||||
endTime: this.getdataTime(this.dateRange[1]),
|
||||
page: this.currentPage,
|
||||
pageSize: this.pageSize,
|
||||
isEquipment:0
|
||||
}
|
||||
this.api.selFsTime(data).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
this.tableList = []
|
||||
this.tableData = []
|
||||
this.total = res.data.data.totalCount
|
||||
res.data.data.data[0].equipment.forEach((el, index) => {
|
||||
this.tableList.push(el.environmentDataId + '(' + el.formula+ ')')
|
||||
})
|
||||
res.data.data.data.forEach((el, index) => {
|
||||
const processedData = {
|
||||
time: el.updateTime
|
||||
};
|
||||
|
||||
el.equipment.forEach((item, index) => {
|
||||
processedData[item.environmentDataId + '(' + item.formula+ ')'] = item.environmentData;
|
||||
});
|
||||
this.tableData.push(processedData)
|
||||
})
|
||||
console.log( this.tableList, this.tableData);
|
||||
}else{
|
||||
this.$message.success(res.data.msg);
|
||||
this.tableList = []
|
||||
this.tableData = []
|
||||
this.total =0
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
handlerOther() {
|
||||
this.other_show = !this.other_show
|
||||
},
|
||||
@ -705,10 +851,27 @@ export default {
|
||||
this.get_thisWeekTemperature_echart_data(2023120613270131);
|
||||
this.get_environmentData(2024070113400048);
|
||||
this.get_readControl_getState(2024070113400048);
|
||||
this.timeInit()
|
||||
// 左侧上部气象站
|
||||
this.getWeatherData(2023120613270131);
|
||||
}else {
|
||||
// 其他非指定id都默认第一个
|
||||
const store=this.$store.state
|
||||
var data1 ='2024070113400048'
|
||||
var nowDevice = store.equipmentList.find(item => item.deviceId == data1);
|
||||
this.imgUrl =nowDevice? nowDevice.hls:null
|
||||
|
||||
this.api.getControlFsdata(data1).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
var chartsData = res.data.data
|
||||
realTimeLine2('realTime-line', chartsData, data1,0)
|
||||
} else {
|
||||
// this.$message.error(res.data.msg);
|
||||
}
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.getData()
|
||||
}, 0);
|
||||
} else if (limitUserId == 11||limitUserId == 12){
|
||||
// 其他非指定id都默认第一个
|
||||
// 获取控制器第一个Id
|
||||
const list = []
|
||||
this.$store.state.equipmentList.forEach((el, index) => {
|
||||
@ -717,9 +880,7 @@ export default {
|
||||
}
|
||||
})
|
||||
list.sort(this.compare('equipmentStatu'))
|
||||
|
||||
// 大冶鑫
|
||||
this.get_weather_echart_data(list[0].deviceId);
|
||||
this.get_thisWeekTemperature_echart_data(list[0].deviceId);
|
||||
this.get_environmentData(list[0].deviceId);
|
||||
this.get_readControl_getState(list[0].deviceId);
|
||||
@ -740,6 +901,22 @@ export default {
|
||||
}
|
||||
})
|
||||
}
|
||||
} else {
|
||||
// 其他非指定id都默认第一个
|
||||
// 获取控制器第一个Id
|
||||
const list = []
|
||||
this.$store.state.equipmentList.forEach((el, index) => {
|
||||
if (el.deviceName == 10) {
|
||||
list.push(el)
|
||||
}
|
||||
})
|
||||
list.sort(this.compare('equipmentStatu'))
|
||||
// 大冶鑫
|
||||
this.get_weather_echart_data(list[0].deviceId);
|
||||
this.get_thisWeekTemperature_echart_data(list[0].deviceId);
|
||||
this.get_environmentData(list[0].deviceId);
|
||||
this.get_readControl_getState(list[0].deviceId);
|
||||
this.getWeatherData(list[0].deviceId);
|
||||
// 长兴前卫柑桔新优品种扩繁基地 id为13 有单独的虫情接口
|
||||
if(limitUserId == 13){
|
||||
this.getImage();
|
||||
@ -896,11 +1073,12 @@ export default {
|
||||
res.data.data.forEach((item, index) => {
|
||||
//规定 指定id获取监控
|
||||
//规定 id为1(丽水) 并且使用第一个设备ID的监控
|
||||
// 甘井设施农业大数据云平台监控
|
||||
if (
|
||||
item.cameraSerialNumber != null &&
|
||||
(item.deviceId == 2023042214250027 ||
|
||||
item.deviceId == 2023120613270115 ||
|
||||
item.deviceId == 2024070113400048 ||
|
||||
item.deviceId == 2024070113400047 ||
|
||||
item.deviceId == 2023042214250017||
|
||||
item.deviceId == 2023120613270053|| (this.limitUserId==1&&index==0)
|
||||
)
|
||||
@ -1935,7 +2113,12 @@ export default {
|
||||
height: 0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.large-btn{
|
||||
position: absolute;
|
||||
top: 0.13rem;
|
||||
right: 0.66rem;
|
||||
z-index: 111;
|
||||
}
|
||||
.calendar {
|
||||
width: 4rem;
|
||||
height: 0.3rem;
|
||||
@ -2036,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: absolute;
|
||||
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;
|
||||
|
||||
@ -2123,10 +2271,52 @@ 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%;
|
||||
}
|
||||
}
|
||||
|
||||
.environmentData {
|
||||
@ -2210,6 +2400,58 @@ export default {
|
||||
}
|
||||
|
||||
.middle {
|
||||
width: calc(100% - 8rem);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex-direction: column;
|
||||
padding-bottom: 0.5rem;
|
||||
.middle-data{
|
||||
width: 100%;
|
||||
height:2.5rem ;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
background: rgba(0, 92, 178, 0.3);
|
||||
.data-title{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height:40px;
|
||||
>div{
|
||||
width: calc(100% / var(--dataNumber));
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
color:#fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.data-data{
|
||||
height: calc(2.5rem - 40px);
|
||||
overflow: hidden;
|
||||
.data-table{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: calc((2.5rem - 40px) / 5);
|
||||
>div{
|
||||
width: calc(100% / var(--dataNumber));
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -2798,8 +3040,8 @@ export default {
|
||||
width: 0.3rem;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 24%;
|
||||
left: 11%;
|
||||
top: 31.5%;
|
||||
left:22.5%;
|
||||
z-index: 99;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -2808,8 +3050,8 @@ export default {
|
||||
width: 0.3rem;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 76%;
|
||||
left: 13%;
|
||||
top:71%;
|
||||
left: 28.5%;
|
||||
z-index: 99;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -2818,8 +3060,8 @@ export default {
|
||||
width: 0.3rem;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 36%;
|
||||
left: 56%;
|
||||
top: 31.5%;
|
||||
left: 55%;
|
||||
z-index: 99;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -2828,8 +3070,8 @@ export default {
|
||||
width: 0.3rem;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 38%;
|
||||
left: 57%;
|
||||
top: 33%;
|
||||
left: 56%;
|
||||
z-index: 99;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -2838,8 +3080,8 @@ export default {
|
||||
width: 0.3rem;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 66%;
|
||||
top: 22%;
|
||||
left: 59.5%;
|
||||
z-index: 99;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -2848,8 +3090,8 @@ export default {
|
||||
width: 0.3rem;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 28%;
|
||||
left: 67%;
|
||||
top: 23%;
|
||||
left: 60.5%;
|
||||
z-index: 99;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -2858,8 +3100,8 @@ export default {
|
||||
width: 0.3rem;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 21%;
|
||||
left: 70%;
|
||||
top: 19.5%;
|
||||
left: 62%;
|
||||
z-index: 99;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -2868,8 +3110,8 @@ export default {
|
||||
width: 0.3rem;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 24%;
|
||||
left: 71%;
|
||||
top: 20.5%;
|
||||
left:63%;
|
||||
z-index: 99;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -2878,8 +3120,8 @@ export default {
|
||||
width: 0.3rem;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 18.5%;
|
||||
left: 74%;
|
||||
top: 16%;
|
||||
left:64%;
|
||||
z-index: 99;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -2888,8 +3130,8 @@ export default {
|
||||
width: 0.3rem;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 21.5%;
|
||||
left: 75%;
|
||||
top:18%;
|
||||
left: 65%;
|
||||
z-index: 99;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -3101,10 +3343,13 @@ export default {
|
||||
height: calc(100% - 0.66rem);
|
||||
box-sizing: border-box;
|
||||
padding-top: 0.44rem;
|
||||
position: absolute;
|
||||
top: 0.56rem;
|
||||
right: 0.66rem;
|
||||
position: relative;
|
||||
// top: 0.56rem;
|
||||
// right: 0.66rem;
|
||||
z-index: 999;
|
||||
.weather_echart{
|
||||
height: calc((100% - 4.5rem) * 0.4);
|
||||
}
|
||||
.right-image-list{
|
||||
padding: 20px 0;
|
||||
display: grid;
|
||||
@ -3137,7 +3382,13 @@ 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:80%;
|
||||
}
|
||||
.mySwiper_video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@ -443,7 +443,7 @@
|
||||
</template>
|
||||
</div> -->
|
||||
<div class="popBox">
|
||||
<div class="pole_item" style="top:53.5%;left:48.5%;z-index:1;" @click="toHttp">
|
||||
<div class="pole_item" style="top:40.5%;left:48.5%;z-index:1;" @click="toHttp">
|
||||
<div class="p_title">
|
||||
<img src="../../assets/img/wenshi.png" alt="" />
|
||||
<span>100个拱棚</span>
|
||||
@ -1071,48 +1071,48 @@ export default {
|
||||
},
|
||||
getTopOrLeft9(id) {
|
||||
if (id == 1) {
|
||||
return 'top:20.5%;left:10%;z-index:10;'
|
||||
return 'top:23.5%;left:21%;z-index:10;'
|
||||
} else if (id == 2) {
|
||||
return 'top:72%;left:12%;z-index:9;'
|
||||
return 'top:63%;left:28%;z-index:9;'
|
||||
} else if (id == 3) {
|
||||
return 'top:32%;left:56%;z-index:8;'
|
||||
return 'top:23%;left:55%;z-index:8;'
|
||||
} else if (id == 4) {
|
||||
return 'top:34%;left:57%;z-index:7;'
|
||||
} else if (id == 5) {
|
||||
return 'top:20.5%;left:66.5%;z-index:6;'
|
||||
return 'top:13.5%;left:59.5%;z-index:6;'
|
||||
} else if (id == 6) {
|
||||
return 'top:22.5%;left:68%;z-index:5;'
|
||||
return 'top:15.5%;left:61%;z-index:5;'
|
||||
} else if (id == 7) {
|
||||
return 'top:17%;left:70.6%;z-index:4;'
|
||||
return 'top:10%;left:61.6%;z-index:4;'
|
||||
} else if (id == 8) {
|
||||
return 'top:19.5%;left:71.5%;z-index:3;'
|
||||
return 'top:12.5%;left:63.5%;z-index:3;'
|
||||
} else if (id == 9) {
|
||||
return 'top:14%;left:75%;z-index:2;'
|
||||
return 'top:7%;left:63%;z-index:2;'
|
||||
} else if (id == 10) {
|
||||
return 'top:16.5%;left:75.5%;z-index:1;'
|
||||
return 'top:10%;left:65.5%;z-index:1;'
|
||||
}
|
||||
},
|
||||
getTopOrLeft9_9(id) {
|
||||
if (id == 1) {
|
||||
return 'top:20.5%;left:10%;transform: translate(54%,0);'
|
||||
return 'top:23.5%;left:21%;transform: translate(30%,0);'
|
||||
} else if (id == 2) {
|
||||
return 'top:72%;left:12%;transform: translate(54%,0);'
|
||||
return 'top:63%;left:28%;transform: translate(30%,0);'
|
||||
} else if (id == 3) {
|
||||
return 'top:32%;left:56%;transform: translate(54%,0);'
|
||||
return 'top:23%;left:55%;transform: translate(30%,0);'
|
||||
} else if (id == 4) {
|
||||
return 'top:16%;left:57%;transform: translate(54%,0%);'
|
||||
return 'top:34%;left:57%;transform: translate(30%,0%);'
|
||||
} else if (id == 5) {
|
||||
return 'top:20.5%;left:66.5%;transform: translate(54%,0%);'
|
||||
return 'top:13.5%;left:59.5%;transform: translate(30%,0%);'
|
||||
} else if (id == 6) {
|
||||
return 'top:22.5%;left:68%;transform: translate(54%,0%);'
|
||||
return 'top:15.5%;left:61%;transform: translate(30%,0%);'
|
||||
} else if (id == 7) {
|
||||
return 'top:17%;left:70.6%;transform: translate(54%,0%);'
|
||||
return 'top:10%;left:61.6%;transform: translate(30%,0%);'
|
||||
} else if (id == 8) {
|
||||
return 'top:19.5%;left:71.5%;transform: translate(54%,0);'
|
||||
return 'top:12.5%;left:63.5%;transform: translate(30%,0);'
|
||||
} else if (id == 9) {
|
||||
return 'top:14%;left:75%;transform: translate(54%,0);'
|
||||
return 'top:7%;left:63%;transform: translate(30%,0);'
|
||||
} else if (id == 10) {
|
||||
return 'top:16.5%;left:75.5%;transform: translate(54%,0);'
|
||||
return 'top:10%;left:65.5%;transform: translate(30%,0);'
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user