commit
3be20bad81
122
src/api/index.js
122
src/api/index.js
|
|
@ -1,6 +1,7 @@
|
|||
import axios from "axios";
|
||||
// import qs from 'qs'
|
||||
import router from '../router/index'
|
||||
|
||||
function sendGetRequest(url, data) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
axios.get(url, {
|
||||
|
|
@ -13,12 +14,14 @@ function sendGetRequest(url, data) {
|
|||
params: data
|
||||
})
|
||||
.then(function (res) { //请求成功，response接收返回参数
|
||||
if(res.data.code==401){
|
||||
if (res.data.code == 401) {
|
||||
localStorage.removeItem('token')
|
||||
router.push({ name:'login' })
|
||||
router.push({
|
||||
name: 'login'
|
||||
})
|
||||
}
|
||||
resolve(res);
|
||||
|
||||
|
||||
})
|
||||
.catch(function (err) { //请求失败，error接收失败原因
|
||||
reject(err);
|
||||
|
|
@ -38,9 +41,11 @@ function sendPostRequest(url, data) {
|
|||
}
|
||||
}).then(
|
||||
(res) => {
|
||||
if(res.data.code==401){
|
||||
if (res.data.code == 401) {
|
||||
localStorage.removeItem('token')
|
||||
router.push({ name:'login' })
|
||||
router.push({
|
||||
name: 'login'
|
||||
})
|
||||
}
|
||||
resolve(res);
|
||||
},
|
||||
|
|
@ -82,73 +87,114 @@ export default {
|
|||
},
|
||||
//根据用户id查询对应的设备数据
|
||||
getEqbyid(data) {
|
||||
return sendGetRequest("/sel/eqbyid/"+data,'');
|
||||
return sendGetRequest("/sel/eqbyid/" + data, '');
|
||||
},
|
||||
|
||||
//测试施肥机读取设备状态信息 //读取数据 根据文档编号读取 所有数据展示都出自这个接口
|
||||
postReg(data){
|
||||
postReg(data) {
|
||||
return sendPostRequest("/readFs/reg", data);
|
||||
},
|
||||
//测试施肥机读取设备状态信息 //读取数据 根据文档编号读取 所有数据展示都出自这个接口
|
||||
postState(data){
|
||||
postState(data) {
|
||||
return sendPostRequest("/readFs/state", data);
|
||||
},
|
||||
//测试施肥机写入数据信息 //修改数据 根据文档编号修改 所有数据修改都出自这个接口
|
||||
postWriteFs(data){
|
||||
//测试施肥机写入数据信息 //修改数据 根据文档编号修改 所有数据修改都出自这个接口
|
||||
postWriteFs(data) {
|
||||
return sendPostRequest("/writeFs", data);
|
||||
},
|
||||
getByid(data){
|
||||
return sendGetRequest("/readFs/byid",data);
|
||||
getByid(data) {
|
||||
return sendGetRequest("/readFs/byid", data);
|
||||
},
|
||||
//获取实时数据
|
||||
postRtdata(data){
|
||||
return sendPostRequest("/getFs/rtdata?equipmentId="+data, '');
|
||||
postRtdata(data) {
|
||||
return sendPostRequest("/getFs/rtdata?equipmentId=" + data, '');
|
||||
},
|
||||
//获取实时数据
|
||||
postFsdata(data){
|
||||
return sendPostRequest("/chart/fsdata?equipmentId="+data, '');
|
||||
//获取实时数据
|
||||
postFsdata(data) {
|
||||
return sendPostRequest("/chart/fsdata?equipmentId=" + data, '');
|
||||
},
|
||||
//获取监控地址
|
||||
getGethls(data){
|
||||
return sendGetRequest("/camera/gethls",data);
|
||||
getGethls(data) {
|
||||
return sendGetRequest("/camera/gethls", data);
|
||||
},
|
||||
//根据ID查询用户信息
|
||||
getUser(data){
|
||||
return sendGetRequest('/api/sel/user',data)
|
||||
getUser(data) {
|
||||
return sendGetRequest('/api/sel/user', data)
|
||||
},
|
||||
|
||||
|
||||
//控制器接口
|
||||
//控制器实时数据
|
||||
getControlRtdata(data){
|
||||
return sendPostRequest("/getcontrol/rtdata?equipmentId="+data, '');
|
||||
getControlRtdata(data) {
|
||||
return sendPostRequest("/getcontrol/rtdata?equipmentId=" + data, '');
|
||||
},
|
||||
//控制器实时数据折线图
|
||||
getControlFsdata(data){
|
||||
return sendPostRequest("/getcontrol/fsdata?equipmentId="+data, '');
|
||||
getControlFsdata(data) {
|
||||
return sendPostRequest("/getcontrol/fsdata?equipmentId=" + data, '');
|
||||
},
|
||||
//控制器数据上传数据获取
|
||||
getControldataUpload(data){
|
||||
return sendGetRequest('/readControl/dataUpload',data)
|
||||
getControldataUpload(data) {
|
||||
return sendGetRequest('/readControl/dataUpload', data)
|
||||
},
|
||||
//控制器写入数据
|
||||
postControlWrite(data){
|
||||
postControlWrite(data) {
|
||||
return sendPostRequest("/writeJinHuaControl/write", data);
|
||||
},
|
||||
//控制器传感器通道
|
||||
getReadControlSensorChannel(data){
|
||||
return sendGetRequest('/readControl/sensorChannel',data)
|
||||
getReadControlSensorChannel(data) {
|
||||
return sendGetRequest('/readControl/sensorChannel', data)
|
||||
},
|
||||
//控制器 顶模和风机
|
||||
getReadControlliShuiControl(data){
|
||||
return sendGetRequest('/readControl/liShuiControl',data)
|
||||
getReadControlliShuiControl(data) {
|
||||
return sendGetRequest('/readControl/liShuiControl', data)
|
||||
},
|
||||
//控制器 传感器输入合成
|
||||
getReadControlSensorInputSynthesis(data){
|
||||
return sendGetRequest('/readControl/sensorInputSynthesis',data)
|
||||
getReadControlSensorInputSynthesis(data) {
|
||||
return sendGetRequest('/readControl/sensorInputSynthesis', data)
|
||||
},
|
||||
//控制器 主页查看控制器气象站实时数据
|
||||
getControlRtDatastation(data){
|
||||
return sendGetRequest('/getcontrol/rtDatastation',data)
|
||||
},
|
||||
//控制器 主页查看控制器气象站实时数据
|
||||
getControlRtDatastation(data) {
|
||||
return sendGetRequest('/getcontrol/rtDatastation', data)
|
||||
},
|
||||
//控制器 设备运行状态
|
||||
getControlGetState(data) {
|
||||
return sendGetRequest('/readControl/getState', data)
|
||||
},
|
||||
|
||||
|
||||
|
||||
// 根据用户id查询对应的设备大数据信息
|
||||
Bigdata_getAllControl(userid, data) {
|
||||
return sendGetRequest(`/Bigdata/getAllControl?userid=${userid}`, data);
|
||||
},
|
||||
|
||||
// 获取设备当天的温度
|
||||
Bigdata_getTemperature(deviceid, data) {
|
||||
return sendGetRequest(`/Bigdata/getTemperature?deviceid=${deviceid}`, data);
|
||||
},
|
||||
|
||||
// 获取设备一周的温度
|
||||
Bigdata_getWeekTemperature(deviceid, data) {
|
||||
return sendGetRequest(`/Bigdata/getWeekTemperature?deviceid=${deviceid}`, data);
|
||||
},
|
||||
|
||||
// 主页查看控制器实时数据
|
||||
getcontrol_rtdata(equipmentId, data) {
|
||||
return sendPostRequest(`/getcontrol/rtdata?equipmentId=${equipmentId}`, data);
|
||||
},
|
||||
|
||||
// 获取摄像头得地址 Copy
|
||||
camera_gethls(cameraid, channelid, data) {
|
||||
return sendGetRequest(`/camera/gethls?cameraid=${cameraid}&channelid=${channelid}`, data);
|
||||
},
|
||||
|
||||
// 根据用户id查询对应的设备数据 Copy
|
||||
sel_eqbyid(userId, data) {
|
||||
return sendGetRequest(`/sel/eqbyid/${userId}`, data);
|
||||
},
|
||||
|
||||
// 控制器状态值获取 Copy
|
||||
readControl_getState(deviceId, data) {
|
||||
return sendGetRequest(`/readControl/getState?deviceId=${deviceId}`, data);
|
||||
}
|
||||
};
|
||||
|
|
@ -1,20 +1,20 @@
|
|||
@charset "UTF-8";
|
||||
.scroll, .el-dropdown-menu, .formula .page-content, .history .page-content .el-table--scrollable-x .el-table__body-wrapper {
|
||||
.scroll, .el-dropdown-menu, .index .index-content .right.right-page .page-content, .formula .page-content, .realTime, .history .page-content .el-table--scrollable-x .el-table__body-wrapper {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.scroll::-webkit-scrollbar, .el-dropdown-menu::-webkit-scrollbar, .formula .page-content::-webkit-scrollbar, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
|
||||
.scroll::-webkit-scrollbar, .el-dropdown-menu::-webkit-scrollbar, .index .index-content .right.right-page .page-content::-webkit-scrollbar, .formula .page-content::-webkit-scrollbar, .realTime::-webkit-scrollbar, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
|
||||
/*滚动条整体*/
|
||||
width: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.scroll::-webkit-scrollbar-track, .el-dropdown-menu::-webkit-scrollbar-track, .formula .page-content::-webkit-scrollbar-track, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-track {
|
||||
.scroll::-webkit-scrollbar-track, .el-dropdown-menu::-webkit-scrollbar-track, .index .index-content .right.right-page .page-content::-webkit-scrollbar-track, .formula .page-content::-webkit-scrollbar-track, .realTime::-webkit-scrollbar-track, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-track {
|
||||
/*滚动条轨道*/
|
||||
background: #013769;
|
||||
}
|
||||
|
||||
.scroll::-webkit-scrollbar-thumb, .el-dropdown-menu::-webkit-scrollbar-thumb, .formula .page-content::-webkit-scrollbar-thumb, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
||||
.scroll::-webkit-scrollbar-thumb, .el-dropdown-menu::-webkit-scrollbar-thumb, .index .index-content .right.right-page .page-content::-webkit-scrollbar-thumb, .formula .page-content::-webkit-scrollbar-thumb, .realTime::-webkit-scrollbar-thumb, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
||||
/*滚动条里面的滑块*/
|
||||
width: 4px;
|
||||
cursor: pointer;
|
||||
|
|
@ -22,11 +22,11 @@
|
|||
border: 3px solid #013769;
|
||||
}
|
||||
|
||||
.scroll::-webkit-scrollbar-thumb:hover, .el-dropdown-menu::-webkit-scrollbar-thumb:hover, .formula .page-content::-webkit-scrollbar-thumb:hover, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
|
||||
.scroll::-webkit-scrollbar-thumb:hover, .el-dropdown-menu::-webkit-scrollbar-thumb:hover, .index .index-content .right.right-page .page-content::-webkit-scrollbar-thumb:hover, .formula .page-content::-webkit-scrollbar-thumb:hover, .realTime::-webkit-scrollbar-thumb:hover, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
|
||||
/*滚动条鼠标事件，鼠标放上去出现的事件*/
|
||||
}
|
||||
|
||||
.scroll::-webkit-scrollbar-corner, .el-dropdown-menu::-webkit-scrollbar-corner, .formula .page-content::-webkit-scrollbar-corner, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-corner {
|
||||
.scroll::-webkit-scrollbar-corner, .el-dropdown-menu::-webkit-scrollbar-corner, .index .index-content .right.right-page .page-content::-webkit-scrollbar-corner, .formula .page-content::-webkit-scrollbar-corner, .realTime::-webkit-scrollbar-corner, .history .page-content .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-corner {
|
||||
/*滚动条边角*/
|
||||
}
|
||||
|
||||
|
|
@ -404,6 +404,19 @@
|
|||
overflow: auto;
|
||||
}
|
||||
|
||||
.index .index-content .right.right-page {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.index .index-content .right.right-page .page-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 92, 178, 0.15);
|
||||
border: 2px solid rgba(0, 186, 255, 0.2);
|
||||
padding: 30px 30px 20px;
|
||||
}
|
||||
|
||||
.input-view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -1467,15 +1480,26 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
flex-direction: column;
|
||||
justify-content: unset;
|
||||
}
|
||||
|
||||
.realTime .new-data {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.realTime .page-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-shrink: 0;
|
||||
background: rgba(0, 92, 178, 0.15);
|
||||
border: 2px solid rgba(0, 186, 255, 0.2);
|
||||
padding: 30px 30px 20px;
|
||||
padding: 30px 20px 20px;
|
||||
}
|
||||
|
||||
.realTime .page-content.control-page {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.realTime .page-content .control-view {
|
||||
|
|
@ -1635,6 +1659,163 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.realTime .page-content .status-view {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: rgba(0, 132, 255, 0.15);
|
||||
border: 2px solid rgba(0, 186, 255, 0.35);
|
||||
margin: 7.5px;
|
||||
}
|
||||
|
||||
.realTime .page-content .status-view .status-view-top {
|
||||
padding: 0 10px 0 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 50px;
|
||||
border-bottom: 1px solid rgba(0, 180, 255, 0.35);
|
||||
}
|
||||
|
||||
.realTime .page-content .status-view .status-view-top .status-view-top-left {
|
||||
font-size: 20px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.realTime .page-content .status-view .status-view-top .status-view-top-right {
|
||||
cursor: pointer;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.realTime .page-content .status-view .status-view-content {
|
||||
width: 100%;
|
||||
height: calc(100% - 51px);
|
||||
}
|
||||
|
||||
.realTime .page-content .status-view .status-view-content .status-true {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.realTime .page-content .status-view .status-view-content .status-true .status-fan {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.realTime .page-content .status-view .status-view-content .status-true .status-fan > div {
|
||||
min-width: unset;
|
||||
flex-shrink: 0;
|
||||
font-size: 14px;
|
||||
height: 30px;
|
||||
margin: 10px 8px 0 !important;
|
||||
}
|
||||
|
||||
.realTime .page-content .status-view .status-view-content .status-true .status-fan > div > img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.realTime .page-content .status-view .status-view-content .status-true .status-true-sel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 0 50px;
|
||||
}
|
||||
|
||||
.realTime .page-content .status-view .status-view-content .status-true .status-true-sel > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.realTime .page-content .status-view .status-view-content .status-true .status-true-sel > div > img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.realTime .page-content .status-view .status-view-content .status-true .status-true-charts {
|
||||
width: 100%;
|
||||
height: 153px;
|
||||
position: relative;
|
||||
background: url(../img/status-true-charts.png) no-repeat;
|
||||
background-size: 227px 114px;
|
||||
background-position: center 20px;
|
||||
}
|
||||
|
||||
.realTime .page-content .status-view .status-view-content .status-true .status-true-charts > img {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 6px;
|
||||
width: 28px;
|
||||
height: 27px;
|
||||
}
|
||||
|
||||
.realTime .page-content .status-view .status-view-content .status-true .status-true-charts > div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.realTime .page-content .status-view .status-view-content .status-true .status-true-text {
|
||||
width: 227px;
|
||||
height: 35px;
|
||||
padding: 0 16px;
|
||||
background: url(../img/status-true-text.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.realTime .page-content .status-view .status-view-content .status-true .status-true-text .status-true-text-left {
|
||||
font-size: 14px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
color: #8BEAFF;
|
||||
}
|
||||
|
||||
.realTime .page-content .status-view .status-view-content .status-true .status-true-text .status-true-text-right {
|
||||
font-size: 14px;
|
||||
font-family: Arial;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.realTime .page-content .status-view .status-view-content .status-noTrue {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.realTime .page-content .status-view .status-view-content .status-noTrue > img {
|
||||
width: 40px;
|
||||
height: 35px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.realTime .page-content .status-view .status-view-content .status-noTrue > div {
|
||||
font-size: 14px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
color: #8BEAFF;
|
||||
}
|
||||
|
||||
.history .page-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -2032,3 +2213,25 @@
|
|||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.plantingPlan {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.plantingPlan .btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.plantingPlan .btn .img {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.plantingPlan .plan-view {
|
||||
width: 440px;
|
||||
height: 200px;
|
||||
background: url(../img/plan-bg.png) no-repeat center;
|
||||
background-size: 100% 100%;
|
||||
margin: 7.5px 15px;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -426,6 +426,20 @@
|
|||
width: calc(100% - 240px);
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
&.right-page {
|
||||
padding: 20px;
|
||||
|
||||
.page-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 92, 178, 0.15);
|
||||
border: 2px solid rgba(0, 186, 255, 0.20);
|
||||
padding: 30px 30px 20px;
|
||||
@extend .scroll;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1047,6 +1061,7 @@
|
|||
|
||||
.sensorSet {
|
||||
height: 100%;
|
||||
|
||||
.sensor-view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -1117,14 +1132,15 @@
|
|||
.right-sel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
|
||||
>div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
margin-right: 30px;
|
||||
padding:0 0 15px 0;
|
||||
padding: 0 0 15px 0;
|
||||
|
||||
>.no-sel {
|
||||
margin-right: 10px;
|
||||
width: 35px;
|
||||
|
|
@ -1161,26 +1177,30 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.sensorSet-con{
|
||||
.sensor-view{
|
||||
&.sensorSet-con {
|
||||
.sensor-view {
|
||||
height: calc(100% - 120px);
|
||||
}
|
||||
.right-sel{
|
||||
|
||||
.right-sel {
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
.sensor-type-div{
|
||||
|
||||
.sensor-type-div {
|
||||
margin-bottom: 0;
|
||||
background: unset;
|
||||
border: none;
|
||||
height: auto;
|
||||
.sensor-sel{
|
||||
>div{
|
||||
|
||||
.sensor-sel {
|
||||
>div {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sensor-type {
|
||||
.sensor-title {
|
||||
font-size: 20px;
|
||||
|
|
@ -1188,8 +1208,9 @@
|
|||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
padding: 20px 0;
|
||||
.sensor-sel{
|
||||
>div{
|
||||
|
||||
.sensor-sel {
|
||||
>div {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1553,34 +1574,48 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
|
||||
flex-direction: column;
|
||||
justify-content: unset;
|
||||
@extend .scroll;
|
||||
|
||||
.new-data {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-shrink: 0;
|
||||
background: rgba(0, 92, 178, 0.15);
|
||||
border: 2px solid rgba(0, 186, 255, 0.20);
|
||||
padding: 30px 30px 20px;
|
||||
.control-view{
|
||||
padding: 30px 20px 20px;
|
||||
&.control-page{
|
||||
height:auto;
|
||||
}
|
||||
.control-view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 10px;
|
||||
.title{
|
||||
|
||||
.title {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.control-list{
|
||||
|
||||
.control-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
|
||||
overflow: hidden;
|
||||
max-width: 806px;
|
||||
|
||||
>div {
|
||||
// width: 100%!important;
|
||||
display: flex;
|
||||
overflow: unset !important;
|
||||
|
||||
|
||||
>div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -1588,18 +1623,20 @@
|
|||
margin-right: 100px;
|
||||
}
|
||||
}
|
||||
.list-view{
|
||||
|
||||
.list-view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
.icon{
|
||||
|
||||
.icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.timeNow {
|
||||
text-align: center;
|
||||
// position: absolute;
|
||||
|
|
@ -1725,6 +1762,160 @@
|
|||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.status-view {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: rgba(0, 132, 255, 0.15);
|
||||
border: 2px solid rgba(0, 186, 255, 0.35);
|
||||
margin: 7.5px;
|
||||
|
||||
.status-view-top {
|
||||
padding: 0 10px 0 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 50px;
|
||||
border-bottom: 1px solid rgba(0, 180, 255, .35);
|
||||
|
||||
.status-view-top-left {
|
||||
font-size: 20px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.status-view-top-right {
|
||||
cursor: pointer;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.status-view-content {
|
||||
width: 100%;
|
||||
height: calc(100% - 51px);
|
||||
|
||||
.status-true {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
.status-fan{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
>div{
|
||||
min-width: unset;
|
||||
flex-shrink: 0;
|
||||
font-size: 14px;
|
||||
height: 30px;
|
||||
margin: 10px 8px 0 !important;
|
||||
>img{
|
||||
width: 16px;
|
||||
height:16px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.status-true-sel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 0 50px;
|
||||
|
||||
>div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
>img {
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-true-charts {
|
||||
width: 100%;
|
||||
height: 153px;
|
||||
position: relative;
|
||||
background: url(../img/status-true-charts.png) no-repeat;
|
||||
background-size: 227px 114px;
|
||||
background-position: center 20px;
|
||||
|
||||
>img {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 6px;
|
||||
width: 28px;
|
||||
height: 27px;
|
||||
}
|
||||
|
||||
>div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.status-true-text {
|
||||
width: 227px;
|
||||
height: 35px;
|
||||
padding: 0 16px;
|
||||
background: url(../img/status-true-text.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.status-true-text-left {
|
||||
font-size: 14px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
color: #8BEAFF;
|
||||
}
|
||||
|
||||
.status-true-text-right {
|
||||
font-size: 14px;
|
||||
font-family: Arial;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-noTrue {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
>img {
|
||||
width: 40px;
|
||||
height: 35px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
>div {
|
||||
font-size: 14px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
color: #8BEAFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -2062,11 +2253,11 @@
|
|||
border-top: 1px solid rgba(0, 180, 255, .75);
|
||||
border-bottom: 1px solid rgba(0, 180, 255, .75);
|
||||
padding-bottom: 17px;
|
||||
|
||||
.table-header{
|
||||
|
||||
.table-header {
|
||||
font-size: 18px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: bold;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -2075,16 +2266,19 @@ font-weight: bold;
|
|||
border-top: 1px solid rgba(0, 180, 255, .75);
|
||||
border-bottom: 1px solid rgba(0, 180, 255, .75);
|
||||
overflow-x: scroll;
|
||||
>div{
|
||||
|
||||
>div {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
.table-header{
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
>div{
|
||||
width:70px;
|
||||
|
||||
>div {
|
||||
width: 70px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -2092,14 +2286,16 @@ font-weight: bold;
|
|||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
.table-tr{
|
||||
>div{
|
||||
|
||||
|
||||
.table-tr {
|
||||
>div {
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
>div{
|
||||
width:70px;
|
||||
|
||||
>div {
|
||||
width: 70px;
|
||||
height: 100%;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
|
|
@ -2109,19 +2305,24 @@ font-weight: bold;
|
|||
}
|
||||
}
|
||||
}
|
||||
.table-tr{
|
||||
|
||||
.table-tr {
|
||||
width: 100%;
|
||||
>div{
|
||||
|
||||
>div {
|
||||
height: 60px;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
}
|
||||
>div:nth-child(odd){
|
||||
|
||||
>div:nth-child(odd) {
|
||||
background: rgba(0, 47, 94, .35);
|
||||
}
|
||||
>div:nth-child(even){
|
||||
background: rgba(0,180,255,0.2);
|
||||
|
||||
>div:nth-child(even) {
|
||||
background: rgba(0, 180, 255, 0.2);
|
||||
}
|
||||
|
||||
.no-sel {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
|
|
@ -2139,6 +2340,7 @@ font-weight: bold;
|
|||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.table-header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
|
|
@ -2146,9 +2348,31 @@ font-weight: bold;
|
|||
text-align: center;
|
||||
background: rgba(0, 180, 255, 0.2);
|
||||
font-size: 16px;
|
||||
font-family: Arial;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
font-family: Arial;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.plantingPlan {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.btn {
|
||||
opacity: 1;
|
||||
|
||||
.img {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.plan-view {
|
||||
width: 440px;
|
||||
height: 200px;
|
||||
background: url(../img/plan-bg.png) no-repeat center;
|
||||
background-size: 100% 100%;
|
||||
margin: 7.5px 15px;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 376 B |
Binary file not shown.
|
After Width: | Height: | Size: 160 B |
Binary file not shown.
|
After Width: | Height: | Size: 441 B |
Binary file not shown.
|
After Width: | Height: | Size: 519 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 682 B |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 132 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 691 B |
Binary file not shown.
|
After Width: | Height: | Size: 589 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 607 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 765 B |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 560 B |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 472 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 272 B |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 190 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 635 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 908 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 744 B |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
|
|
@ -176,20 +176,20 @@ export function realTimeLine(id, data) {
|
|||
Xdata.push(el.time)
|
||||
|
||||
el.value.forEach((el1, index1) => {
|
||||
var containsIndex = dataList.findIndex(function(item) {
|
||||
var containsIndex = dataList.findIndex(function (item) {
|
||||
return item.name === el1.name;
|
||||
});
|
||||
if(containsIndex==-1){
|
||||
dataList.push({name:el1.name,value:[]})
|
||||
}else{
|
||||
if (containsIndex == -1) {
|
||||
dataList.push({ name: el1.name, value: [] })
|
||||
} else {
|
||||
dataList[containsIndex].value.push(el1.value)
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
})
|
||||
dataList.forEach((el,index)=>{
|
||||
list.push({
|
||||
dataList.forEach((el, index) => {
|
||||
list.push({
|
||||
name: el.name,
|
||||
data: el.value,
|
||||
type: "line",
|
||||
|
|
@ -310,6 +310,119 @@ export function realTimeLine(id, data) {
|
|||
],
|
||||
series: list,
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
export function statusCharts(id, data) {
|
||||
console.log(id,11);
|
||||
var chartDom = document.getElementById(id);
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
|
||||
const pointerData = data; // 仪表指针数据
|
||||
option = {
|
||||
series: [
|
||||
{
|
||||
type: "gauge",
|
||||
radius:75,
|
||||
z: 1,
|
||||
center:['50%','87%'],
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
splitNumber: 50,
|
||||
splitLine: {
|
||||
show: false,
|
||||
length: 15,
|
||||
distance: -10,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
detail: {
|
||||
show: false,
|
||||
offsetCenter: ['50%', '50%'],
|
||||
fontSize: 22,
|
||||
formatter: (val) => [`{a|${val}}`, `{b|%}`].join(""),
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: 20,
|
||||
color: "rgba(84, 108, 198, 0.65)",
|
||||
},
|
||||
b: {
|
||||
fontSize: 24,
|
||||
color: "rgba(84, 108, 198, 0.65)",
|
||||
},
|
||||
},
|
||||
},
|
||||
// 仪表盘的线，颜色值为一个数组
|
||||
axisLine: {
|
||||
show: true,
|
||||
// 两端是否设置为圆角；在5.0之后的版本有效
|
||||
roundCap: false,
|
||||
lineStyle: {
|
||||
width: 15,
|
||||
shadowColor: "#0093ee", //默认透明
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 0,
|
||||
shadowBlur: 20,
|
||||
opacity: 1,
|
||||
color: [
|
||||
[
|
||||
pointerData / 100,
|
||||
{
|
||||
x: 0,
|
||||
y: 0,
|
||||
x1: 1,
|
||||
y1: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(110, 224, 255, 1)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(0, 200, 255, 1)",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
[1, "rgba(0,0,0,0.15)"],
|
||||
],
|
||||
},
|
||||
},
|
||||
// 仪表盘刻度标签
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
distance: -35,
|
||||
formatter: (val) => {
|
||||
const num = Math.floor(val);
|
||||
return num % 20 === 0 ? num : "";
|
||||
},
|
||||
},
|
||||
pointer:{
|
||||
width :5,
|
||||
itemStyle:{
|
||||
color:'rgba(10, 243, 167, 1)'
|
||||
}
|
||||
},
|
||||
// 刻度
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
// 指针，此设置仅对5.0以上的版本生效
|
||||
|
||||
data: [pointerData],
|
||||
},
|
||||
|
||||
],
|
||||
};
|
||||
|
||||
|
||||
option && myChart.setOption(option);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
|
|
|
|||
|
|
@ -0,0 +1,318 @@
|
|||
import * as echarts from 'echarts';
|
||||
|
||||
export function weather_echart(id, data) {
|
||||
let chartDom = document.getElementById(id);
|
||||
let myChart = echarts.init(chartDom);
|
||||
let option = {
|
||||
grid: {
|
||||
top: "15%",
|
||||
left: "0%",
|
||||
right: "5%",
|
||||
bottom: "6%",
|
||||
containLabel: true
|
||||
},
|
||||
color: ["#00A8FF", "#00FFB4", "#FFD07F"],
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(1, 13, 19, 0.5)",
|
||||
borderWidth: 1,
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
},
|
||||
textStyle: {
|
||||
color: "rgba(212, 232, 254, 1)"
|
||||
},
|
||||
extraCssText: "z-index:2"
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
right: 20,
|
||||
top: 30,
|
||||
icon: "rect",
|
||||
itemWidth: 18,
|
||||
itemHeight: 4,
|
||||
itemGap: 30,
|
||||
padding: [0, 20, 0, 0],
|
||||
textStyle: {
|
||||
color: "#FFFFFF",
|
||||
fontFamily: "Alibaba PuHuiTi",
|
||||
fontSize: ".14rem",
|
||||
fontWeight: 400,
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data:data.data_category,
|
||||
// data: [
|
||||
// "1月",
|
||||
// "2月",
|
||||
// "3月",
|
||||
// "4月",
|
||||
// "5月",
|
||||
// "6月",
|
||||
// "7月",
|
||||
// "8月",
|
||||
// "9月",
|
||||
// "10月",
|
||||
// "11月",
|
||||
// "12月"
|
||||
// ],
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#52647C",
|
||||
type: 'solid'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
// interval: 0,
|
||||
textStyle: {
|
||||
color: "#7C99AF",
|
||||
fontSize: ".14rem",
|
||||
fontFamily: 'ArialMT',
|
||||
fontWeight: 400
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: [{
|
||||
type: "value",
|
||||
name: '温度',
|
||||
nameTextStyle: {
|
||||
fontSize: 14,
|
||||
fontFamily: 'MicrosoftYaHei',
|
||||
fontWeight: 400,
|
||||
color: '#7C99AF',
|
||||
lineHeight: 6
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#52647C",
|
||||
type: 'solid'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#7C99AF",
|
||||
fontSize: ".14rem",
|
||||
fontFamily: 'ArialMT',
|
||||
fontWeight: 400
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#52647C',
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
// data:data.data_value,
|
||||
}],
|
||||
series: [{
|
||||
// name: data.datax[0],
|
||||
type: "line",
|
||||
smooth: 'true',
|
||||
symbol: "circle", //标记的图形为实心圆
|
||||
symbolSize: 0, //标记的大小
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: "#00D2FF" // 线条颜色
|
||||
},
|
||||
// data: [175, 160, 153, 121, 156, 175, 160, 153, 121, 156, 180, 220],
|
||||
data: data.data_value,
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[{
|
||||
offset: 0,
|
||||
color: 'rgba(0, 168, 255, 0.6)'
|
||||
},
|
||||
{
|
||||
offset: 0.3,
|
||||
color: 'rgba(0, 168, 255, 0.6)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'transparent'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
},
|
||||
large:true,
|
||||
}, ]
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
export function thisWeekTemperature_echart(id, data) {
|
||||
let chartDom = document.getElementById(id);
|
||||
let myChart = echarts.init(chartDom);
|
||||
let option = {
|
||||
title: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
right: '15%',
|
||||
top: '5%',
|
||||
icon: 'circle',
|
||||
itemWidth: 8,
|
||||
itemHeight: 8,
|
||||
itemGap: 37,
|
||||
textStyle: {
|
||||
fontSize: ".12rem",
|
||||
fontFamily: 'Microsoft YaHei',
|
||||
fontWeight: 'normal',
|
||||
color: '#82DAF7'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top:'15%',
|
||||
left:'3%',
|
||||
right:'3%',
|
||||
bottom:'10%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
fontSize: ".14rem",
|
||||
fontFamily: 'MicrosoftYaHei',
|
||||
fontWeight: 400,
|
||||
color: '#82DAF7',
|
||||
padding: [5, 0, 0, 0]
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#294462',
|
||||
opacity: 0.3
|
||||
}
|
||||
},
|
||||
// data: ['1月', '2月', '3月', '4月', '5月']
|
||||
data:data.day
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
minInterval: 5,
|
||||
name: '',
|
||||
nameTextStyle: {
|
||||
fontSize: 18,
|
||||
fontFamily: 'CenturyGothic',
|
||||
color: '#ffffff',
|
||||
padding: [0, 0, 0, 30]
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#06304C'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontSize: ".14rem",
|
||||
fontFamily: 'MicrosoftYaHei',
|
||||
fontWeight: 'normal',
|
||||
color: '#82DAF7',
|
||||
padding: [0, 5, 0, 0]
|
||||
}
|
||||
}
|
||||
},
|
||||
dataZoom: [{
|
||||
// x轴没有具体的数值
|
||||
type: 'inside', // 图形内部的滚动条
|
||||
xAxisIndex: [0], // 明确指定滚动的轴
|
||||
minValueSpan: 1, // x轴最小的index
|
||||
maxValueSpan: 3, // x轴最大的index
|
||||
zoomOnMouseWheel: false // 关闭鼠标滚轮缩放
|
||||
}],
|
||||
series: [
|
||||
{
|
||||
name: '最高温度',
|
||||
type: 'bar',
|
||||
barWidth: "8px",
|
||||
barGap: '80%',
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
borderRadius: [20, 20, 0, 0],
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: 'rgba(255,189,73,1)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(255,189,73,0.3)' // 100% 处的颜色
|
||||
}]
|
||||
}
|
||||
},
|
||||
// data: [90, 66, 174, 100, 430]
|
||||
data:data.maxTemperature
|
||||
},
|
||||
{
|
||||
name: '最低温度',
|
||||
type: 'bar',
|
||||
barWidth: "8px",
|
||||
barGap: '80%',
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
borderRadius: [20, 20, 0, 0],
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: 'rgba(0,174,255,1)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(0,174,255,0.2)' // 100% 处的颜色
|
||||
}]
|
||||
}
|
||||
},
|
||||
// data: [87, 60, 124, 20, 432]
|
||||
data:data.minTemperature
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -7,6 +7,8 @@ Vue.config.productionTip = false
|
|||
import ElementUI from 'element-ui';
|
||||
import 'element-ui/lib/theme-chalk/index.css';
|
||||
|
||||
import "@/rem/rem.js"
|
||||
|
||||
import axios from "axios";
|
||||
Vue.prototype.$axios = axios;
|
||||
import api from "./api/index.js";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
// rem等比适配配置文件
|
||||
// 基准大小
|
||||
const baseSize = 100;
|
||||
// 设置 rem 函数
|
||||
function setRem() {
|
||||
// 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
|
||||
const scale = window.innerWidth / 1920;
|
||||
|
||||
|
||||
// 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
|
||||
document.documentElement.style.fontSize = baseSize * scale + "px";
|
||||
}
|
||||
// 初始化
|
||||
setRem();
|
||||
// 改变窗口大小时重新设置 rem
|
||||
window.onresize = function () {
|
||||
setRem();
|
||||
};
|
||||
|
||||
|
||||
|
|
@ -23,7 +23,16 @@ const routes = [
|
|||
component: () => import('../views/page/status.vue')
|
||||
},]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/largeScreen',
|
||||
name: 'largeScreen',
|
||||
component: () => import('../views/page/largeScreen.vue')
|
||||
},
|
||||
{
|
||||
path: '/largeScreen1',
|
||||
name: 'largeScreen1',
|
||||
component: () => import('../views/page/largeScreen1.vue')
|
||||
},
|
||||
{
|
||||
path: '/index',
|
||||
name: 'index',
|
||||
|
|
@ -97,6 +106,18 @@ const routes = [
|
|||
},]
|
||||
},]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/vrcode',
|
||||
name: 'vrcode',
|
||||
component: () => import('../views/vrcode.vue'),
|
||||
redirect: '/plantingPlan',
|
||||
children: [{
|
||||
path: '/plantingPlan',
|
||||
name: 'plantingPlan',
|
||||
component: () => import('../views/vrcode/plantingPlan.vue')
|
||||
}]
|
||||
},
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ export default {
|
|||
{ name: '设备菜单', router: '', routerList: [], img: require('../assets/image/header-img5.png') },
|
||||
//systemManage systemManage
|
||||
{ name: '管理', router: '', routerList: [''], img: require('../assets/image/header-img6.png') },
|
||||
{ name: '大数据', router: '', routerList: [''], img: require('../assets/image/header-img8.png') }
|
||||
{ name: '大数据', router: 'largeScreen', routerList: ['largeScreen'], img: require('../assets/image/header-img8.png') }
|
||||
],
|
||||
|
||||
activeNames: [3],
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,780 @@
|
|||
<template>
|
||||
<div class="about">
|
||||
<div class="kuang">
|
||||
|
||||
<div class="title">
|
||||
温室智慧云数据统计
|
||||
</div>
|
||||
|
||||
<div class="yuan" @click="toBack">
|
||||
<img src="../../assets/img/small.png" alt="">
|
||||
</div>
|
||||
|
||||
<div class="calendar">
|
||||
<img src="../../assets/img/calendar.png" alt="">
|
||||
<span>2023.10.30</span>
|
||||
<span class="line"></span>
|
||||
<span>星期一</span>
|
||||
<span class="line"></span>
|
||||
<span>14:17</span>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="map">
|
||||
<div class="map1">
|
||||
<div class="drag_box" ref="drag_box">
|
||||
<img class="drag_img" src="../../assets/img/map.png" alt="">
|
||||
<div class="pole_item pole_item1" @click="handlerPop">
|
||||
<div class="p_title">
|
||||
<img src="../../assets/img/wenshi.png" alt="">
|
||||
<span>2#温室</span>
|
||||
</div>
|
||||
<img class="pole1" src="../../assets/img/pole1.png" alt="">
|
||||
</div>
|
||||
<div class="pole_item pole_item2" @click="handlerPop">
|
||||
<div class="p_title">
|
||||
<img src="../../assets/img/wenshi.png" alt="">
|
||||
<span>1#温室</span>
|
||||
</div>
|
||||
<img class="pole1" src="../../assets/img/pole1.png" alt="">
|
||||
</div>
|
||||
<div class="pole_item pole_item3" @click="handlerPop">
|
||||
<div class="p_title">
|
||||
<img src="../../assets/img/wenshi1.png" alt="">
|
||||
<span>3#温室</span>
|
||||
</div>
|
||||
<img class="pole1" src="../../assets/img/pole.png" alt="">
|
||||
</div>
|
||||
<div class="pole_item pole_item4" @click="handlerPop">
|
||||
<div class="p_title">
|
||||
<img src="../../assets/img/wenshi.png" alt="">
|
||||
<span>控制中心</span>
|
||||
</div>
|
||||
<img class="pole1" src="../../assets/img/pole1.png" alt="">
|
||||
</div>
|
||||
<div class="pole_item pole_item5" @click="handlerPop">
|
||||
<div class="p_title">
|
||||
<img src="../../assets/img/wenshi.png" alt="">
|
||||
<span>4#温室</span>
|
||||
</div>
|
||||
<img class="pole1" src="../../assets/img/pole1.png" alt="">
|
||||
</div>
|
||||
<div class="pole_item pole_item6" @click="handlerPop">
|
||||
<div class="p_title">
|
||||
<img src="../../assets/img/wenshi.png" alt="">
|
||||
<span>5#温室</span>
|
||||
</div>
|
||||
<img class="pole1" src="../../assets/img/pole1.png" alt="">
|
||||
</div>
|
||||
<div class="pole_item pole_item7" @click="handlerPop">
|
||||
<div class="p_title">
|
||||
<img src="../../assets/img/wenshi.png" alt="">
|
||||
<span>6#温室</span>
|
||||
</div>
|
||||
<img class="pole1" src="../../assets/img/pole1.png" alt="">
|
||||
</div>
|
||||
|
||||
<!-- 弹框 -->
|
||||
<template v-for="(item, index) in popContentList">
|
||||
<!-- <div class="pop_content" :style="getTopOrLeft(item.greenhouseName)" :key="index"
|
||||
v-if="popContentCurrent == index ? true : false"> -->
|
||||
<div class="pop_content" :style="getTopOrLeft(item.greenhouseName)" :key="index"
|
||||
v-if="popContentCurrent == index ? true : false">
|
||||
<div class="p_video">
|
||||
<img src="../../assets/img/c_top.png" alt="">
|
||||
</div>
|
||||
<div class="text">温室{{ item.greenhouseName }}#</div>
|
||||
<div class="line"></div>
|
||||
<div class="detail">
|
||||
<div class="d_item">
|
||||
<img src="../../assets/img/detail_img.png" alt="">
|
||||
<span>面积：{{ item.greenhouseArea }}㎡</span>
|
||||
</div>
|
||||
<div class="d_item">
|
||||
<img src="../../assets/img/detail_img.png" alt="">
|
||||
<span>品种：{{ item.greenhouseVariety }}</span>
|
||||
</div>
|
||||
<div class="d_item">
|
||||
<img src="../../assets/img/detail_img.png" alt="">
|
||||
<span>数量：{{ item.greenhouseNums }}株</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grow">
|
||||
<img src="../../assets/img/grow_img.png" alt="">
|
||||
<span>生长阶段：</span>
|
||||
<span>{{ item.growthStageName }}</span>
|
||||
</div>
|
||||
<div class="line" style="margin-top: 0.2rem;"></div>
|
||||
<div class="icon_item scroll">
|
||||
<div class="icon_item_child" v-for="(item1, index1) in item.childList" :key="index1">
|
||||
<!-- <img :src="item.formula" alt=""> -->
|
||||
<img :src="require('../../assets/image/real-time-'+item1.formula+'.png')" alt="">
|
||||
<div>
|
||||
<span>{{ item1.environmentDataId }}</span>
|
||||
<span>{{ item1.environmentData }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- <el-dialog title="" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
|
||||
<div class="pop_content">
|
||||
<div class="p_video">
|
||||
<img src="../assets/img/c_top.png" alt="">
|
||||
</div>
|
||||
<div class="text">某某项目温室一号</div>
|
||||
<div class="line"></div>
|
||||
<div class="detail">
|
||||
<div class="d_item">
|
||||
<img src="../assets/img/detail_img.png" alt="">
|
||||
<span>面积：6652㎡</span>
|
||||
</div>
|
||||
<div class="d_item">
|
||||
<img src="../assets/img/detail_img.png" alt="">
|
||||
<span>品种：番茄</span>
|
||||
</div>
|
||||
<div class="d_item">
|
||||
<img src="../assets/img/detail_img.png" alt="">
|
||||
<span>数量：80000株</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grow">
|
||||
<img src="../assets/img/grow_img.png" alt="">
|
||||
<span>生长阶段：</span>
|
||||
<span>幼苗期</span>
|
||||
</div>
|
||||
<div class="line" style="margin-top: 0.2rem;"></div>
|
||||
<div class="icon_item">
|
||||
<div class="icon_item_child" v-for="(item, index) in list" :key="index">
|
||||
<img :src="item.img" alt="">
|
||||
<div>
|
||||
<span>{{ item.name }}</span>
|
||||
<span>{{ item.data }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:'largeScreen1',
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
timer: '',
|
||||
timer1: '',
|
||||
timer2: '',
|
||||
list: [
|
||||
{ img: require('../../assets/img/icon_1.png'), name: '空气温度', data: '29.6℃' },
|
||||
{ img: require('../../assets/img/icon_2.png'), name: '空气湿度', data: '18.5%' },
|
||||
{ img: require('../../assets/img/icon_3.png'), name: '光亮度', data: '38.8klux' },
|
||||
{ img: require('../../assets/img/icon_4.png'), name: '二氧化碳', data: '600PPM' },
|
||||
{ img: require('../../assets/img/icon_5.png'), name: '土壤温度', data: '29.0℃' },
|
||||
{ img: require('../../assets/img/icon_6.png'), name: '土壤湿度', data: '18.5%' },
|
||||
],
|
||||
top_: 2,
|
||||
left_: 2,
|
||||
|
||||
popContentList: [],
|
||||
popContentCurrent: 5
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.drag_boxHandler()
|
||||
|
||||
// this.timer1 = setTimeout(() => {
|
||||
// this.$router.push({ path: '/largeScreen' })
|
||||
// }, 20000);
|
||||
|
||||
|
||||
|
||||
// this.timer = setInterval(() => {
|
||||
// this.dialogVisible = !this.dialogVisible
|
||||
// }, 3000);
|
||||
|
||||
this.login()
|
||||
|
||||
this.timer2 = setInterval(() => {
|
||||
this.popContentCurrent++
|
||||
if (this.popContentCurrent > 5) {
|
||||
this.popContentCurrent = 0
|
||||
}
|
||||
}, 3000)
|
||||
},
|
||||
destroyed() {
|
||||
this.timer = null;
|
||||
this.timer1 = null;
|
||||
this.timer2 = null
|
||||
},
|
||||
methods: {
|
||||
// 根据用户id查询对应的设备大数据信息
|
||||
dataInit(userid) {
|
||||
this.api.Bigdata_getAllControl(userid).then(res => {
|
||||
// console.log('根据用户id查询对应的设备大数据信息', res);
|
||||
this.popContentList = res.data.data
|
||||
this.popContentList = this.popContentList.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
childList: []
|
||||
}
|
||||
})
|
||||
this.popContentList.forEach(el => {
|
||||
|
||||
// 获取控制器实时数据
|
||||
this.api.getcontrol_rtdata(el.deviceId).then(res1 => {
|
||||
// console.log('获取控制器实时数据', res1);
|
||||
if(res1.data.code == 200){
|
||||
el.childList = res1.data.data
|
||||
}
|
||||
})
|
||||
})
|
||||
// console.log(this.popContentList,'12121212');
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
getTopOrLeft(name) {
|
||||
if (name == '二号') {
|
||||
// this.top_ = 1;
|
||||
// this.left_ = 6.2
|
||||
return 'top:1rem;left:6.2rem'
|
||||
} else if (name == '一号') {
|
||||
// this.top_ = 3.5;
|
||||
// this.left_ = 3.8
|
||||
return 'top:3.5rem;left:3.8rem'
|
||||
} else if (name == '3号') {
|
||||
// this.top_ = 2;
|
||||
// this.left_ = 9
|
||||
return 'top:2rem;left:9rem'
|
||||
} else if (name == '4号') {
|
||||
// this.top_ = 2;
|
||||
// this.left_ = 9.3
|
||||
return 'top:2rem;left:9.3rem'
|
||||
} else if (name == '5') {
|
||||
// this.top_ = 3.5;
|
||||
// this.left_ = 6.5
|
||||
return 'top:3.5rem;left:6.5rem'
|
||||
} else if (name == '6') {
|
||||
// this.top_ = 0.8;
|
||||
// this.left_ = 7.2
|
||||
return 'top:0.8rem;left:7.2rem'
|
||||
}
|
||||
},
|
||||
|
||||
// 获取本地的userid和token
|
||||
login() {
|
||||
// var data = {
|
||||
// "username": "lsjskymdp",
|
||||
// "password": "lihemix888"
|
||||
// }
|
||||
// this.api.login(data).then(res => {
|
||||
// // console.log('信息', res);
|
||||
|
||||
// if (res.status == 200) {
|
||||
// localStorage.setItem('token', res.data.data.token)
|
||||
// localStorage.setItem('userid', res.data.data.userid)
|
||||
// // console.log(localStorage.getItem('token'),localStorage.getItem('userid'));
|
||||
// this.dataInit(res.data.data.userid)
|
||||
// }
|
||||
|
||||
// })
|
||||
let userInfo = JSON.parse(localStorage.getItem('userInfo'));
|
||||
this.dataInit(userInfo.userid)
|
||||
},
|
||||
|
||||
handleClose(done) {
|
||||
done();
|
||||
},
|
||||
|
||||
handlerPop() {
|
||||
this.dialogVisible = true
|
||||
},
|
||||
|
||||
toBack() {
|
||||
this.$router.push({ path: '/largeScreen' })
|
||||
|
||||
},
|
||||
|
||||
drag_boxHandler() {
|
||||
let demo = this.$refs.drag_box
|
||||
demo = document.querySelector('.drag_box') //待拖拽元素
|
||||
let canMove = false //拖拽状态
|
||||
let x = 0,
|
||||
y = 0 //鼠标位置
|
||||
//监听按下鼠标事件
|
||||
demo.onmousedown = function (e) {
|
||||
x = e.pageX - demo.offsetLeft
|
||||
y = e.pageY - demo.offsetTop
|
||||
canMove = true //激活拖拽状态
|
||||
}
|
||||
//监听右击鼠标事件
|
||||
demo.oncontextmenu = function (e) {
|
||||
e.preventDefault() //阻止默认行为
|
||||
}
|
||||
//监听鼠标抬起事件
|
||||
window.onmouseup = function () {
|
||||
canMove = false //关闭拖拽状态
|
||||
}
|
||||
|
||||
window.onblur = function () { //窗口失去焦点事件
|
||||
canMove = false //关闭拖拽状态
|
||||
}
|
||||
|
||||
//监听鼠标移动事件
|
||||
window.onmousemove = function (e) {
|
||||
e.preventDefault(); //阻止默认行为(字不能拖走)
|
||||
if (canMove) { //对范围判断
|
||||
let left = e.pageX - x
|
||||
let top = e.pageY - y
|
||||
|
||||
//if (left > 0) left = 0 //当距离左边小于0时 让它为0
|
||||
//if (top > 0) top = 0 //当距离上边小于0时 让它为0
|
||||
// //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到)
|
||||
// let maxLeft = window.innerWidth - demo.offsetWidth
|
||||
// //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到)
|
||||
// let maxTop = window.innerHeight - demo.offsetHeight
|
||||
|
||||
// if (left > maxLeft) left = maxLeft
|
||||
// if (top > maxTop) top = maxTop
|
||||
|
||||
|
||||
demo.style.left = left + 'px'
|
||||
demo.style.top = top + 'px'
|
||||
|
||||
}
|
||||
}
|
||||
let scale = 1
|
||||
demo.onwheel = function (e) {
|
||||
|
||||
if (e.wheelDelta > 0) {
|
||||
scale += 0.05
|
||||
if (scale > 4) {
|
||||
scale = 4
|
||||
}
|
||||
demo.style.transform = `scale(${scale})`
|
||||
// console.log(scale);
|
||||
} else {
|
||||
scale -= 0.05
|
||||
if (scale < 1) {
|
||||
scale = 1
|
||||
}
|
||||
demo.style.transform = `scale(${scale})`
|
||||
// console.log(scale);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</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: auto;
|
||||
box-sizing: border-box;
|
||||
padding-top: 0.06rem;
|
||||
font-size: .54rem;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
font-weight: 400;
|
||||
color: #EFF8FC;
|
||||
line-height: .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: .56rem;
|
||||
height: .56rem;
|
||||
background: url('../../assets/img/yuan_bg.png') center no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: .53rem;
|
||||
left: .71rem;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
>img {
|
||||
width: .20rem;
|
||||
height: .20rem;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar {
|
||||
width: 4rem;
|
||||
height: .3rem;
|
||||
position: absolute;
|
||||
top: .63rem;
|
||||
right: .66rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
>img {
|
||||
width: .28rem;
|
||||
height: .3rem;
|
||||
}
|
||||
|
||||
>span:nth-child(2) {
|
||||
font-size: .24rem;
|
||||
font-family: PingFang-SC-Bold;
|
||||
font-weight: bold;
|
||||
color: #7ABAFF;
|
||||
}
|
||||
|
||||
>span:nth-child(4) {
|
||||
font-size: .2rem;
|
||||
font-family: PingFang-SC-Bold;
|
||||
font-weight: bold;
|
||||
color: #7ABAFF;
|
||||
}
|
||||
|
||||
>span:nth-child(6) {
|
||||
font-size: .3rem;
|
||||
font-family: PingFang-SC-Bold;
|
||||
font-weight: bold;
|
||||
color: #7ABAFF;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: .02rem;
|
||||
height: .30rem;
|
||||
background: #FFFFFF;
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: calc(100% - .6rem);
|
||||
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
-webkit-mask-image: linear-gradient(90deg, transparent 0%, blue 7%, blue 87%, transparent 97%);
|
||||
|
||||
.map1 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// background: url('../assets/img/map.png') center no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
-webkit-mask-image: linear-gradient(transparent 4%, blue 15%, blue 86%, transparent 100%);
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
|
||||
.drag_box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
-webkit-mask-image: linear-gradient(90deg, transparent 4%, blue 18%, blue 88%, transparent 100%);
|
||||
|
||||
.drag_img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-mask-image: linear-gradient(transparent 0%, blue 13%, blue 73%, transparent 97%);
|
||||
}
|
||||
|
||||
.pole_item {
|
||||
width: 1.45rem;
|
||||
height: 1.8rem;
|
||||
|
||||
|
||||
.p_title {
|
||||
width: 1.45rem;
|
||||
height: .44rem;
|
||||
background: rgba(1, 12, 28, 0.7);
|
||||
border-radius: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0 0 10px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
>img {
|
||||
width: .32rem;
|
||||
height: .32rem;
|
||||
margin-right: 0.15rem;
|
||||
}
|
||||
|
||||
>span {
|
||||
font-size: .18rem;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.pole1 {
|
||||
width: .77rem;
|
||||
height: 1.8rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
.pole_item1 {
|
||||
position: absolute;
|
||||
top: 13%;
|
||||
left: 26%;
|
||||
}
|
||||
|
||||
.pole_item2 {
|
||||
position: absolute;
|
||||
top: 41%;
|
||||
left: 13%;
|
||||
}
|
||||
|
||||
.pole_item3 {
|
||||
position: absolute;
|
||||
top: 22%;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.pole_item4 {
|
||||
position: absolute;
|
||||
top: 43%;
|
||||
left: 42%;
|
||||
}
|
||||
|
||||
.pole_item5 {
|
||||
position: absolute;
|
||||
top: 29%;
|
||||
left: 76%;
|
||||
}
|
||||
|
||||
.pole_item6 {
|
||||
position: absolute;
|
||||
top: 61%;
|
||||
left: 62%;
|
||||
}
|
||||
|
||||
.pole_item7 {
|
||||
position: absolute;
|
||||
top: 1%;
|
||||
left: 62%;
|
||||
}
|
||||
|
||||
|
||||
.pop_content {
|
||||
width: 5.38rem;
|
||||
height: 6.92rem;
|
||||
background: url('../../assets/img/pop_bg.png') center no-repeat;
|
||||
background-size: 100% 100%;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
z-index: 999999;
|
||||
// top: 2rem;
|
||||
// left: 2rem;
|
||||
|
||||
.p_video {
|
||||
width: 4.9rem;
|
||||
height: 2.8rem;
|
||||
margin: 0.2rem auto 0;
|
||||
|
||||
>img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 100%;
|
||||
height: 0.6rem;
|
||||
font-size: .28rem;
|
||||
font-family: AlimamaShuHeiTi-Bold;
|
||||
font-weight: bold;
|
||||
color: #F3FDFF;
|
||||
line-height: 0.6rem;
|
||||
box-sizing: border-box;
|
||||
padding-left: 0.3rem;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 4.90rem;
|
||||
height: .01rem;
|
||||
background: #51D4FA;
|
||||
opacity: 0.5;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.detail {
|
||||
width: 100%;
|
||||
height: 0.7rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
|
||||
.d_item {
|
||||
height: .30rem;
|
||||
background: rgba(81, 212, 250, 0.15);
|
||||
border: .01rem solid rgba(106, 222, 255, 0.4);
|
||||
border-radius: .02rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.1rem 0 0.1rem;
|
||||
|
||||
>img {
|
||||
width: 0.18rem;
|
||||
height: 0.18rem;
|
||||
margin-right: 0.05rem;
|
||||
}
|
||||
|
||||
>span {
|
||||
font-size: .16rem;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
color: #D9EFFD;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grow {
|
||||
width: 4rem;
|
||||
height: .4rem;
|
||||
background: url('../../assets/img/grow_bg.png') center no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
>img {
|
||||
width: .22rem;
|
||||
height: .18rem;
|
||||
margin-right: 0.1rem;
|
||||
}
|
||||
|
||||
>span:nth-child(2) {
|
||||
font-size: .16rem;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
>span:nth-child(3) {
|
||||
font-size: .16rem;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
color: #36FFD2;
|
||||
}
|
||||
}
|
||||
|
||||
.icon_item {
|
||||
width: 100%;
|
||||
height: calc(100% - 5rem);
|
||||
box-sizing: border-box;
|
||||
padding: 0.3rem 0.2rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
overflow: auto;
|
||||
|
||||
.icon_item_child {
|
||||
width: 33.33%;
|
||||
height: 50%;
|
||||
display: flex;
|
||||
margin-bottom: 0.1rem;
|
||||
|
||||
>img {
|
||||
width: .6rem;
|
||||
height: .53rem;
|
||||
margin-right: 0.1rem;
|
||||
}
|
||||
|
||||
>div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
>span:nth-child(1) {
|
||||
font-size: .14rem;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: bold;
|
||||
color: #86D9FF;
|
||||
}
|
||||
|
||||
>span:nth-child(2) {
|
||||
font-size: .2rem;
|
||||
font-family: AlibabaPuHuiTiB;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
margin-top: 0.02rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// ::v-deep .el-dialog {
|
||||
// background: unset !important;
|
||||
|
||||
// .el-icon-close:before {
|
||||
// contain: " ";
|
||||
// width: .44rem;
|
||||
// height: .44rem;
|
||||
// background: url('../assets/img/close.png') center no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// position: absolute;
|
||||
// top: 0.3rem;
|
||||
// left: -0.1rem;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="formula realTime">
|
||||
<div class="page-content">
|
||||
<div class="page-content new-data" :class="deviceName == 10 ? 'control-page' : ''">
|
||||
|
||||
<div class="control-view" v-if="deviceName == 10">
|
||||
<div class="title">气象站:</div>
|
||||
|
|
@ -62,12 +62,139 @@
|
|||
<div class="right" id="realTime-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-content" v-if="deviceName == 10">
|
||||
<div class="table-title">
|
||||
<img src="../../assets/image/status.png" alt="" />
|
||||
设备运行状态
|
||||
</div>
|
||||
<div class="flex-view border-none">
|
||||
<div class="status-view">
|
||||
<div class="status-view-top">
|
||||
<div class="status-view-top-left">{{ fanStatus.name }}</div>
|
||||
<!-- <el-popover placement="top" width="140">
|
||||
<div class="set-status-blue">进入修改设定值</div>
|
||||
<el-popover placement="top" width="160">
|
||||
<p class="del-text"><i style="color:red" class="el-popconfirm__icon el-icon-info"></i>确认删除?
|
||||
</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button class="el-button el-button--text el-button--mini color-blue">取消</el-button>
|
||||
<el-button class="el-button el-button--text el-button--mini color-blue">确定</el-button>
|
||||
</div>
|
||||
<div class="set-status-red" slot="reference">删除</div>
|
||||
</el-popover>
|
||||
<el-popover placement="right" width="100">
|
||||
<input v-model="item.index" type="text" class="status-save">
|
||||
<el-button class="el-button el-button--text el-button--mini color-blue">保存</el-button>
|
||||
<div class="set-status-blue" slot="reference">排序</div>
|
||||
</el-popover>
|
||||
<img class="status-view-top-right" slot="reference" src="../../assets/img/more.png" alt="">
|
||||
</el-popover> -->
|
||||
<img class="status-view-top-right" slot="reference" src="../../assets/img/more.png" alt="">
|
||||
</div>
|
||||
<div class="status-view-content">
|
||||
<div v-if="fanStatus.open != 0" class="status-true">
|
||||
<div class="status-true-sel">
|
||||
<div class="sel">
|
||||
<img v-if="fanStatus.open == 1" src="../../assets/img/status-true-sel.png" alt="">
|
||||
<img v-else src="../../assets/img/status-true-nosel.png" alt="">
|
||||
自动控制
|
||||
</div>
|
||||
<div class="sel-phone">
|
||||
<img v-if="fanStatus.open != 1" src="../../assets/img/status-true-sel.png" alt="">
|
||||
<img v-else src="../../assets/img/status-true-nosel.png" alt="">
|
||||
手机控制
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-fan">
|
||||
<div class="btn" :class="fanStatus.status[0] == 1 ? 'blue' : 'off'">
|
||||
<img v-if="fanStatus.status[0] == 1" src="../../assets/img/fan-on.png" alt="">
|
||||
<img v-else src="../../assets/img/fan-off.png" alt="">
|
||||
1#风机
|
||||
</div>
|
||||
<div class="btn" :class="fanStatus.status[1] == 1 ? 'blue' : 'off'">
|
||||
<img v-if="fanStatus.status[1] == 1" src="../../assets/img/fan-on.png" alt="">
|
||||
<img v-else src="../../assets/img/fan-off.png" alt=""> 2#风机
|
||||
</div>
|
||||
<div class="btn" :class="fanStatus.status[2] == 1 ? 'blue' : 'off'">
|
||||
<img v-if="fanStatus.status[2] == 1" src="../../assets/img/fan-on.png" alt="">
|
||||
<img v-else src="../../assets/img/fan-off.png" alt=""> 3#风机
|
||||
</div>
|
||||
<div class="btn" :class="fanStatus.status[3] == 1 ? 'blue' : 'off'">
|
||||
<img v-if="fanStatus.status[3] == 1" src="../../assets/img/fan-on.png" alt="">
|
||||
<img v-else src="../../assets/img/fan-off.png" alt=""> 4#风机
|
||||
</div>
|
||||
<div class="btn" :class="fanStatus.status[4] == 1 ? 'blue' : 'off'">
|
||||
<img v-if="fanStatus.status[4] == 1" src="../../assets/img/fan-on.png" alt="">
|
||||
<img v-else src="../../assets/img/fan-off.png" alt=""> 5#风机
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="status-noTrue">
|
||||
<img src="../../assets/img/status-no.png" alt="">
|
||||
<div>当前设备无效</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-view" v-for="item, index in statusList" :key="index">
|
||||
<div class="status-view-top">
|
||||
<div class="status-view-top-left">{{ item.name }}</div>
|
||||
<!-- <el-popover placement="top" width="140">
|
||||
<div class="set-status-blue">进入修改设定值</div>
|
||||
<el-popover placement="top" width="160">
|
||||
<p class="del-text"><i style="color:red" class="el-popconfirm__icon el-icon-info"></i>确认删除?
|
||||
</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button class="el-button el-button--text el-button--mini color-blue">取消</el-button>
|
||||
<el-button class="el-button el-button--text el-button--mini color-blue">确定</el-button>
|
||||
</div>
|
||||
<div class="set-status-red" slot="reference">删除</div>
|
||||
</el-popover>
|
||||
<el-popover placement="right" width="100">
|
||||
<input v-model="item.index" type="text" class="status-save">
|
||||
<el-button class="el-button el-button--text el-button--mini color-blue">保存</el-button>
|
||||
<div class="set-status-blue" slot="reference">排序</div>
|
||||
</el-popover>
|
||||
<img class="status-view-top-right" slot="reference" src="../../assets/img/more.png" alt="">
|
||||
</el-popover> -->
|
||||
<img class="status-view-top-right" slot="reference" src="../../assets/img/more.png" alt="">
|
||||
</div>
|
||||
<div class="status-view-content">
|
||||
<div v-if="item.open != 0" class="status-true">
|
||||
<div class="status-true-sel">
|
||||
<div class="sel">
|
||||
<img v-if="item.open == 1" src="../../assets/img/status-true-sel.png" alt="">
|
||||
<img v-else src="../../assets/img/status-true-nosel.png" alt="">
|
||||
自动控制
|
||||
</div>
|
||||
<div class="sel-phone">
|
||||
<img v-if="item.open != 1" src="../../assets/img/status-true-sel.png" alt="">
|
||||
<img v-else src="../../assets/img/status-true-nosel.png" alt="">
|
||||
手机控制
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-true-charts">
|
||||
<img src="../../assets/img/status-true-charts-icon.png" alt="">
|
||||
<div :id="'statusCharts' + index"></div>
|
||||
</div>
|
||||
<div class="status-true-text">
|
||||
<div class="status-true-text-left">静止状态</div>
|
||||
<div class="status-true-text-right">{{ item.progress }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="status-noTrue">
|
||||
<img src="../../assets/img/status-no.png" alt="">
|
||||
<div>当前设备无效</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import EZUIKit from 'ezuikit-js';
|
||||
import { getnowtime } from '../../assets/js/nowTime'
|
||||
import { realTimeLine } from '@/assets/js/charts'
|
||||
import { realTimeLine, statusCharts } from '@/assets/js/charts'
|
||||
import videojs from 'video.js';
|
||||
import video_zhCN from 'video.js/dist/lang/zh-CN.json'
|
||||
import vueSeamless from 'vue-seamless-scroll'
|
||||
|
|
@ -78,7 +205,7 @@ export default {
|
|||
defaultOption() {
|
||||
return {
|
||||
step: 0.3, // 数值越大速度滚动越快
|
||||
limitMoveNum: 9, // 开始无缝滚动的数据量 this.dataList.length
|
||||
limitMoveNum: 7, // 开始无缝滚动的数据量 this.dataList.length
|
||||
hoverStop: true, // 是否开启鼠标悬停stop
|
||||
direction: 2, // 0向下 1向上 2向左 3向右
|
||||
openWatch: true, // 开启数据实时监控刷新dom
|
||||
|
|
@ -102,6 +229,11 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
statusList: [],
|
||||
|
||||
fanStatus: {
|
||||
name: '风机', open: 0, status: []
|
||||
},
|
||||
time: null,//右上角时间
|
||||
list: [],
|
||||
inputData: [],
|
||||
|
|
@ -120,15 +252,15 @@ export default {
|
|||
this.indexs = this.$route.query.index ? this.$route.query.index : store.equipmentIndex;
|
||||
this.deviceName = store.equipmentList[this.indexs - 1].deviceName
|
||||
setTimeout(() => {
|
||||
|
||||
if(this.player){
|
||||
|
||||
if (this.player) {
|
||||
this.player.stop()
|
||||
that.player.destroy()
|
||||
that.player=null
|
||||
that.player = null
|
||||
}
|
||||
that.dataInit();
|
||||
|
||||
|
||||
|
||||
|
||||
}, 0);
|
||||
},
|
||||
},
|
||||
|
|
@ -155,19 +287,22 @@ export default {
|
|||
// this.player.dispose();
|
||||
this.player.stop()
|
||||
this.player.destroy()
|
||||
this.player=null
|
||||
this.player = null
|
||||
}
|
||||
that.timer && clearInterval(that.timer)
|
||||
this.$bus.$off('refreshTime')
|
||||
},
|
||||
methods: {
|
||||
createVideoNew() {
|
||||
padString(str, length) {
|
||||
return str.padStart(length, '0');
|
||||
},
|
||||
createVideoNew(accessToken) {
|
||||
// divW和divH是获取了父级宽高 使播放容器能铺满div
|
||||
let divW = this.$refs.monitor.clientWidth
|
||||
let divH = this.$refs.monitor.clientHeight
|
||||
this.player = new EZUIKit.EZUIKitPlayer({
|
||||
this.player = new EZUIKit.EZUIKitPlayer({
|
||||
id: 'video-js', // 视频容器ID
|
||||
accessToken: 'at.757ro68z1ur26g6f1ondfwl1cl1bivxy-4ckiflya3u-1192hd2-ucup11mjb',
|
||||
accessToken: accessToken,
|
||||
url: this.url,
|
||||
// 官方url例子：ezopen://open.ys7.com/G39444019/1.live 也可并非.live结尾 详见GitHub
|
||||
// 播放主题 simple-极简版; standard-标准版; security-安防版; voice-语音版; 自定义主题详见GitHub
|
||||
|
|
@ -330,14 +465,14 @@ export default {
|
|||
// channelid: '1'
|
||||
// }
|
||||
if (!this.player) {
|
||||
this.api.getGethls(data2).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
this.url = res.data.msg
|
||||
this.createVideoNew()
|
||||
}
|
||||
})
|
||||
this.api.getGethls(data2).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
this.url = res.data.data.ezopen
|
||||
this.createVideoNew(res.data.data.accesstoken)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
} else if (this.deviceName == 10) {
|
||||
this.api.getControlRtdata(equipmentId).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
|
|
@ -406,6 +541,39 @@ export default {
|
|||
// console.log(this.controlList);
|
||||
})
|
||||
|
||||
var TargetValue = {
|
||||
deviceId: store.equipmentList[this.indexs - 1].deviceId
|
||||
}
|
||||
this.api.getControlGetState(TargetValue).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
console.log(res.data.data, 123123);
|
||||
this.fanStatus.open = res.data.data['1023']
|
||||
this.fanStatus.status = []
|
||||
var num = res.data.data['1024']
|
||||
var num1 = this.padString(num.toString(2), 5)
|
||||
var openListNew = []
|
||||
openListNew = num1.split("")
|
||||
this.fanStatus.status = openListNew.reverse()
|
||||
this.statusList = []
|
||||
for (var i = 0; i < 4; i++) {
|
||||
var statusData = { name: `顶卷膜${i + 1}`, open: res.data.data[(1025 + (i * 3))], progress: res.data.data[(1027 + (i * 3))], index: res.data.data[(1026 + (i * 3))] }
|
||||
this.statusList.push(statusData)
|
||||
|
||||
|
||||
}
|
||||
this.$forceUpdate();
|
||||
setTimeout(() => {
|
||||
this.statusList.forEach((el,index)=>{
|
||||
if(el.open!=0){
|
||||
statusCharts(`statusCharts${index}`,el.progress)
|
||||
}
|
||||
})
|
||||
}, 10);
|
||||
|
||||
} else {
|
||||
// this.$message.error(res.data.msg);
|
||||
}
|
||||
})
|
||||
var data1 = store.equipmentList[this.indexs - 1].deviceId
|
||||
|
||||
this.api.getControlFsdata(data1).then(res => {
|
||||
|
|
@ -431,8 +599,8 @@ export default {
|
|||
this.api.getGethls(data2).then(res => {
|
||||
// console.log(res.data, 11);
|
||||
if (res.data.code == 200) {
|
||||
this.url = res.data.msg
|
||||
this.createVideoNew()
|
||||
this.url = res.data.data.ezopen
|
||||
this.createVideoNew(res.data.data.accesstoken)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -454,4 +622,40 @@ export default {
|
|||
.video-js-select-quality-item {
|
||||
color: rgba(0, 0, 0, 0.85) !important;
|
||||
}
|
||||
|
||||
.set-status-blue {
|
||||
color: #409eff;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.set-status-red {
|
||||
color: red;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.del-text {
|
||||
color: #000;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.color-blue {
|
||||
span {
|
||||
color: #409eff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.status-save {
|
||||
width: 45px;
|
||||
height: 28px;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #dcdfe6;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -42,8 +42,11 @@
|
|||
<input @blur="blurChange('63', $event)" v-model="inputData['63']" @input="change16to10('63', $event)" type="text" placeholder="0">
|
||||
<input @blur="blurChange('64', $event)" v-model="inputData['64']" @input="change16to10('64', $event)" type="text" placeholder="0">
|
||||
</div>
|
||||
<div class="system-tips">说明:4G: =0，无网络:=2.2G网络了=4.4G网络SII: -0.SII卡正常;-1，无SII卡:-2.SI[卡异常(网络注册失败)信号质堡: CSQ
|
||||
<11,信号很差: 11<CSQ<10,信号不稳定: CSQ>18,信号稳定，最大是31.</div>
|
||||
<div class="system-tips">
|
||||
说明:4G:=0,无网络;=2,2G网络;=4,4G网络 <br>
|
||||
SIM:=0,SIM卡正常;=1,无SIM卡;=2,SIM卡异常(网络注册失败)<br>
|
||||
信号质量:CSQ<11 信很差;11<CSQ<18,信号不稳定;CSQ>18,信号稳定,最大是31.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,170 @@
|
|||
<template>
|
||||
<div class="index">
|
||||
<div class="header">
|
||||
<div class="header-left">
|
||||
<img src="../assets/image/logo.png" alt="">
|
||||
</div>
|
||||
<div class="header-center">
|
||||
|
||||
</div>
|
||||
<div class="header-right" v-if="userInfo">
|
||||
<img src="../assets/image/avatar.png" alt="">
|
||||
<div class="user-data">
|
||||
<div class="name">欢迎，{{ userInfo.nickName }}</div>
|
||||
<div class="time" v-if="time"> {{ time.year.year }}-{{ time.year.month }}-{{ time.year.date }}</div>
|
||||
</div>
|
||||
<div class="login-out" @click="loginOut"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="index-content">
|
||||
<div class="left collapse scroll">
|
||||
<el-collapse v-model="activeNames">
|
||||
<template v-for="item, index in leftList">
|
||||
<el-collapse-item :name="index + 1" :key="index" v-if="!item.isRouter">
|
||||
<template slot="title" class="collapse-title">
|
||||
<div class="img"><img :src="item.img" alt=""></div> {{ item.name }}
|
||||
</template>
|
||||
<ul class="table-ul">
|
||||
<li class="table-li" @click="toRouter1(item1)"
|
||||
:class="item.routerList.indexOf(routerNow) != -1 && routerIndex == item1.index ? 'active' : ''"
|
||||
v-for="item1, index1 in item.list" :key="index1">{{ item1.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</el-collapse-item>
|
||||
<div @click="toRouter1(item)" :class="routerNow == item.router ? 'active' : ''" class="no-list"
|
||||
v-else>
|
||||
<div class="img"><img :src="item.img" alt=""></div>{{ item.name }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</el-collapse>
|
||||
</div>
|
||||
<div class="right right-page">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getnowtime } from '../assets/js/nowTime'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
time: null,//当前时间
|
||||
|
||||
|
||||
activeNames: [3],
|
||||
leftList: [
|
||||
{ name: '种植计划', img: require('../assets/image/vrcode-icon0.png'), list: [], router: '', isRouter: true, },
|
||||
{ name: '生产环节', routerList: [], img: require('../assets/image/vrcode-icon1.png'), list: [{ name: '农事管理' }, { name: '施肥记录' }, { name: '打药记录' }, { name: '采摘记录' }, { name: '清洁记录' }, { name: '病虫害管理' },] },
|
||||
{ name: '产品追溯', routerList: [], img: require('../assets/image/vrcode-icon2.png'), list: [{ name: '溯源批次' }, { name: '配置溯源版面' }, { name: '各种报告库' }] },
|
||||
{ name: '基础信息设置', routerList: [], img: require('../assets/image/vrcode-icon3.png'), list: [{ name: '作物品种' }, { name: '种植栽培模式' }, { name: '农事作业工序' }, { name: '人员管理' }, { name: '农场信息管理' }, { name: '供应商管理' }, { name: '生产资料管理' }, { name: '农机工具管理' }, { name: '作物外观图片库' },] },],
|
||||
routerNow: 'plantingPlan',
|
||||
deviceName: 1,
|
||||
routerIndex: 1,
|
||||
equipmentList: [],
|
||||
userInfo: null,
|
||||
loading: true,//页面加载
|
||||
IDTimer: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
"$route"(newName, oldName) {
|
||||
this.gerRouter();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const that = this
|
||||
this.getTime()
|
||||
var router = this.$route.query
|
||||
if (router.token && router.userid) {
|
||||
localStorage.setItem('token', router.token)
|
||||
|
||||
this.api.getUser({ userId: router.userid }).then(res => {
|
||||
var data = res.data.data
|
||||
data.userid = router.userid
|
||||
localStorage.setItem('userInfo', JSON.stringify(data))
|
||||
this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
|
||||
this.gerRouter();
|
||||
// this.getEqbyid()
|
||||
})
|
||||
return
|
||||
} else {
|
||||
if (localStorage.getItem('token')) {
|
||||
this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
|
||||
}
|
||||
this.gerRouter();
|
||||
// this.getEqbyid()
|
||||
}
|
||||
this.IDTimer && clearInterval(this.IDTimer)
|
||||
this.IDTimer = setInterval(() => {
|
||||
// that.getEqbyid()
|
||||
}, 120000);
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.IDTimer && clearInterval(this.IDTimer)
|
||||
},
|
||||
methods: {
|
||||
|
||||
gerRouter() {
|
||||
var store = this.$store.state
|
||||
this.routerIndex = this.$route.query.index ? this.$route.query.index : store.equipmentIndex
|
||||
this.routerNow = this.$route.name;
|
||||
if (store.equipmentList.length) {
|
||||
this.deviceName = store.equipmentList[this.routerIndex - 1].deviceName
|
||||
} else {
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
loginOut() {
|
||||
this.api.loginOut().then((res) => {
|
||||
|
||||
if (res.data.code == 200) {
|
||||
this.$message({
|
||||
message: '退出登录成功',
|
||||
type: "success",
|
||||
});
|
||||
localStorage.removeItem('token')
|
||||
localStorage.removeItem('userInfo')
|
||||
this.$router.push({ name: 'login' })
|
||||
} else {
|
||||
this.$message.error("请求出错");
|
||||
}
|
||||
})
|
||||
},
|
||||
toHome() {
|
||||
this.$router.push({ name: 'home' })
|
||||
},
|
||||
toRouter(item) {
|
||||
if (item.router) {
|
||||
if (item.http) {
|
||||
window.location.href = item.http;
|
||||
}
|
||||
} else {
|
||||
this.$message('当前页面正在努力开发中');
|
||||
}
|
||||
},
|
||||
toRouter1(item) {
|
||||
if (item.router) {
|
||||
if (item.http) {
|
||||
window.location.href = item.http;
|
||||
}
|
||||
} else {
|
||||
this.$message('当前页面正在努力开发中');
|
||||
}
|
||||
},
|
||||
getTime() {
|
||||
this.time = getnowtime()
|
||||
const that = this
|
||||
setInterval(() => {
|
||||
that.time = getnowtime()
|
||||
}, 1000);
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss"></style>
|
||||
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<div class="plantingPlan">
|
||||
<div class="page-content">
|
||||
<div class="table-title">
|
||||
<img src="../../assets/img/plan.png" alt="" />
|
||||
种植计划
|
||||
</div>
|
||||
<div class="flex-view">
|
||||
<div class="btn green"><img src="../../assets/img/add.png" alt="">新增种植计划</div>
|
||||
</div>
|
||||
<div class="flex-view border-none">
|
||||
<div class="plan-view" v-for="item,index in 10">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() { },
|
||||
methods: {},
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss"></style>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue