Merge pull request 'pc-master' (#258) from pc-master into portal
Reviewed-on: #258
This commit is contained in:
commit
13221b5482
@ -886,5 +886,8 @@ getIccid(data){
|
||||
getInsectChartData(data){
|
||||
return sendPostParamsRequest(`/v1/getInsectChartData`, data)
|
||||
},
|
||||
getGetDeviceRunParam(data){
|
||||
return sendPostParamsRequest(`/v1/getGetDeviceRunParam`, data)
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
@ -33,8 +33,6 @@
|
||||
|
||||
.tips-model {
|
||||
padding: 10px;
|
||||
color: #ff7f00;
|
||||
color: #ff7f00;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@ -1259,7 +1257,6 @@ textarea {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.input-sel-time .el-input__inner {
|
||||
@ -1267,11 +1264,12 @@ textarea {
|
||||
border: 2px solid rgba(0, 186, 255, 0.4);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.input-sel-time .el-input__inner .el-range-input {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.input-btn {
|
||||
|
||||
@ -36,8 +36,7 @@
|
||||
|
||||
.tips-model {
|
||||
padding: 10px;
|
||||
color: #ff7f00;
|
||||
color: #ff7f00;
|
||||
|
||||
color: #fff;
|
||||
|
||||
.tips-model-title {
|
||||
@ -1330,7 +1329,6 @@ textarea {
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
@ -1338,10 +1336,10 @@ textarea {
|
||||
border: 2px solid rgba(0, 186, 255, 0.40);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
color: #fff;
|
||||
.el-range-input {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
color: #fff!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
BIN
src/assets/img/img-13.jpg
Normal file
BIN
src/assets/img/img-13.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 154 KiB |
@ -311,6 +311,151 @@ export function thisWeekTemperature_echart(id, data) {
|
||||
|
||||
]
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
export function pestMonitor_num(id, data) {
|
||||
let chartDom = document.getElementById(id);
|
||||
let myChart = echarts.init(chartDom);
|
||||
var myColor = [
|
||||
"#eb2100",
|
||||
"#eb3600",
|
||||
"#d0570e",
|
||||
"#d0a00e",
|
||||
"#34da62",
|
||||
"#00e9db",
|
||||
"#00c0e9",
|
||||
"#0096f3",
|
||||
"#33CCFF",
|
||||
"#33FFCC",
|
||||
];
|
||||
var header=data.header
|
||||
var dataList=data.data.list[0]
|
||||
// 排序header
|
||||
var headerNames = Object.keys(header).sort().map(key => header[key]);
|
||||
// 排序数据
|
||||
var objValues = Object.keys(header).sort().map(key => Number(dataList[key]) || 0);
|
||||
const maxValue = Math.max(...objValues);
|
||||
const maxList = new Array(objValues.length).fill(maxValue);
|
||||
const minList = new Array(objValues.length).fill(0);
|
||||
var option = {
|
||||
grid: {
|
||||
left: "11%",
|
||||
top: "3%",
|
||||
right: "0%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
show: false,
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
axisTick: "none",
|
||||
axisLine: "none",
|
||||
offset: "27",
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: "12",
|
||||
},
|
||||
},
|
||||
data:headerNames
|
||||
},
|
||||
{
|
||||
axisTick: "none",
|
||||
axisLine: "none",
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: "12",
|
||||
},
|
||||
},
|
||||
data: objValues,
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
nameTextStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: "16",
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(0,0,0,0)",
|
||||
},
|
||||
},
|
||||
data: [],
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "条",
|
||||
type: "bar",
|
||||
yAxisIndex: 0,
|
||||
data: objValues,
|
||||
// label: {
|
||||
// normal: {
|
||||
// show: true,
|
||||
// position: "right",
|
||||
// textStyle: {
|
||||
// color: "#ffffff",
|
||||
// fontSize: "16",
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
barWidth: 6,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
var num = myColor.length;
|
||||
return myColor[params.dataIndex % num];
|
||||
},
|
||||
},
|
||||
},
|
||||
z: 2,
|
||||
},
|
||||
{
|
||||
name: "白框",
|
||||
type: "bar",
|
||||
yAxisIndex: 1,
|
||||
barGap: "-100%",
|
||||
data:maxList,
|
||||
barWidth: 12,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#0e2147",
|
||||
barBorderRadius: 5,
|
||||
},
|
||||
},
|
||||
z: 1,
|
||||
},
|
||||
|
||||
{
|
||||
name: "外圆",
|
||||
type: "scatter",
|
||||
hoverAnimation: false,
|
||||
data: minList,
|
||||
yAxisIndex: 2,
|
||||
symbolSize: 14,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
var num = myColor.length;
|
||||
return myColor[params.dataIndex % num];
|
||||
},
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
z: 2,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
|
||||
1
src/assets/js/mapData.js
Normal file
1
src/assets/js/mapData.js
Normal file
@ -0,0 +1 @@
|
||||
export default {"features":[{"geometry":{"coordinates":[[121.694759,31.411309],[121.694814,31.410775],[121.695937,31.410855],[121.695883,31.411398],[121.694758,31.411311]],"type":"LineString"},"type":"Feature","properties":{}},{"geometry":{"coordinates":[[121.695245,31.409673],[121.695312,31.409294],[121.69597,31.40934],[121.695928,31.409709],[121.695257,31.409663]],"type":"LineString"},"type":"Feature","properties":{}},{"geometry":{"coordinates":[[121.696057,31.409703],[121.696095,31.409358],[121.696776,31.409394],[121.69675,31.409753],[121.696064,31.409704]],"type":"LineString"},"type":"Feature","properties":{}},{"geometry":{"coordinates":[[[121.696013,31.410749],[121.696052,31.41026],[121.696782,31.410319],[121.696747,31.410808],[121.696013,31.410749]]],"type":"Polygon"},"type":"Feature","properties":{}},{"geometry":{"coordinates":[[121.694947,31.410667],[121.694989,31.410171],[121.695972,31.410251],[121.69591,31.410749],[121.694947,31.410673]],"type":"LineString"},"type":"Feature","properties":{}},{"geometry":{"coordinates":[[121.698151,31.408888],[121.698187,31.408636],[121.700038,31.408772],[121.700008,31.409038],[121.698153,31.408888]],"type":"LineString"},"type":"Feature","properties":{}},{"geometry":{"coordinates":[[121.698434,31.410897],[121.698487,31.410465],[121.700263,31.410594],[121.700227,31.411016],[121.698435,31.410893]],"type":"LineString"},"type":"Feature","properties":{}},{"geometry":{"coordinates":[[121.698255,31.410282],[121.698273,31.41009],[121.698288,31.409971],[121.70049,31.410145],[121.700478,31.410303],[121.700445,31.410441],[121.698257,31.410285]],"type":"LineString"},"type":"Feature","properties":{}},{"geometry":{"coordinates":[[121.69812,31.409843],[121.698143,31.409519],[121.700527,31.409692],[121.700479,31.410019],[121.698123,31.409847]],"type":"LineString"},"type":"Feature","properties":{}},{"geometry":{"coordinates":[[121.698114,31.409371],[121.698147,31.409028],[121.700575,31.409207],[121.700542,31.409552],[121.698123,31.409378]],"type":"LineString"},"type":"Feature","properties":{}},{"geometry":{"coordinates":[[121.696878,31.411439],[121.696932,31.410937],[121.697815,31.411001],[121.697767,31.411515],[121.696878,31.411447]],"type":"LineString"},"type":"Feature","properties":{}},{"geometry":{"coordinates":[[121.695977,31.411383],[121.696023,31.410857],[121.696822,31.410916],[121.696769,31.411456],[121.695975,31.411393]],"type":"LineString"},"type":"Feature","properties":{}}],"type":"FeatureCollection"}
|
||||
118
src/components/large-nav.vue
Normal file
118
src/components/large-nav.vue
Normal file
@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div class="large-nav">
|
||||
<div class="nav">
|
||||
<div class="item" :class="active==0?'item_act':''" @click="largeScreen">
|
||||
|
||||
<img v-if="active==0" src="../assets/img/nav1_act.png" alt="" />
|
||||
<img v-else src="../assets/img/nav1.png" alt="" />
|
||||
<span>基地总览</span>
|
||||
</div>
|
||||
<div class="item" :class="active==1?'item_act':''" @click="largeScreen2">
|
||||
<img v-if="active==1" src="../assets/img/nav4_act.png" alt="" />
|
||||
<img v-else src="../assets/img/nav4.png" alt="" />
|
||||
<span>监控设备</span>
|
||||
</div>
|
||||
<div class="item" :class="active==2?'item_act':''" @click="largeScreen3">
|
||||
<img v-if="active==2" src="../assets/img/nav2_act.png" alt="" />
|
||||
<img v-else src="../assets/img/nav2.png" alt="" />
|
||||
<span>虫情监测</span>
|
||||
</div>
|
||||
<div class="item" :class="active==3?'item_act':''" @click="largeScreen4">
|
||||
<img v-if="active==3" src="../assets/img/nav3_act.png" alt="" />
|
||||
<img v-else src="../assets/img/nav3.png" alt="" />
|
||||
<span>智能施肥机</span>
|
||||
</div>
|
||||
<div class="item" :class="active==4?'item_act':''" @click="toBackPage">
|
||||
<img v-if="active==4" src="../assets/img/nav5_act.png" alt="" />
|
||||
<img v-else src="../assets/img/nav5.png" alt="" />
|
||||
<span>环境监测</span>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
active: {
|
||||
type: Number,
|
||||
default:0
|
||||
},
|
||||
},
|
||||
data(){
|
||||
return {}
|
||||
},
|
||||
mounted(){},
|
||||
methods:{
|
||||
largeScreen() {
|
||||
this.$router.push({ path: "/largeScreen" });
|
||||
},
|
||||
largeScreen2() {
|
||||
this.$router.push({ path: "/largeScreen2" });
|
||||
},
|
||||
largeScreen3() {
|
||||
this.$router.push({ path: "/largeScreen3" });
|
||||
},
|
||||
largeScreen4() {
|
||||
this.$router.push({ path: "/largeScreen4" });
|
||||
},
|
||||
toBackPage() {
|
||||
this.$router.push({ path: "/realTime" });
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.nav {
|
||||
// width: 2.5rem;
|
||||
position: absolute;
|
||||
z-index: 999999;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
bottom: 0.17rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 .2rem;
|
||||
cursor: pointer;
|
||||
>img {
|
||||
width: 1.08rem;
|
||||
height: 0.91rem;
|
||||
}
|
||||
|
||||
>span {
|
||||
font-size: 0.2rem;
|
||||
font-family: AlibabaPuHuiTiB;
|
||||
font-weight: bold;
|
||||
color: #b1eaff;
|
||||
}
|
||||
}
|
||||
|
||||
.item_act {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
>img {
|
||||
width: 1.08rem;
|
||||
height: 0.91rem;
|
||||
}
|
||||
|
||||
>span {
|
||||
font-size: 0.2rem;
|
||||
font-family: AlibabaPuHuiTiB;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -225,6 +225,8 @@ module.exports = {
|
||||
},
|
||||
|
||||
realTime: {
|
||||
due:'Due',
|
||||
Expiration:'Expiration Date',
|
||||
target: 'Target',
|
||||
average: 'Avg',
|
||||
title: 'Real-time Data',
|
||||
@ -351,7 +353,9 @@ module.exports = {
|
||||
growthStage: "Growth Stage",
|
||||
operations: "Operations",
|
||||
edit: "Edit",
|
||||
delete: "Delete"
|
||||
delete: "Delete",
|
||||
|
||||
role:'Role',
|
||||
},
|
||||
dialog: {
|
||||
title: "Edit",
|
||||
@ -454,6 +458,7 @@ module.exports = {
|
||||
nickname: "Nickname",
|
||||
phone: "Phone Number",
|
||||
changePassword: "Change Password",
|
||||
role:'Role',
|
||||
},
|
||||
|
||||
dialogs: {
|
||||
|
||||
@ -232,6 +232,8 @@ module.exports = {
|
||||
},
|
||||
// 实时页面
|
||||
realTime: {
|
||||
due:'即将到期',
|
||||
Expiration:'到期时间',
|
||||
target: '目标',
|
||||
average: '平均',
|
||||
title: '实时数据',
|
||||
@ -360,7 +362,8 @@ module.exports = {
|
||||
growthStage: "生长阶段",
|
||||
operations: "操作",
|
||||
edit: "编辑",
|
||||
delete: "删除"
|
||||
delete: "删除",
|
||||
role:'角色',
|
||||
},
|
||||
dialog: {
|
||||
title: "编辑",
|
||||
@ -464,6 +467,7 @@ module.exports = {
|
||||
changePassword: "修改密码",
|
||||
deviceCode: "设备code码",
|
||||
deviceType: "设备类型",
|
||||
role:'角色',
|
||||
},
|
||||
|
||||
dialogs: {
|
||||
|
||||
@ -43,6 +43,18 @@ const routes = [
|
||||
path: '/largeScreen1',
|
||||
name: 'largeScreen1',
|
||||
component: () => import('../views/page/largeScreen1.vue')
|
||||
},{
|
||||
path: '/largeScreen2',
|
||||
name: 'largeScreen2',
|
||||
component: () => import('../views/page/largeScreen2.vue')
|
||||
},{
|
||||
path: '/largeScreen3',
|
||||
name: 'largeScreen3',
|
||||
component: () => import('../views/page/largeScreen3.vue')
|
||||
},{
|
||||
path: '/largeScreen4',
|
||||
name: 'largeScreen4',
|
||||
component: () => import('../views/page/largeScreen4.vue')
|
||||
},
|
||||
// 虫情查看的
|
||||
{
|
||||
|
||||
@ -232,7 +232,6 @@ export default {
|
||||
},
|
||||
|
||||
deviceType: "",
|
||||
deviceSel: [],
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
|
||||
@ -225,10 +225,7 @@ export default {
|
||||
"id": ''
|
||||
},
|
||||
confirmPwd: '',
|
||||
typeSelList: [],
|
||||
|
||||
deviceType:'',
|
||||
deviceSel: [],
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
|
||||
@ -200,11 +200,12 @@ export default {
|
||||
return {
|
||||
inputData: [],
|
||||
typeList1: [
|
||||
{ label:this.$t('heatFan.gearOptions.gear0'), value: 0 },
|
||||
{ label:this.$t('heatFan.gearOptions.gear1',{index:1}), value: 1 },
|
||||
{ label:this.$t('heatFan.gearOptions.gear1',{index:2}), value: 2 },
|
||||
{ label:this.$t('heatFan.gearOptions.gear1',{index:3}), value: 3 },
|
||||
{ label:this.$t('heatFan.gearOptions.gear1',{index:4}), value: 4 },
|
||||
{ label:this.$t('heatFan.gear0'), value: 0 },
|
||||
{ label:this.$t('heatFan.gear1',{index:1}), value: 1 },
|
||||
{ label:this.$t('heatFan.gear1',{index:2}), value: 2 },
|
||||
{ label:this.$t('heatFan.gear1',{index:3}), value: 3 },
|
||||
{ label:this.$t('heatFan.gear1',{index:4}), value: 4 },
|
||||
{ label:this.$t('heatFan.gear1',{index:5}), value: 5 },
|
||||
],
|
||||
typeList2: [
|
||||
{ label: this.$t('realTime.heatingMode'), value: 1 },
|
||||
|
||||
@ -671,7 +671,7 @@ export default {
|
||||
warnModel: true,
|
||||
modelPassword:'',
|
||||
sensorType: '',
|
||||
typeList1: [{ label: this.$t('intrinsicParameter.averageSoilHumidity', {index: 1}), value: 0 },
|
||||
typeList1: [{ label: this.$t('intrinsicParameterSoil.averageSoilHumidity', {index: 1}), value: 0 },
|
||||
{ label: this.$t('intrinsicParameterSoil.soilHumidityOptionLabel', { index: 1 }), value: 1 },
|
||||
{ label: this.$t('intrinsicParameterSoil.soilHumidityOptionLabel', { index: 2 }), value: 2 },
|
||||
{ label: this.$t('intrinsicParameterSoil.soilHumidityOptionLabel', { index: 3 }), value: 3 },
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div class="park" v-if="limitUserId == 2" @click="handlerOther">{{ other_show ? '后退' : '园区简介' }}</div>
|
||||
<div class="other" v-show="other_show"></div>
|
||||
<div class="kuang">
|
||||
<div class="title"> {{ limitUserId == 9 ? '甘井设施农业大数据云平台' : '温室智慧云数据统计' }}</div>
|
||||
<div class="title"> {{getName()}}</div>
|
||||
<!-- <div class="auto_play">
|
||||
<span :class="autoPlay ? '' : 'act'" @click="autoPlay1">手动播放</span>
|
||||
<span :class="autoPlay ? 'act' : ''" @click="autoPlay2">自动播放</span>
|
||||
@ -20,8 +20,8 @@
|
||||
<span>{{ time.time }}</span>
|
||||
</div>
|
||||
<el-button class="large-btn" @click="toBackPage" type="primary" v-if="limitUserId==9">{{$t('text.return')}}</el-button>
|
||||
<div class="nav" v-if="limitUserId!=9">
|
||||
<div class="item">
|
||||
<div class="nav" v-if="limitUserId!=9 && limitUserId!=13">
|
||||
<div class="item" >
|
||||
<img src="../../assets/img/nav1_act.png" alt="" />
|
||||
<span>大数据平台</span>
|
||||
</div>
|
||||
@ -38,6 +38,25 @@
|
||||
<span>市场行情</span>
|
||||
</div>
|
||||
</div>
|
||||
<largeNav :active="0" v-if="limitUserId==13"></largeNav>
|
||||
<!-- <div class="nav" >
|
||||
<div class="item" >
|
||||
<img src="../../assets/img/nav1_act.png" alt="" />
|
||||
<span>基地总览</span>
|
||||
</div>
|
||||
<div class="item item_act" @click="toBackPage">
|
||||
<img src="../../assets/img/nav5.png" alt="" />
|
||||
<span>环境监测</span>
|
||||
</div>
|
||||
<div class="item item_act">
|
||||
<img src="../../assets/img/nav4.png" alt="" />
|
||||
<span>监控设备</span>
|
||||
</div>
|
||||
<div class="item item_act">
|
||||
<img src="../../assets/img/nav2.png" alt="" />
|
||||
<span>虫情监测</span>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="content">
|
||||
<div class="left" v-show="limitUserId != 5">
|
||||
<div class="weatherStation" v-if="limitUserId != 12&&limitUserId != 9"></div>
|
||||
@ -126,7 +145,7 @@
|
||||
</div>
|
||||
</vue-seamless>
|
||||
</div>
|
||||
<div class="map">
|
||||
<div class="map" :class="`map1-${limitUserId}`">
|
||||
<div class="map1">
|
||||
<!-- 丽水 -->
|
||||
<div class="drag_box" ref="drag_box" v-show="limitUserId == 1">
|
||||
@ -250,20 +269,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="right" v-if="limitUserId == 13">
|
||||
<div class="e_title">虫情图片</div>
|
||||
<div class="right-image-list">
|
||||
<div
|
||||
class="image-div"
|
||||
v-for="(item, index) in imageList"
|
||||
:key="index"
|
||||
>
|
||||
<el-image :src="item.thumbnailUrl" :preview-src-list="srcList">
|
||||
<div slot="error" class="image-slot">
|
||||
<i class="el-icon-picture-outline"></i>
|
||||
</div>
|
||||
</el-image>
|
||||
<div class="image-time">{{ item.shootTime }}</div>
|
||||
</div>
|
||||
<div class="e_title">项目简介</div>
|
||||
<div class="right-aboutUs ">
|
||||
<img src="@/assets/img/img-13.jpg" alt="">
|
||||
<div class="scroll">上海前卫柑桔有限公司成立于1992年，地处长江入海口的长兴岛上，位于青草沙水源保护区和长兴岛郊野公园内。是目前我国规模最大、集约化程度最高的柑桔生产经营企业之一。也是上海市首批通过国家认证的绿色食品，通过了HACCP国际食品安全管理体系认证，并多次在全国柑桔评比中获得金奖、银奖和“农业部优质果品”称号。公司主营业务为柑桔生产和销售，兼营场地租赁、农业旅游、衍生品开发、技术推广等业务。 </div>
|
||||
</div>
|
||||
<div class="e_title">虫情趋势图</div>
|
||||
<div class="right-charts" id="pest-charts"></div>
|
||||
@ -386,7 +395,7 @@
|
||||
<img src="../../assets/img/i_title_img.png" alt="" />
|
||||
<span>风机</span>
|
||||
<span class="line"></span>
|
||||
<span>$t('text.invalid')</span>
|
||||
<span>{{$t('text.invalid')}}</span>
|
||||
<span class="line"></span>
|
||||
<span>菜单</span>
|
||||
</div>
|
||||
@ -432,7 +441,7 @@
|
||||
<img src="../../assets/img/i_title_img.png" alt="" />
|
||||
<span>{{ item.name }}</span>
|
||||
<span class="line"></span>
|
||||
<span>$t('text.invalid')</span>
|
||||
<span>{{$t('text.invalid')}}</span>
|
||||
<span class="line"></span>
|
||||
<span>位置{{ item.progress }}%</span>
|
||||
<span>菜单</span>
|
||||
@ -458,7 +467,7 @@
|
||||
<img src="../../assets/img/i_title_img.png" alt="" />
|
||||
<span>{{ item.title }}</span>
|
||||
<span class="line"></span>
|
||||
<span>$t('text.invalid')</span>
|
||||
<span>{{$t('text.invalid')}}</span>
|
||||
<span class="line"></span>
|
||||
<span>菜单</span>
|
||||
</div>
|
||||
@ -483,7 +492,7 @@
|
||||
<img src="../../assets/img/i_title_img.png" alt="" />
|
||||
<span>{{ item.title }}</span>
|
||||
<span class="line"></span>
|
||||
<span>$t('text.invalid')</span>
|
||||
<span>{{$t('text.invalid')}}</span>
|
||||
<span class="line"></span>
|
||||
<span>菜单</span>
|
||||
</div>
|
||||
@ -508,7 +517,7 @@
|
||||
<img src="../../assets/img/i_title_img.png" alt="" />
|
||||
<span>{{ item.title }}</span>
|
||||
<span class="line"></span>
|
||||
<span>$t('text.invalid')</span>
|
||||
<span>{{$t('text.invalid')}}</span>
|
||||
<span class="line"></span>
|
||||
<span>菜单</span>
|
||||
</div>
|
||||
@ -541,11 +550,13 @@ import vueSeamless from "vue-seamless-scroll";
|
||||
|
||||
import axios from "axios";
|
||||
|
||||
import mapData from "@/assets/js/mapData.js";
|
||||
import { changeLanguage, getLanguage } from '@/utils/language'
|
||||
import { pestLine } from "@/assets/js/charts";
|
||||
import largeNav from '@/components/large-nav.vue'
|
||||
export default {
|
||||
name: "largeScreen",
|
||||
components: { vueSeamless },
|
||||
components: { vueSeamless,largeNav },
|
||||
computed: {
|
||||
defaultOption() {
|
||||
return {
|
||||
@ -723,10 +734,21 @@ export default {
|
||||
},
|
||||
watch:{
|
||||
'$i18n.locale'() {
|
||||
this.dataInit()
|
||||
let userInfo = JSON.parse(localStorage.getItem("userInfo"));
|
||||
|
||||
this.dataInit(userInfo.userid, this.limitUserId)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getName(){
|
||||
if(this.limitUserId==9){
|
||||
return '甘井设施农业大数据云平台'
|
||||
}else if(this.limitUserId==13){
|
||||
return '上海前卫柑桔大数据平台'
|
||||
}else{
|
||||
return '温室智慧云数据统计'
|
||||
}
|
||||
},
|
||||
// id9的甘井设施农业大数据云平台
|
||||
timeInit() {
|
||||
const start = new Date()
|
||||
@ -746,7 +768,6 @@ export default {
|
||||
return formattedTime
|
||||
},
|
||||
getData() {
|
||||
console.log(this.dateRange);
|
||||
var data = {
|
||||
equipmentId:'2024070113400048',
|
||||
startTime: this.getdataTime(this.dateRange[0]),
|
||||
@ -798,7 +819,7 @@ export default {
|
||||
// 根据用户id查询对应的设备大数据信息
|
||||
dataInit(userid, limitUserId) {
|
||||
this.api.Bigdata_getAllControl(userid).then((res) => {
|
||||
// console.log('根据用户id查询对应的设备大数据信息', res);
|
||||
console.log('根据用户id查询对应的设备大数据信息', res);
|
||||
this.dataList = res.data.data;
|
||||
setTimeout(() => {
|
||||
new Swiper(".middle_disasterWarningAnalysis", {
|
||||
@ -935,6 +956,7 @@ export default {
|
||||
this.getWeatherData(list[0].deviceId);
|
||||
// 长兴前卫柑桔新优品种扩繁基地 id为13 有单独的虫情接口
|
||||
if(limitUserId == 13){
|
||||
this.mapInit()
|
||||
this.getImage();
|
||||
this.getCharts();
|
||||
}
|
||||
@ -1282,7 +1304,7 @@ export default {
|
||||
this.dataInit(userId, this.limitUserId);
|
||||
}else if (this.limitUserId == 13) {
|
||||
// this.drag_boxHandler13();
|
||||
this.mapInit()
|
||||
|
||||
this.dataInit(userId, this.limitUserId);
|
||||
}
|
||||
|
||||
@ -1290,16 +1312,70 @@ export default {
|
||||
});
|
||||
},
|
||||
mapInit(){
|
||||
const that = this
|
||||
const map = new AMap.Map("map-13", {
|
||||
zoom: 18,
|
||||
center: [121.696506, 31.410799],
|
||||
center: [121.697751,31.410188],
|
||||
});
|
||||
var satelliteLayer = new AMap.TileLayer.Satellite();
|
||||
var roadNetLayer = new AMap.TileLayer.RoadNet();
|
||||
// map.setLayers([]); // 先清空现有图层
|
||||
satelliteLayer.setMap(map); // 加载卫星图层
|
||||
// roadNetLayer.setMap(map); // 加载路网图层（覆盖在卫星图上）
|
||||
// map.on("click", function (e) {
|
||||
// // 获取点击的经纬度
|
||||
// const lnglat = e.lnglat; // 返回 AMap.LngLat 对象
|
||||
// console.log("点击的经纬度：", lnglat.toString()); // 输出：121.696506,31.410799
|
||||
|
||||
// // 也可以直接获取经度和纬度
|
||||
// console.log("经度：", lnglat.getLng());
|
||||
// console.log("纬度：", lnglat.getLat());
|
||||
|
||||
// // 弹出提示框（可选）
|
||||
// const infoWindow = new AMap.InfoWindow({
|
||||
// content: `位置：${lnglat.getLng()}, ${lnglat.getLat()}`,
|
||||
// offset: new AMap.Pixel(0, -30),
|
||||
// });
|
||||
// infoWindow.open(map, lnglat);
|
||||
// });
|
||||
|
||||
|
||||
// 添加画范围
|
||||
var listall = mapData.features;
|
||||
listall.forEach((el, index) => {
|
||||
var polygon = new AMap.Polygon({
|
||||
map: map,
|
||||
path: el.geometry.coordinates, //设置多边形边界路径
|
||||
strokeColor: '#ff0000', //线颜色
|
||||
strokeOpacity: 1, //线透明度
|
||||
strokeWeight: 2, //线宽
|
||||
fillColor: '#ff0000', //填充色
|
||||
fillOpacity: 0.5, //填充透明度
|
||||
});
|
||||
polygon.on("click", function (e) {
|
||||
// 在点击事件处理程序中获取点击位置的经纬度坐标
|
||||
var lng = e.lnglat.getLng(); // 获取经度
|
||||
var lat = e.lnglat.getLat(); // 获取纬度
|
||||
|
||||
// 输出经纬度坐标
|
||||
console.log("点击位置的经度：" + lng);
|
||||
console.log("点击位置的纬度：" + lat);
|
||||
});
|
||||
polygon.on("mouseover", (e) => {
|
||||
// 点击之后覆盖物的样式
|
||||
// console.log(e,index);
|
||||
});
|
||||
// 鼠标移出事件
|
||||
polygon.on("mouseout", () => {
|
||||
// 鼠标移开覆盖物之后覆盖物的样式
|
||||
// console.log('离开');
|
||||
});
|
||||
|
||||
//将绘制的面对象添加到地图上
|
||||
map.add(polygon);
|
||||
});
|
||||
|
||||
|
||||
// 添加标点
|
||||
const iconUrl = require("@/assets/img/axis1.png");
|
||||
const icon = new AMap.Icon({
|
||||
@ -1307,15 +1383,23 @@ mapInit(){
|
||||
size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以根据需要进行调整或忽略
|
||||
imageSize: new AMap.Size(35, 43) // 设置实际显示的大小为35x43像素
|
||||
});
|
||||
|
||||
const marker = new AMap.Marker({
|
||||
position:new AMap.LngLat(121.696506, 31.410799),
|
||||
this.dataList.forEach((el,index)=>{
|
||||
if(el.xaxis&&el.yaxis){
|
||||
const marker = new AMap.Marker({
|
||||
position:new AMap.LngLat(el.xaxis,el.yaxis),
|
||||
icon: icon,
|
||||
title: "上海前卫柑桔有限公司",
|
||||
offset: new AMap.Pixel(-17.5, -40), //以 icon 的 [center bottom] 为原点
|
||||
});
|
||||
|
||||
map.add(marker);
|
||||
marker.on("click", function (e) {
|
||||
|
||||
that.$router.push({ path: "/largeScreen1" });
|
||||
});
|
||||
map.add(marker);
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
},
|
||||
// autoPlay1() {
|
||||
// this.autoPlay = false;
|
||||
@ -2219,7 +2303,7 @@ window.open("http://localhost:8080/");
|
||||
}
|
||||
|
||||
.nav {
|
||||
width: 2.5rem;
|
||||
// width: 2.5rem;
|
||||
position: absolute;
|
||||
z-index: 999999;
|
||||
left: 50%;
|
||||
@ -2233,7 +2317,8 @@ window.open("http://localhost:8080/");
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
margin: 0 .2rem;
|
||||
cursor: pointer;
|
||||
>img {
|
||||
width: 1.08rem;
|
||||
height: 0.91rem;
|
||||
@ -2521,6 +2606,12 @@ window.open("http://localhost:8080/");
|
||||
blue 80%,
|
||||
transparent 90%,
|
||||
transparent 100%);
|
||||
&.map1-13{
|
||||
-webkit-mask-image: unset;
|
||||
.map1{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.map1 {
|
||||
width: 90%;
|
||||
@ -2543,7 +2634,7 @@ window.open("http://localhost:8080/");
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
.drag_box1 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -2743,8 +2834,8 @@ window.open("http://localhost:8080/");
|
||||
z-index: 10;
|
||||
-webkit-mask-image: linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
blue 13%,
|
||||
blue 87%,
|
||||
blue 27%,
|
||||
blue 73%,
|
||||
transparent 100%);
|
||||
.drag_img {
|
||||
width: 100%;
|
||||
@ -3430,10 +3521,25 @@ window.open("http://localhost:8080/");
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.right-image-list,.right-charts{
|
||||
.right-image-list,.right-charts,.right-aboutUs{
|
||||
width: 100%;
|
||||
height: calc((100% - .38rem) / 2);
|
||||
}
|
||||
.right-aboutUs{
|
||||
color:#fff;
|
||||
line-height:28px;
|
||||
margin-top: .2rem;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 1.5rem;
|
||||
object-fit: cover
|
||||
}
|
||||
>div{
|
||||
text-indent: 2em;
|
||||
font-size: .16rem;
|
||||
height: calc(100% - 1.7rem);
|
||||
}
|
||||
}
|
||||
.liveVideo {
|
||||
width: 4rem;
|
||||
height: 0.43rem;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<div class="kuang">
|
||||
<div class="title"> {{ limitUserId == 9 ? '甘井设施农业大数据云平台' : '温室智慧云数据统计' }}</div>
|
||||
<div class="title"> {{getName()}}</div>
|
||||
|
||||
<div class="yuan" @click="toBack">
|
||||
<img src="../../assets/img/small.png" alt="" />
|
||||
@ -907,6 +907,15 @@ export default {
|
||||
clearInterval(this.timer2) && this.timer2;
|
||||
},
|
||||
methods: {
|
||||
getName(){
|
||||
if(this.limitUserId==9){
|
||||
return '甘井设施农业大数据云平台'
|
||||
}else if(this.limitUserId==13){
|
||||
return '上海前卫柑桔大数据平台'
|
||||
}else{
|
||||
return '温室智慧云数据统计'
|
||||
}
|
||||
},
|
||||
// 根据用户id查询对应的设备大数据信息
|
||||
dataInit(userid) {
|
||||
this.api.Bigdata_getAllControl(userid).then((res) => {
|
||||
|
||||
336
src/views/page/largeScreen2.vue
Normal file
336
src/views/page/largeScreen2.vue
Normal file
@ -0,0 +1,336 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<div class="kuang">
|
||||
<div class="title">上海前卫柑桔大数据平台</div>
|
||||
<div class="calendar">
|
||||
<img src="../../assets/img/calendar.png" alt="" />
|
||||
<span>{{ getNowTime() }}</span>
|
||||
<span class="line"></span>
|
||||
<span>{{ time.week }}</span>
|
||||
<span class="line"></span>
|
||||
<span>{{ time.time }}</span>
|
||||
</div>
|
||||
<largeNav :active="1"></largeNav>
|
||||
<div class="content scroll">
|
||||
<div
|
||||
class="video monitor"
|
||||
v-for="(item, index) in videoList"
|
||||
:key="index"
|
||||
:id="'monitor' + index"
|
||||
>
|
||||
<div
|
||||
ref="videoPlayer"
|
||||
class="video-js"
|
||||
:id="`video-js${index}`"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="pagination">
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page.sync="currentPage"
|
||||
:page-size="12"
|
||||
layout="total, prev, pager, next"
|
||||
:total="14"
|
||||
>
|
||||
</el-pagination>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getnowtime } from "../../assets/js/nowTime";
|
||||
import largeNav from "@/components/large-nav.vue";
|
||||
import EZUIKit from "ezuikit-js";
|
||||
export default {
|
||||
name: "largeScreen2",
|
||||
|
||||
components: { largeNav },
|
||||
data() {
|
||||
return {
|
||||
typeList: [],
|
||||
limitUserId: 13,
|
||||
time: {},
|
||||
videoList: [],
|
||||
list1: [],
|
||||
list2: [],
|
||||
currentPage: 1,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// this.login();
|
||||
|
||||
this.getTime();
|
||||
this.typeList = this.$store.state.typeList;
|
||||
this.list1 = [
|
||||
{ cameraid: "FT5712546", channelid: 1, player: null },
|
||||
{ cameraid: "FT5712546", channelid: 2, player: null },
|
||||
{ cameraid: "FT5712546", channelid: 3, player: null },
|
||||
{ cameraid: "FT5712546", channelid: 4, player: null },
|
||||
{ cameraid: "FT5712546", channelid: 5, player: null },
|
||||
{ cameraid: "FT5712546", channelid: 6, player: null },
|
||||
{ cameraid: "FT5712546", channelid: 7, player: null },
|
||||
{ cameraid: "FT5712546", channelid: 8, player: null },
|
||||
{ cameraid: "FT5712546", channelid: 9, player: null },
|
||||
{ cameraid: "FT5712546", channelid: 10, player: null },
|
||||
{ cameraid: "FT5712546", channelid: 11, player: null },
|
||||
{ cameraid: "FT5712546", channelid: 12, player: null },
|
||||
{ cameraid: "FT5712546", channelid: 13, player: null },
|
||||
{ cameraid: "FT5712546", channelid: 14, player: null },
|
||||
];
|
||||
this.list2 = [
|
||||
|
||||
];
|
||||
setTimeout(() => {
|
||||
this.dataInit();
|
||||
}, 0);
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.videoList.forEach((el, index) => {
|
||||
// 销毁播放器
|
||||
if (el.player) {
|
||||
// this.player.dispose();
|
||||
el.player.stop();
|
||||
el.player.destroy();
|
||||
el.player = null;
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
// 根据用户id查询对应的设备大数据信息
|
||||
dataInit(userid) {
|
||||
this.currentPage = 1;
|
||||
this.videoList = this.list1;
|
||||
this.videoList.forEach((el, index) => {
|
||||
this.getVideoData(el.cameraid, el.channelid, index);
|
||||
});
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
console.log(`每页 ${val} 条`);
|
||||
},
|
||||
|
||||
handleCurrentChange(val) {
|
||||
this.videoList.forEach((el, index) => {
|
||||
// 销毁播放器
|
||||
if (el.player) {
|
||||
// this.player.dispose();
|
||||
el.player.stop();
|
||||
el.player.destroy();
|
||||
el.player = null;
|
||||
}
|
||||
});
|
||||
setTimeout(() => {
|
||||
if (val == 1) {
|
||||
this.videoList = this.list1;
|
||||
} else {
|
||||
this.videoList = this.list2;
|
||||
}
|
||||
this.videoList.forEach((el, index) => {
|
||||
this.getVideoData(el.cameraid, el.channelid, index);
|
||||
});
|
||||
}, 0);
|
||||
},
|
||||
|
||||
// 数据单位
|
||||
getTypeList(val) {
|
||||
let typeList1 = [];
|
||||
typeList1 = this.typeList.filter((item) => {
|
||||
return item.value == val;
|
||||
});
|
||||
return typeList1[0].unit;
|
||||
},
|
||||
|
||||
// 获取本地的userid和token
|
||||
login() {
|
||||
let userInfo = JSON.parse(localStorage.getItem("userInfo"));
|
||||
|
||||
this.dataInit(userInfo.userid);
|
||||
},
|
||||
|
||||
getTime() {
|
||||
this.time = getnowtime();
|
||||
// console.log(this.time);
|
||||
const that = this;
|
||||
setInterval(() => {
|
||||
that.time = getnowtime();
|
||||
}, 1000);
|
||||
},
|
||||
// 获取摄像头得地址 Copy
|
||||
getVideoData(cameraid, channelid, index) {
|
||||
this.api.camera_gethls(cameraid, channelid).then((res) => {
|
||||
// console.log("获取摄像头得地址 Copy", res);
|
||||
if (res.data.code == 200) {
|
||||
// this.url = res.data.data.ezopen
|
||||
this.createVideoNew(
|
||||
res.data.data.accesstoken,
|
||||
res.data.data.ezopen,
|
||||
index
|
||||
);
|
||||
// this.createVideo()
|
||||
}
|
||||
});
|
||||
},
|
||||
createVideoNew(accessToken, url, index) {
|
||||
// console.log(accessToken, url, index, 111);
|
||||
// divW和divH是获取了父级宽高 使播放容器能铺满div
|
||||
let divW = document.getElementById("monitor" + index).clientWidth;
|
||||
let divH = document.getElementById("monitor" + index).clientHeight;
|
||||
this.videoList[index].player = new EZUIKit.EZUIKitPlayer({
|
||||
id: "video-js" + index, // 视频容器ID
|
||||
accessToken: accessToken,
|
||||
url: url,
|
||||
// 官方url例子：ezopen://open.ys7.com/G39444019/1.live 也可并非.live结尾 详见GitHub
|
||||
// 播放主题 simple-极简版; standard-标准版; security-安防版; voice-语音版; 自定义主题详见GitHub
|
||||
template: "security",
|
||||
useHardDev: true, // 开启高性能模式 依赖需高于7.7.x 截止到2023.11.7 建议保持最新版本为7.7.6
|
||||
// plugin: ["talk"], // 加载插件，talk-对讲 非必填
|
||||
width: divW, // 播放容器宽高 也可以直接设置成数字 如 1920 单位是px
|
||||
height: divH, // 播放容器宽高 也可以直接设置成数字 如 1080 单位是px
|
||||
});
|
||||
// console.log(this.player);
|
||||
},
|
||||
getNowTime() {
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = (now.getMonth() + 1).toString().padStart(2, "0");
|
||||
const day = now.getDate().toString().padStart(2, "0");
|
||||
const formattedDate = `${year}.${month}.${day}`;
|
||||
return formattedDate;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.about {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("../../assets/img/bg.png") center no-repeat;
|
||||
background-size: 100% 100%;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 0.1rem;
|
||||
|
||||
.kuang {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("../../assets/img/kuang.png") center no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 1rem;
|
||||
box-sizing: border-box;
|
||||
padding-top: 0.06rem;
|
||||
font-size: 0.54rem;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
font-weight: 400;
|
||||
color: #eff8fc;
|
||||
line-height: 0.54rem;
|
||||
opacity: 0.89;
|
||||
text-shadow: 0.01 0.1rem 0.2rem rgba(0, 51, 103, 0.25);
|
||||
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#ffffff 45%,
|
||||
#e9f8ff 90%,
|
||||
#77baff 100%
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yuan {
|
||||
width: 0.56rem;
|
||||
height: 0.56rem;
|
||||
background: url("../../assets/img/yuan_bg.png") center no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: 0.53rem;
|
||||
left: 0.71rem;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
> img {
|
||||
width: 0.2rem;
|
||||
height: 0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar {
|
||||
width: 4rem;
|
||||
height: 0.3rem;
|
||||
position: absolute;
|
||||
top: 0.33rem;
|
||||
right: 0.66rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
> img {
|
||||
width: 0.28rem;
|
||||
height: 0.3rem;
|
||||
}
|
||||
|
||||
> span:nth-child(2) {
|
||||
font-size: 0.24rem;
|
||||
font-family: PingFang-SC-Bold;
|
||||
font-weight: bold;
|
||||
color: #7abaff;
|
||||
}
|
||||
|
||||
> span:nth-child(4) {
|
||||
font-size: 0.2rem;
|
||||
font-family: PingFang-SC-Bold;
|
||||
font-weight: bold;
|
||||
color: #7abaff;
|
||||
}
|
||||
|
||||
> span:nth-child(6) {
|
||||
font-size: 0.3rem;
|
||||
font-family: PingFang-SC-Bold;
|
||||
font-weight: bold;
|
||||
color: #7abaff;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 0.02rem;
|
||||
height: 0.3rem;
|
||||
background: #ffffff;
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
padding: 0 1rem;
|
||||
height: calc(100% - 2.5rem);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-row-gap: 0.2rem; //纵向间隔
|
||||
grid-column-gap: 0.2rem; //横向间隔
|
||||
.video {
|
||||
height: calc((100vh - 3.3rem) / 3);
|
||||
.video-js {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pagination {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding-right: 100px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
2729
src/views/page/largeScreen3.vue
Normal file
2729
src/views/page/largeScreen3.vue
Normal file
File diff suppressed because it is too large
Load Diff
1115
src/views/page/largeScreen4.vue
Normal file
1115
src/views/page/largeScreen4.vue
Normal file
File diff suppressed because it is too large
Load Diff
@ -36,7 +36,9 @@
|
||||
</div>
|
||||
<!-- 控制器/施肥机 -->
|
||||
<div class="page-content new-data" v-else :class="deviceName !=1 ? 'control-page' : ''">
|
||||
<div class="page-iccid" v-if="validateIccid($store.state.equipmentList[indexs - 1].iccidcode)"><span>{{$t('realTime.iccid')}}:{{$store.state.equipmentList[indexs - 1].iccidcode?$store.state.equipmentList[indexs - 1].iccidcode:''}}</span> <span>到期时间: </span><span :class="getPackageTimeColor()?'color-red':''">{{getPackageTime()}}<span v-if="getPackageTimeColor()">(即将到期)</span></span> </div>
|
||||
<div class="page-iccid" v-if="validateIccid($store.state.equipmentList[indexs - 1].iccidcode)"><span>{{$t('realTime.iccid')}}:{{$store.state.equipmentList[indexs - 1].iccidcode?$store.state.equipmentList[indexs - 1].iccidcode:''}}</span>
|
||||
<span v-if="getPackageTimeColor()">{{$t('realTime.Expiration')}}: </span>
|
||||
<span v-if="getPackageTimeColor()" :class="getPackageTimeColor()?'color-red':''">{{getPackageTime()}}<span v-if="getPackageTimeColor()">({{$t('realTime.due')}})</span></span> </div>
|
||||
<div class="control-view" v-if="deviceName !=1">
|
||||
<div class="title" @click='weatherModel = true'>{{$t('index.weatherStation')}}:</div>
|
||||
<vue-seamless class="control-list" :data="controlList" :class-option="defaultOption1">
|
||||
|
||||
@ -402,12 +402,12 @@ export default {
|
||||
loading:null,
|
||||
pageName:'湿帘风机',
|
||||
typeList1: [
|
||||
{ label:this.$t('heatFan.gearOptions.gear0'), value: 0 },
|
||||
{ label:this.$t('heatFan.gearOptions.gear1',{index:1}), value: 1 },
|
||||
{ label:this.$t('heatFan.gearOptions.gear1',{index:2}), value: 2 },
|
||||
{ label:this.$t('heatFan.gearOptions.gear1',{index:3}), value: 3 },
|
||||
{ label:this.$t('heatFan.gearOptions.gear1',{index:4}), value: 4 },
|
||||
{ label:this.$t('heatFan.gearOptions.gear1',{index:5}), value: 5 },
|
||||
{ label:this.$t('heatFan.gear0'), value: 0 },
|
||||
{ label:this.$t('heatFan.gear1',{index:1}), value: 1 },
|
||||
{ label:this.$t('heatFan.gear1',{index:2}), value: 2 },
|
||||
{ label:this.$t('heatFan.gear1',{index:3}), value: 3 },
|
||||
{ label:this.$t('heatFan.gear1',{index:4}), value: 4 },
|
||||
{ label:this.$t('heatFan.gear1',{index:5}), value: 5 },
|
||||
],
|
||||
inputDataNew: [],
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user