yemain1iuyd
This commit is contained in:
parent
141717d414
commit
7753949535
22
src/api.js
22
src/api.js
|
|
@ -40,8 +40,22 @@ export function deviceAlarmCountApi(params) {
|
|||
return instacne.get('/api/dataview.device/deviceAlarmCount', { params })
|
||||
}
|
||||
|
||||
export function deviceCountApi(params) {
|
||||
return instacne.get('/api/dataview.device/deviceCount', { params })
|
||||
}
|
||||
export function plantProductCountApi(params) {
|
||||
return instacne.get('/api/dataview.land/plantProductCount', { params })
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
//api/dataview/merchant?mer_id=36&areaCode=510524&streetCode=510524100
|
||||
// }
|
||||
export function landCollectionListApi(params) {
|
||||
return instacne.get('/api/dataview.land/landCollectionList', { params })
|
||||
}
|
||||
export function landMonitorAlarmHistoryApi(params) {
|
||||
return instacne.get('/api/dataview.land/landMonitorAlarmHistory', { params })
|
||||
}
|
||||
export function landListApi(params) {
|
||||
return instacne.get('/api/dataview.land/landList', { params })
|
||||
}
|
||||
export function productListApi(params) {
|
||||
return instacne.get('/api/dataview.land/productList', { params })
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,12 +41,15 @@
|
|||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue"
|
||||
import axios from "axios";
|
||||
|
||||
import * as echarts from 'echarts';
|
||||
import "echarts-gl"
|
||||
import iconbg from '/static/index/mapicon.png'
|
||||
|
||||
import geoJson from "/static/jsonData/xuantan.js"
|
||||
const u = 'https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231129\/202311291816106120a4034.png'
|
||||
import {useRouter} from "vue-router"
|
||||
|
||||
|
||||
const router=useRouter()
|
||||
const icon = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231204\/202312041608529c9e21252.png"
|
||||
const lx="https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231205\/20231205092709cfe148712.png"
|
||||
|
||||
|
|
@ -55,9 +58,6 @@ const pointerFn = () => {
|
|||
// console.log()
|
||||
let list = []
|
||||
geoJson.center.forEach((item, index) => {
|
||||
|
||||
|
||||
|
||||
list.push({
|
||||
coord: item,
|
||||
symbol: index==geoJson.center.length-1?('image://'+lx): ('image://' + icon),// 自定义图片路径
|
||||
|
|
@ -284,11 +284,18 @@ onMounted(() => {
|
|||
const bg = echarts.init(myChart)
|
||||
bg.setOption(option);
|
||||
|
||||
bg.on('click', function (params) {
|
||||
mapClick()
|
||||
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
const mapClick=()=>{
|
||||
router.push("/detail")
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,99 @@
|
|||
<template>
|
||||
|
||||
|
||||
<div class="bottom-li" :class="(item.flag) ? 'act' : ''" v-for="(item, index) in environmentData">
|
||||
|
||||
<span class="color-font">{{ item.name }}</span>
|
||||
<span>{{ item.value }}{{ item.unit }}</span>
|
||||
<span v-if="item.flag">状态正常</span>
|
||||
<span v-else>状态正常</span>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
|
||||
import {ref,reactive} from "vue"
|
||||
const environmentData = reactive([
|
||||
|
||||
{
|
||||
name: "风速",
|
||||
value: 10,
|
||||
unit: "m/s",
|
||||
flag: true
|
||||
},
|
||||
{
|
||||
name: "风向",
|
||||
value: 10,
|
||||
unit: "",
|
||||
flag: false
|
||||
},
|
||||
{
|
||||
name: "环境湿度",
|
||||
value: 10,
|
||||
unit: "%",
|
||||
flag: false
|
||||
},
|
||||
{
|
||||
name: "环境温度",
|
||||
value: 10,
|
||||
unit: "℃",
|
||||
flag: false
|
||||
},
|
||||
{
|
||||
name: "二氧化碳",
|
||||
value: 10,
|
||||
unit: "ppm",
|
||||
flag: true
|
||||
},
|
||||
{
|
||||
name: "环境气压",
|
||||
value: 10,
|
||||
unit: "pa",
|
||||
flag: true
|
||||
},
|
||||
{
|
||||
name: "雨量",
|
||||
value: 10,
|
||||
unit: "mm/h",
|
||||
flag: false
|
||||
},
|
||||
{
|
||||
name: "环境光照",
|
||||
value: 10,
|
||||
unit: "%",
|
||||
flag: true
|
||||
},
|
||||
])
|
||||
</script>
|
||||
<style lang="scss">
|
||||
|
||||
|
||||
.bottom-li {
|
||||
// background-color: #fff;
|
||||
width: 49%;
|
||||
height: 4vh;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
// border: 1px solid red;
|
||||
background-image: url('/static/detail/ZC.png');
|
||||
background-size: 100% 100%;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
color: #E5EFFF;
|
||||
font-family: FZCYJ;
|
||||
padding: 0 1VW;
|
||||
|
||||
}
|
||||
|
||||
.act {
|
||||
background-image: url('/static/detail/YC.png');
|
||||
color: #C65956;
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<template>
|
||||
<warnDetail v-if="showWarnDeatil" @off="showWarnDeatil = false"></warnDetail>
|
||||
<scrollTable @click="hdClick3" :config="config3" style="width:100%;height:100%"></scrollTable>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive } from "vue"
|
||||
import warnDetail from "@/components/warnDetail.vue"
|
||||
|
||||
const showWarnDeatil = ref(false)
|
||||
import scrollTable from "@/components/scrollTable.vue"
|
||||
|
||||
const hdClick3 = (e) => {
|
||||
if (e.ceil) {
|
||||
if (e.columnIndex == 3) {
|
||||
showWarnDeatil.value = true
|
||||
}
|
||||
}
|
||||
}
|
||||
const alignFn = (num) => {
|
||||
let arr = []
|
||||
for (let i = 0; i < num; i++) {
|
||||
arr.push('center')
|
||||
}
|
||||
return arr
|
||||
}
|
||||
|
||||
const config3 = reactive({
|
||||
header: ['产品名称', '溯源码', '产品名称', '溯源码',],
|
||||
headerBGC: "#092757",
|
||||
oddRowBGC: "#0C2045",
|
||||
headerStyle: "background-image: url('/static/index/SBGJBG.png');font-family: FZCYJ;background-size: 100% 100%;",
|
||||
align: alignFn(4),
|
||||
data: [
|
||||
['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
|
||||
['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
|
||||
['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
|
||||
['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
|
||||
['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
|
||||
['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
|
||||
['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
|
||||
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<div style="display: flex;justify-content: space-between;align-items: center;">
|
||||
<span>种植总面积：</span>
|
||||
<div>
|
||||
<span class="area-num "><span class="color-font">2</span> </span>
|
||||
<span class="area-num "><span class="color-font">2</span> </span>
|
||||
<span class="area-num "><span class="color-font">2</span> </span>
|
||||
<span class="area-num "><span class="color-font">2</span> </span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="">种植种类：</div>
|
||||
<div>
|
||||
<div class="lands">
|
||||
<div class="land" v-for="(item, index) in 33" :key="index">地块</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
.area-num {
|
||||
margin-right: 10px;
|
||||
width: 35px;
|
||||
height: 40px;
|
||||
background-image: url("/static/detail/numbg.png");
|
||||
display: inline-block;
|
||||
background-size: 100% 100%;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.lands {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
overflow-y: auto;
|
||||
margin-top: 1vh;
|
||||
height: 15vh;
|
||||
|
||||
.land {
|
||||
width: 5vw;
|
||||
height: 3vh;
|
||||
// background-color: #fff;
|
||||
background-image: url('/static/detail/ZL.png');
|
||||
background-size: 100% 100%;
|
||||
color: white;
|
||||
text-align: center;
|
||||
line-height: 3vh;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.lands::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
background-color: #153041;
|
||||
}
|
||||
|
||||
.lands::-webkit-scrollbar-track {
|
||||
background-color: #153041;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #15A1DC;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<template>
|
||||
<div class="r-b-li" :class="item.flag ? '' : 'act'" v-for="(item, index) in MoistureData" :key="index">
|
||||
<span style="color: azure;">{{ item.name }}</span>
|
||||
<span>{{ item.value }} {{ item.unit }}</span>
|
||||
<span v-if="item.flag">状态正常</span>
|
||||
<span v-else>状态异常</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import {reactive} from "vue"
|
||||
|
||||
|
||||
const MoistureData = reactive([
|
||||
{
|
||||
name: "土壤温度",
|
||||
value: 12,
|
||||
unit: "℃",
|
||||
flag: true
|
||||
}, {
|
||||
name: "土壤湿度",
|
||||
value: 12,
|
||||
unit: "℃",
|
||||
flag: false
|
||||
}, {
|
||||
name: "土壤电导率",
|
||||
value: 12,
|
||||
unit: "ps/cm",
|
||||
flag: true
|
||||
}, {
|
||||
name: "土壤PH值",
|
||||
value: 4,
|
||||
unit: "",
|
||||
flag: true
|
||||
}, {
|
||||
name: "土壤含氮量",
|
||||
value: 12,
|
||||
unit: "",
|
||||
flag: false
|
||||
}, {
|
||||
name: "土壤含磷量",
|
||||
value: 12,
|
||||
unit: "",
|
||||
flag: false
|
||||
},
|
||||
{
|
||||
name: "土壤含钾量",
|
||||
value: 12,
|
||||
unit: "",
|
||||
flag: true
|
||||
},
|
||||
|
||||
|
||||
|
||||
])
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.r-b-li {
|
||||
width: 95%;
|
||||
height: 7.5vh;
|
||||
background-image: url('/static/detail/SQBG.png');
|
||||
background-size: 100% 100%;
|
||||
color: white;
|
||||
font-family: FZCYJ;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 0 1.5VW;
|
||||
font-size: 14PX;
|
||||
}
|
||||
|
||||
.act {
|
||||
color: #C55956;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
<template>
|
||||
<div>监控设备总数: <span class="num">1528</span> 台</div>
|
||||
<div class="cont">
|
||||
<div style="display: flex;justify-content: space-between;align-items: center;margin-top: 3vh;">
|
||||
<img src="/static/index/JYZ.png" style="width: 2.8vw; height: 4vw;" alt="">
|
||||
|
||||
<div class="circle">
|
||||
<img src="/static/detail/bk.png" class="act-img" alt="">
|
||||
<div style="width: 110px;height: 110px;" class="online" id="online"></div>
|
||||
</div>
|
||||
<div class="circle">
|
||||
<img src="/static/detail/bk.png" class="act-img" alt="">
|
||||
<div style="width: 110px;height: 110px;" class="online" id="offline"></div>
|
||||
</div>
|
||||
|
||||
<img src="/static/index/JTY.png" style="width: 2.8vw; height: 4vw;" alt="">
|
||||
</div>
|
||||
|
||||
<div class="eqNum">
|
||||
<div>
|
||||
<img src="/static/index/Q.png" alt="" style="transform: translateY(2px);"> 在线设备统计：<span class="num"
|
||||
style="margin-left: 10px;">1418</span> 台
|
||||
</div>
|
||||
<div>
|
||||
<img src="/static/index/Q.png" style="transform: translateY(2px);"> 离线设备统计：<span class="num"
|
||||
style="margin-left: 10px;">1418</span>
|
||||
台
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import {ref,reactive,onMounted} from "vue"
|
||||
import * as echarts from 'echarts';
|
||||
import options from "@/view/option.js"
|
||||
|
||||
|
||||
// 图表
|
||||
const initCharts = (tag, option) => {
|
||||
var chartDom = document.getElementById(tag);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(option);
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
document.getElementById("online").removeAttribute('_echarts_instance_');
|
||||
document.getElementById("offline").removeAttribute('_echarts_instance_');
|
||||
initCharts('online', options.onLine)
|
||||
initCharts('offline', options.offLine)
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.num {
|
||||
font-size: 20px;
|
||||
font-family: FZCYJ;
|
||||
color: #E5EFFF;
|
||||
background: linear-gradient(to bottom, #DAE8FE 30%, #53A0FF 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.cont {
|
||||
height: 70%;
|
||||
|
||||
.eqNum {
|
||||
margin-top: 2vh;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-size: 11px;
|
||||
background-image: url('/static/index/BTBG.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
position: relative;
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.act-img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
animation: spin 2s linear infinite;
|
||||
left: -0%;
|
||||
top: 0%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.online {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<template>
|
||||
<warnPop v-if="showWarnPop" ref="ChildsDom" @off="showWarnPop = false"></warnPop>
|
||||
<scrollTable v-if="config.data.length" :config="config" @click="hdClick" style="width:100%;height:100%"></scrollTable>
|
||||
</template>
|
||||
<script setup>
|
||||
import {ref,reactive} from "vue"
|
||||
import scrollTable from "@/components/scrollTable.vue"
|
||||
import warnPop from "@/components/warnPop.vue"
|
||||
import {landCollectionListApi} from "@/api.js"
|
||||
const showWarnPop = ref(false)
|
||||
const ChildsDom = ref(null);
|
||||
const hdClick = (e) => {
|
||||
// console.log(e)
|
||||
if (e.ceil) {
|
||||
if (e.columnIndex == 9) {
|
||||
showWarnPop.value = true
|
||||
}
|
||||
}
|
||||
}
|
||||
const alignFn = (num) => {
|
||||
let arr = []
|
||||
for (let i = 0; i < num; i++) {
|
||||
arr.push('center')
|
||||
}
|
||||
return arr
|
||||
}
|
||||
const config = reactive({
|
||||
header: ['地块名称', '土壤温度(℃)', '土壤湿度', '土壤PH值', '土壤氮磷钾', '风速（m/s）', '环境温度(℃)', '环境湿度', '二氧化碳（ppm）', '历史预警数据'],
|
||||
headerBGC: "#092757",
|
||||
font:'10px',
|
||||
headerStyle: "background-image: url('/static/index/tableHead.png');font-family: FZCYJ;background-size: 100% 100%;",
|
||||
oddRowBGC: "#0C2045",
|
||||
align: alignFn(10),
|
||||
data: [ ]
|
||||
})
|
||||
|
||||
|
||||
landCollectionListApi(
|
||||
{
|
||||
areaCode:510521,
|
||||
streetCode:510521100
|
||||
}
|
||||
|
||||
).then(res=>{
|
||||
res.data.list.forEach(item => {
|
||||
config.data.push(
|
||||
[item.title, item.soil_temperature,item.soil_moisture, item.soil_PH,item.soil_potassium_phosphate_nitrogen+'/'+item.soil_potassium_phosphate_phosphorus+'/'+item.soil_potassium_phosphate_potassium, item.wind_speed, item.ambient_temperature, item.ambient_humidity, item.carbon_dioxide, `<span style='color:#2562AD' > 查看<span>`]
|
||||
)
|
||||
|
||||
});
|
||||
})
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<template>
|
||||
<scrollTable :config="config2" style="width:100%;height:100%" v-if="config2.data.length"></scrollTable>
|
||||
</template>
|
||||
<script setup>
|
||||
import scrollTable from "@/components/scrollTable.vue"
|
||||
import { ref, reactive, onMounted } from "vue"
|
||||
import { plantProductCountApi } from "@/api.js"
|
||||
|
||||
const alignFn = (num) => {
|
||||
let arr = []
|
||||
for (let i = 0; i < num; i++) {
|
||||
arr.push('center')
|
||||
}
|
||||
return arr
|
||||
}
|
||||
const config2 = reactive({
|
||||
header: ['产品名称', '溯源码', '产品名称', '溯源码',],
|
||||
headerBGC: "#092757",
|
||||
oddRowBGC: "#0C2045",
|
||||
headerStyle: "background:#0E316B",
|
||||
|
||||
align: alignFn(4),
|
||||
data: [ ]
|
||||
})
|
||||
|
||||
|
||||
const correctionListFn = (list) => {
|
||||
const originalArray = list;
|
||||
const transformedArray = originalArray.reduce((acc, curr, index) => {
|
||||
if (index % 2 === 0) {
|
||||
acc.push([curr]);
|
||||
} else {
|
||||
acc[acc.length - 1].push(curr);
|
||||
}
|
||||
return acc;
|
||||
}, []);
|
||||
|
||||
return transformedArray
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
plantProductCountApi(
|
||||
{
|
||||
areaCode: 510521,
|
||||
streetCode: 510521100
|
||||
|
||||
}
|
||||
).then(res => {
|
||||
correctionListFn(res.data.list).forEach(item => {
|
||||
config2.data.push(
|
||||
[item[0].kind, `<img src=${ item[0].qr_code} style='width:25px;height:25px;transform: translateY(5PX);'/>` , item[1].kind,`<img src=${ item[1].qr_code} style='width:25px;height:25px;transform: translateY(5PX);'/>` ]
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>监控设备总数: <span class="num color-font">1528</span> 台</div>
|
||||
<div>监控设备总数: <span class="num color-font">{{ totalNum }}</span> 台</div>
|
||||
<div class="cont">
|
||||
<div style="display: flex;justify-content: space-between;align-items: center;margin-top: 3vh;">
|
||||
<img src="/static/index/JYZ.png" style="width: 2.8vw; height: 4vw;" alt="">
|
||||
|
|
@ -16,18 +16,356 @@
|
|||
<div class="eqNum">
|
||||
<div>
|
||||
<img src="/static/index/Q.png" alt="" style="transform: translateY(2px);"> 在线设备统计：<span
|
||||
class="num color-font" style="margin-left: 10px;">1418</span> 台
|
||||
class="num color-font" style="margin-left: 10px;">{{ onlineNum }}</span> 台
|
||||
</div>
|
||||
<div>
|
||||
<img src="/static/index/Q.png" style="transform: translateY(2px);"> 离线设备统计：<span class="num color-font"
|
||||
style="margin-left: 10px;">1418</span>
|
||||
style="margin-left: 10px;">{{ offlineNum }}</span>
|
||||
台
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
|
||||
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { ref, reactive, onMounted } from "vue"
|
||||
import { deviceCountApi } from "@/api.js"
|
||||
const totalNum = ref(0)
|
||||
const onlineNum = ref(0)
|
||||
const offlineNum = ref(0)
|
||||
const setOnlineFn = (data) => {
|
||||
const onLine = reactive(
|
||||
{
|
||||
title: [
|
||||
|
||||
{
|
||||
text: (data.value / data.total * 100) + '%',
|
||||
x: 'center',
|
||||
top: '42%',
|
||||
textStyle: {
|
||||
fontSize: 13,
|
||||
color: '#00f0ff',
|
||||
foontWeight: '500',
|
||||
},
|
||||
},
|
||||
],
|
||||
polar: {
|
||||
radius: ['44%', '50%'],
|
||||
center: ['50%', '50%'],
|
||||
},
|
||||
angleAxis: {
|
||||
max: 100,
|
||||
show: false,
|
||||
},
|
||||
radiusAxis: {
|
||||
type: 'category',
|
||||
show: true,
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
startAngle: 90,
|
||||
radius: ['60%', '80%'],
|
||||
center: ['50%', '50%'],
|
||||
data: [
|
||||
{
|
||||
name: '数量',
|
||||
value: data.value,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#1598DC",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '剩下',
|
||||
value: (data.total - data.value),
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(31, 110, 255, 0)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
hoverAnimation: false,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'pie',
|
||||
startAngle: (90 + (1 - data.rate) * 360),
|
||||
radius: ['62%', '77%'],
|
||||
center: ['50%', '50%'],
|
||||
data: [
|
||||
{
|
||||
name: '数量',
|
||||
value: (data.total - data.value),
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#1C3C65',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '剩下',
|
||||
value: data.value,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#1598DC',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
hoverAnimation: false,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
type: 'pie',
|
||||
startAngle: 90,
|
||||
radius: '45%',
|
||||
animation: false,
|
||||
hoverAnimation: false,
|
||||
center: ['50%', '50%'],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(50,171,241, 1)',
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(55,70,130, 0)',
|
||||
},
|
||||
]),
|
||||
shadowBlur: 10,
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 100,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
)
|
||||
|
||||
return onLine
|
||||
}
|
||||
const setOffLineFn = (data) => {
|
||||
const offLine = reactive(
|
||||
{
|
||||
// backgroundColor: '#0F141B',
|
||||
title: [
|
||||
|
||||
{
|
||||
text: (data.value / data.total * 100).toFixed(2) + '%',
|
||||
x: 'center',
|
||||
top: '42%',
|
||||
textStyle: {
|
||||
fontSize: 13,
|
||||
color: '#35BFCA',
|
||||
foontWeight: '500',
|
||||
},
|
||||
},
|
||||
],
|
||||
polar: {
|
||||
radius: ['44%', '50%'],
|
||||
center: ['50%', '50%'],
|
||||
},
|
||||
angleAxis: {
|
||||
max: 100,
|
||||
show: false,
|
||||
},
|
||||
radiusAxis: {
|
||||
type: 'category',
|
||||
show: true,
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
startAngle: 90,
|
||||
radius: ['60%', '80%'],
|
||||
center: ['50%', '50%'],
|
||||
data: [
|
||||
{
|
||||
name: '数量',
|
||||
value: data.value,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#35BFCA",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '剩下',
|
||||
value: (data.total - data.value),
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#1C3D69',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
hoverAnimation: false,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'pie',
|
||||
startAngle: (90 + (1 - data.rate) * 360),
|
||||
radius: ['62%', '77%'],
|
||||
center: ['50%', '50%'],
|
||||
data: [
|
||||
{
|
||||
name: '数量',
|
||||
value: (data.total - data.value),
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#1C3D69',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '剩下',
|
||||
value: data.value,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#35BFCA',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
hoverAnimation: false,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
type: 'pie',
|
||||
startAngle: 90,
|
||||
radius: '45%',
|
||||
animation: false,
|
||||
hoverAnimation: false,
|
||||
center: ['50%', '50%'],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(50,171,241, 1)',
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(55,70,130, 0)',
|
||||
},
|
||||
]),
|
||||
shadowBlur: 10,
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 100,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
|
||||
return offLine
|
||||
}
|
||||
|
||||
// 图表
|
||||
const initCharts = (tag, option) => {
|
||||
var chartDom = document.getElementById(tag);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(option);
|
||||
}
|
||||
deviceCountApi({
|
||||
areaCode: 510521, streetCode: 510521100
|
||||
}).then(res => {
|
||||
totalNum.value = res.data.total
|
||||
onlineNum.value = res.data.online
|
||||
offlineNum.value = res.data.offline
|
||||
let result = {}
|
||||
result.total = res.data.total
|
||||
result.value = res.data.online
|
||||
result.rate = result.value / result.total.toFixed(4);
|
||||
initCharts('online', setOnlineFn(result))
|
||||
let result2 = {}
|
||||
result2.total = res.data.total
|
||||
result2.value = res.data.offline
|
||||
result2.rate = result2.value / result2.total.toFixed(4);
|
||||
initCharts('offline', setOffLineFn(result2))
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
document.getElementById("online").removeAttribute('_echarts_instance_');
|
||||
document.getElementById("offline").removeAttribute('_echarts_instance_');
|
||||
// scrollTableFn()
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.num {
|
||||
|
||||
font-size: 20px;
|
||||
|
|
@ -83,5 +421,4 @@ height: 70%;
|
|||
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -54,7 +54,6 @@ onMounted( ()=>{
|
|||
}
|
||||
).then(res=>{
|
||||
|
||||
console.log(res.data)
|
||||
res.data.list.forEach(item => {
|
||||
config3.data.push(
|
||||
[item.device_name, item.device_code, item.update_time, `<span style="color:#2562AD"> 详情 </span>`,],
|
||||
|
|
|
|||
|
|
@ -0,0 +1,88 @@
|
|||
<template>
|
||||
<div class="content" id="eq">
|
||||
<div class="eq" v-for="item in productList" :key="item">
|
||||
<img :src="item.image" style="width:8vw;height: 100%;border-radius: 1vh;" alt="">
|
||||
<div
|
||||
style="display: flex;flex-direction: column;justify-content: space-between;margin-left: 1vw;color: #CAD5E5;">
|
||||
<div style="display: flex;align-items: center;">
|
||||
<img src="/static/index/MC.png" style="width:1.7vw;height: 1.5vw;margin-right: 5px; " alt="">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;">
|
||||
<img src="/static/index/JS.png" style="width:1.7vw;height: 1.5vw;margin-right: 5px; " alt="">
|
||||
{{ item.desc }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: 1s;
|
||||
// background-color: #fff;
|
||||
overflow-y: auto;
|
||||
font-size: 14px;
|
||||
|
||||
.eq {
|
||||
width: 100%;
|
||||
height: 10vh;
|
||||
// background-color: #fff;
|
||||
margin-bottom: 1vh;
|
||||
background-color: #092049;
|
||||
box-sizing: border-box;
|
||||
padding: 1vh;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.content::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
background-color: #153041;
|
||||
}
|
||||
|
||||
.content::-webkit-scrollbar-track {
|
||||
background-color: #153041;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #1581DC;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
<script setup>
|
||||
import {ref,reactive,onMounted} from "vue"
|
||||
import {productListApi} from "@/api.js"
|
||||
const scrollTableFn = () => {
|
||||
const tag = document.getElementById('eq')
|
||||
const height = tag.scrollHeight
|
||||
setInterval(() => {
|
||||
tag.scrollTop += 1
|
||||
if ((tag.scrollTop + tag.clientHeight) >= height - 50) {
|
||||
tag.scrollTop = 0
|
||||
|
||||
}
|
||||
}, 50)
|
||||
|
||||
|
||||
}
|
||||
|
||||
const productList=reactive([])
|
||||
productListApi(
|
||||
{
|
||||
areaCode:510521,
|
||||
streetCode:510521100
|
||||
|
||||
}
|
||||
).then(res=>{
|
||||
res.data.list.forEach(item => {
|
||||
productList.push(item)
|
||||
});
|
||||
})
|
||||
|
||||
onMounted( ()=>{
|
||||
scrollTableFn()
|
||||
})
|
||||
</script>
|
||||
|
|
@ -1 +0,0 @@
|
|||
export const VERSION = '#VERSION#'
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="dv-scroll-board" :ref="ref">
|
||||
<div class="header" v-if="header.length && mergedConfig" :style="mergedConfig.headerStyle">
|
||||
<div class="header-item" v-for="(headerItem, i) in header" :key="`${headerItem}${i}`" :style="`
|
||||
height: ${mergedConfig.headerHeight}px;
|
||||
height: ${mergedConfig.headerHeight}px;font-size: ${mergedConfig.font||'12px'};
|
||||
${headerStyle}
|
||||
line-height: ${mergedConfig.headerHeight}px;
|
||||
width: ${widths[i]}px;
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
type="input"
|
||||
autocomplete="on"
|
||||
ref="playUrl"
|
||||
value="http://192.168.1.27/live/test.live.flv?secret=gqig2yfkkdpimic1uwzy1l5msio0eflm"
|
||||
value="http://rtsp.lihaink.cn/live/lihai_lot_walnutpi_dev_1.live.flv?secret=YwDtp2llj80HA19JhMXL4Po99nsMAyNT"
|
||||
/>
|
||||
<button v-if="!playing" @click="play">播放</button>
|
||||
<button v-else @click="pause">停止</button>
|
||||
|
|
|
|||
|
|
@ -5,22 +5,21 @@
|
|||
<div class="l">
|
||||
<div style="position: relative;padding-top: 5px;">
|
||||
<div style="position: absolute;top: 0;">
|
||||
土壤温度（℃）已预警 <span style="color: #B7555A;">10</span> （次）
|
||||
土壤温度（℃）已预警 <span style="color: #B7555A;">{{ data.soil_temperature?.alarmCount }}</span> （次）
|
||||
</div>
|
||||
<div class="t" style="width: 15vw;" id="l_t"></div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative;padding-top: 5px;">
|
||||
<div style="position: absolute;top: 0;">
|
||||
土壤湿度（℃）已预警 <span style="color: #B7555A;">10</span> （次）
|
||||
土壤湿度（℃）已预警 <span style="color: #B7555A;">{{data.soil_moisture?.alarmCount }}</span> （次）
|
||||
</div>
|
||||
<div class="t" id="l_c"></div>
|
||||
</div>
|
||||
<!-- <div class="l-c"></div> -->
|
||||
|
||||
<div style="position: relative;padding-top: 5px;">
|
||||
<div style="position: absolute;top: 0;">
|
||||
土壤PH值 已预警 <span style="color: #B7555A;">10</span> （次）
|
||||
土壤PH值 已预警 <span style="color: #B7555A;">{{data.soil_PH?.alarmCount }}</span> （次）
|
||||
</div>
|
||||
<div class="t" id="l_b"></div>
|
||||
</div>
|
||||
|
|
@ -29,7 +28,7 @@
|
|||
<div>
|
||||
|
||||
<div style="position: absolute;top: 0;">
|
||||
土壤氮磷钾 已预警 <span style="color: #B7555A;">10</span> （次）
|
||||
土壤氮磷钾 已预警 <span style="color: #B7555A;">{{data.soil_potassium_phosphate_nitrogen?.alarmCount }}</span> （次）
|
||||
</div>
|
||||
<div class="c-t" id="c_t"></div>
|
||||
</div>
|
||||
|
|
@ -37,7 +36,7 @@
|
|||
<div class="c-b">
|
||||
|
||||
<div style="position: absolute;top: 0;left: 5vw;">
|
||||
土壤PH值 已预警 <span style="color: #B7555A;">10</span> （次）
|
||||
风速（m/s） 已预警 <span style="color: #B7555A;">{{ data.wind_speed?.alarmCount }}</span> （次）
|
||||
</div>
|
||||
<div id="c_b" style="width: 100%;height: 100%;"></div>
|
||||
</div>
|
||||
|
|
@ -45,14 +44,14 @@
|
|||
<div class="l">
|
||||
<div style="position: relative;padding-top: 5px;">
|
||||
<div style="position: absolute;top: 0;">
|
||||
环境温度（℃）已预警 <span style="color: #B7555A;">10</span> （次）
|
||||
环境温度（℃）已预警 <span style="color: #B7555A;">{{ data.ambient_temperature?.alarmCount }}</span> （次）
|
||||
</div>
|
||||
<div class="t" style="width: 14vw;" id="r_t"></div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative;padding-top: 5px;">
|
||||
<div style="position: absolute;top: 0;">
|
||||
环境湿度（℃）已预警 <span style="color: #B7555A;">10</span> （次）
|
||||
环境湿度（℃）已预警 <span style="color: #B7555A;">{{ data.ambient_humidity?.alarmCount }}</span> （次）
|
||||
</div>
|
||||
<div class="t" id="r_c"></div>
|
||||
</div>
|
||||
|
|
@ -60,7 +59,7 @@
|
|||
|
||||
<div style="position: relative;padding-top: 5px;">
|
||||
<div style="position: absolute;top: 0;">
|
||||
二氧化碳 已预警 <span style="color: #B7555A;">10</span> （次）
|
||||
二氧化碳 已预警 <span style="color: #B7555A;">{{ data.carbon_dioxide?.alarmCount }}</span> （次）
|
||||
</div>
|
||||
<div class="t" id="r_b"></div>
|
||||
</div>
|
||||
|
|
@ -138,6 +137,9 @@
|
|||
import options from "@/view/option"
|
||||
import * as echarts from 'echarts';
|
||||
import { ref, reactive, onMounted, defineEmits } from "vue"
|
||||
import { landMonitorAlarmHistoryApi } from "@/api.js"
|
||||
|
||||
const data=reactive({})
|
||||
const emit = defineEmits(['off'])
|
||||
|
||||
const off = () => {
|
||||
|
|
@ -152,6 +154,305 @@ const initCharts = (tag, option) => {
|
|||
myChart.setOption(option);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
const setoptionsFn = (X, Y) => {
|
||||
|
||||
let data = {
|
||||
color: ["#ffc20e", "#00ae9d"],
|
||||
grid: {
|
||||
top: "5%",
|
||||
left: "2%",
|
||||
right: "5%",
|
||||
bottom: "5%",
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(61, 85, 102, 0.2)",
|
||||
borderWidth: 1,
|
||||
borderColor: "#9DBAE1", // 边框颜色
|
||||
// 选中线颜色
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: "#9DBAE1"
|
||||
}
|
||||
},
|
||||
// 字体颜色
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 10
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
right: "3%",
|
||||
icon: "circle",
|
||||
itemWidth: 8,
|
||||
itemGap: 20,
|
||||
textStyle: {
|
||||
padding: [0, 0, 0, 5]
|
||||
}
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
show: false,
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
color: "#33a3dc",
|
||||
fontSize: 14
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1)"
|
||||
}
|
||||
},
|
||||
data: X
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
show: false,
|
||||
type: "value",
|
||||
name: "",
|
||||
axisLabel: {
|
||||
color: "#33a3dc",
|
||||
fontSize: 14
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "solid",
|
||||
color: "rgba(255,255,255,.1)",
|
||||
width: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "",
|
||||
type: "line",
|
||||
smooth: true, // 是否平滑曲线显示
|
||||
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
||||
symbolSize: 0,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: "white" // 线条颜色
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
// 区域填充样式
|
||||
normal: {
|
||||
// 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 0, color: "rgba(22,84,158, 0.8)" },
|
||||
{ offset: 1, color: "rgba(22,84,158, 0.8)" }
|
||||
],
|
||||
false
|
||||
)
|
||||
// shadowColor: "rgba(53,142,215, 0.9)", // 阴影颜色
|
||||
// shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||||
}
|
||||
},
|
||||
data: Y
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
return data
|
||||
}
|
||||
|
||||
const CKP = {
|
||||
// backgroundColor: "#21263A",
|
||||
// color: ["#ffc20e", "#00ae9d",'red'],
|
||||
grid: {
|
||||
top: "5%",
|
||||
left: "2%",
|
||||
right: "5%",
|
||||
bottom: "5%",
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(61, 85, 102, 0.2)",
|
||||
borderWidth: 1,
|
||||
borderColor: "#9DBAE1", // 边框颜色
|
||||
// 选中线颜色
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: "#9DBAE1"
|
||||
}
|
||||
},
|
||||
// 字体颜色
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 10
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
right: "3%",
|
||||
icon: "circle",
|
||||
itemWidth: 8,
|
||||
itemGap: 20,
|
||||
show:false,
|
||||
textStyle: {
|
||||
padding: [0, 0, 0, 5]
|
||||
}
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
show: false,
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
color: "#33a3dc",
|
||||
fontSize: 14
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1)"
|
||||
}
|
||||
},
|
||||
data: ["4月", "5月", "6月", "7月", "8月", "9月", "10月"]
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
show: false,
|
||||
type: "value",
|
||||
name: "",
|
||||
axisLabel: {
|
||||
color: "#33a3dc",
|
||||
fontSize: 14
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "solid",
|
||||
color: "rgba(255,255,255,.1)",
|
||||
width: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "氮",
|
||||
type: "line",
|
||||
smooth: true, // 是否平滑曲线显示
|
||||
symbolSize: 0,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: "white" // 线条颜色
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
// 区域填充样式
|
||||
normal: {
|
||||
// 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 0, color: "rgba(22,84,156, 0.8)" },
|
||||
{ offset: 1, color: "rgba(22,84,156, 0)" }
|
||||
],
|
||||
false
|
||||
)
|
||||
// shadowColor: "rgba(53,142,215, 0.9)", // 阴影颜色
|
||||
// shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||||
}
|
||||
},
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: "磷",
|
||||
type: "line",
|
||||
smooth: true, // 是否平滑曲线显示
|
||||
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
||||
symbolSize: 0,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: "white" // 线条颜色
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
// 区域填充样式
|
||||
normal: {
|
||||
// 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 0, color: "rgba(22,84,156, 0.8)" },
|
||||
{ offset: 1, color: "rgba(22,84,156, 0)" }
|
||||
],
|
||||
false
|
||||
)
|
||||
// shadowColor: "rgba(53,142,215, 0.9)", // 阴影颜色
|
||||
// shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||||
}
|
||||
},
|
||||
data: []
|
||||
}, {
|
||||
name: "钾",
|
||||
type: "line",
|
||||
smooth: true, // 是否平滑曲线显示
|
||||
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
||||
symbolSize: 0,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: "white" // 线条颜色
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
// 区域填充样式
|
||||
normal: {
|
||||
// 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 0, color: "rgba(22,84,156, 0.8)" },
|
||||
{ offset: 1, color: "rgba(22,84,156, 0)" }
|
||||
],
|
||||
false
|
||||
)
|
||||
// shadowColor: "rgba(53,142,215, 0.9)", // 阴影颜色
|
||||
// shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||||
}
|
||||
},
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
landMonitorAlarmHistoryApi({
|
||||
areaCode: 510521,
|
||||
streetCode: 510521100,
|
||||
land_id: 18
|
||||
}).then(res => {
|
||||
|
||||
|
||||
for (let key in res.data.list){
|
||||
data[key]=res.data.list[key]
|
||||
}
|
||||
console.log(data,5656)
|
||||
|
||||
initCharts('l_t', setoptionsFn(res.data.list.soil_temperature.historyList[0].time, res.data.list.soil_temperature.historyList[1].value))
|
||||
initCharts('l_c', setoptionsFn(res.data.list.soil_moisture.historyList[0].time, res.data.list.soil_moisture.historyList[1].value))
|
||||
initCharts('l_b', setoptionsFn(res.data.list.soil_PH.historyList[0].time, res.data.list.soil_PH.historyList[1].value))
|
||||
initCharts('c_b', setoptionsFn(res.data.list.wind_speed.historyList[0].time, res.data.list.wind_speed.historyList[1].value))
|
||||
initCharts('r_t', setoptionsFn(res.data.list.ambient_temperature.historyList[0].time, res.data.list.ambient_temperature.historyList[1].value))
|
||||
initCharts('r_c', setoptionsFn(res.data.list.ambient_humidity.historyList[0].time, res.data.list.ambient_humidity.historyList[1].value))
|
||||
initCharts('r_b', setoptionsFn(res.data.list.carbon_dioxide.historyList[0].time, res.data.list.carbon_dioxide.historyList[1].value))
|
||||
CKP.xAxis[0].data = res.data.list.soil_potassium_phosphate_nitrogen.historyList[0].time
|
||||
let value = res.data.list.soil_potassium_phosphate_nitrogen.historyList[1].value
|
||||
value.forEach(item => {
|
||||
CKP.series[0].data.push(item.soil_potassium_phosphate_nitrogen)
|
||||
CKP.series[1].data.push(item.soil_potassium_phosphate_phosphorus)
|
||||
CKP.series[2].data.push(item.soil_potassium_phosphate_potassium)
|
||||
})
|
||||
initCharts('c_t', CKP)
|
||||
})
|
||||
onMounted(() => {
|
||||
document.getElementById("l_t").removeAttribute('_echarts_instance_');
|
||||
document.getElementById("l_c").removeAttribute('_echarts_instance_');
|
||||
|
|
@ -161,15 +462,6 @@ onMounted(() => {
|
|||
document.getElementById("r_t").removeAttribute('_echarts_instance_');
|
||||
document.getElementById("r_c").removeAttribute('_echarts_instance_');
|
||||
document.getElementById("r_b").removeAttribute('_echarts_instance_');
|
||||
initCharts('l_t', options.plant_temp)
|
||||
initCharts('l_c', options.plant_temp)
|
||||
initCharts('l_b', options.plant_temp)
|
||||
initCharts('c_t', options.CKP)
|
||||
initCharts('c_b', options.plant_temp)
|
||||
initCharts('r_t', options.plant_temp)
|
||||
initCharts('r_c', options.plant_temp)
|
||||
initCharts('r_b', options.plant_temp)
|
||||
// initCharts('offline', options.offLine)
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
@ -2,26 +2,10 @@
|
|||
<div class="box">
|
||||
<div class="l">
|
||||
<div class="top">
|
||||
<div style="display: flex;justify-content: space-between;align-items: center;">
|
||||
<span>种植总面积：</span>
|
||||
<div>
|
||||
<span class="area-num "><span class="color-font">2</span> </span>
|
||||
<span class="area-num "><span class="color-font">2</span> </span>
|
||||
<span class="area-num "><span class="color-font">2</span> </span>
|
||||
<span class="area-num "><span class="color-font">2</span> </span>
|
||||
<leftTop></leftTop>
|
||||
</div>
|
||||
</div>
|
||||
<div style="">种植种类：</div>
|
||||
<div>
|
||||
<div class="lands">
|
||||
<div class="land" v-for="(item, index) in 33" :key="index">地块</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom top">
|
||||
<warnDetail v-if="showWarnDeatil" @off="showWarnDeatil = false"></warnDetail>
|
||||
<scrollTable @click="hdClick3" :config="config3" style="width:100%;height:100%"></scrollTable>
|
||||
<leftCenter></leftCenter>
|
||||
</div>
|
||||
<div class="top center">
|
||||
<video style="margin-top: 1vh;width: 100%;height: 100%;" autoplay muted
|
||||
|
|
@ -34,78 +18,19 @@
|
|||
<div style="display: flex;justify-content: space-between;">
|
||||
<div class=" c-top-tits"><span class="color-font" @click="router.push('/')">返回首页</span></div>
|
||||
<div class=" c-top-tits"><span class="color-font">同谭政地块</span> </div>
|
||||
|
||||
|
||||
<!-- <img src="/static/detail/FHSY.png" alt=""> -->
|
||||
</div>
|
||||
|
||||
<farmerMap></farmerMap>
|
||||
|
||||
</div>
|
||||
<div class="bottom">
|
||||
|
||||
<div class="bottom-li" :class="(item.flag) ? 'act' : ''" v-for="(item, index) in environmentData">
|
||||
|
||||
<span class="color-font">{{ item.name }}</span>
|
||||
<span>{{ item.value }}{{ item.unit }}</span>
|
||||
<span v-if="item.flag">状态正常</span>
|
||||
<span v-else>状态正常</span>
|
||||
|
||||
</div>
|
||||
|
||||
<centerBottom></centerBottom>
|
||||
</div>
|
||||
</div>
|
||||
<div class="r">
|
||||
|
||||
<div class="center top">
|
||||
<div>监控设备总数: <span class="num">1528</span> 台</div>
|
||||
<div class="cont">
|
||||
<div style="display: flex;justify-content: space-between;align-items: center;margin-top: 3vh;">
|
||||
<img src="/static/index/JYZ.png" style="width: 2.8vw; height: 4vw;" alt="">
|
||||
|
||||
<div class="circle">
|
||||
<img src="/static/detail/bk.png" class="act-img" alt="">
|
||||
<div style="width: 110px;height: 110px;" class="online" id="online"></div>
|
||||
<rightTop></rightTop>
|
||||
</div>
|
||||
<div class="circle">
|
||||
<img src="/static/detail/bk.png" class="act-img" alt="">
|
||||
<div style="width: 110px;height: 110px;" class="online" id="offline"></div>
|
||||
</div>
|
||||
|
||||
<img src="/static/index/JTY.png" style="width: 2.8vw; height: 4vw;" alt="">
|
||||
</div>
|
||||
|
||||
<div class="eqNum">
|
||||
<div>
|
||||
<img src="/static/index/Q.png" alt="" style="transform: translateY(2px);"> 在线设备统计：<span
|
||||
class="num" style="margin-left: 10px;">1418</span> 台
|
||||
</div>
|
||||
<div>
|
||||
<img src="/static/index/Q.png" style="transform: translateY(2px);"> 离线设备统计：<span class="num"
|
||||
style="margin-left: 10px;">1418</span>
|
||||
台
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="bottom">
|
||||
<div class="r-b-li" :class="item.flag ? '' : 'act'" v-for="(item, index) in MoistureData" :key="index">
|
||||
|
||||
<span style="color: azure;">{{ item.name }}</span>
|
||||
<span>{{ item.value }} {{ item.unit }}</span>
|
||||
<span v-if="item.flag">状态正常</span>
|
||||
<span v-else>状态异常</span>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<rightBottom></rightBottom>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -113,180 +38,15 @@
|
|||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue"
|
||||
import scrollTable from "@/components/scrollTable.vue"
|
||||
import options from "./option"
|
||||
import * as echarts from 'echarts';
|
||||
import warnDetail from "@/components/warnDetail.vue"
|
||||
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
import farmerMap from "../components/farmerMap.vue";
|
||||
|
||||
|
||||
|
||||
|
||||
import leftTop from "../components/detail/leftTop.vue";
|
||||
import leftCenter from "../components/detail/leftCenter.vue";
|
||||
import centerBottom from "../components/detail/centerBottom.vue";
|
||||
import rightTop from "../components/detail/rightTop.vue";
|
||||
import rightBottom from "../components/detail/rightBottom.vue";
|
||||
import {useRouter} from "vue-router"
|
||||
const router=useRouter()
|
||||
|
||||
|
||||
const u = ref('https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231129\/202311291816106120a4034.png')
|
||||
const alignFn = (num) => {
|
||||
let arr = []
|
||||
for (let i = 0; i < num; i++) {
|
||||
arr.push('center')
|
||||
}
|
||||
return arr
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const environmentData = reactive([
|
||||
|
||||
{
|
||||
name: "风速",
|
||||
value: 10,
|
||||
unit: "m/s",
|
||||
flag: true
|
||||
},
|
||||
{
|
||||
name: "风向",
|
||||
value: 10,
|
||||
unit: "",
|
||||
flag: false
|
||||
},
|
||||
{
|
||||
name: "环境湿度",
|
||||
value: 10,
|
||||
unit: "%",
|
||||
flag: false
|
||||
},
|
||||
{
|
||||
name: "环境温度",
|
||||
value: 10,
|
||||
unit: "℃",
|
||||
flag: false
|
||||
},
|
||||
{
|
||||
name: "二氧化碳",
|
||||
value: 10,
|
||||
unit: "ppm",
|
||||
flag: true
|
||||
},
|
||||
{
|
||||
name: "环境气压",
|
||||
value: 10,
|
||||
unit: "pa",
|
||||
flag: true
|
||||
},
|
||||
{
|
||||
name: "雨量",
|
||||
value: 10,
|
||||
unit: "mm/h",
|
||||
flag: false
|
||||
},
|
||||
{
|
||||
name: "环境光照",
|
||||
value: 10,
|
||||
unit: "%",
|
||||
flag: true
|
||||
},
|
||||
])
|
||||
|
||||
const MoistureData = reactive([
|
||||
{
|
||||
name: "土壤温度",
|
||||
value: 12,
|
||||
unit: "℃",
|
||||
flag: true
|
||||
}, {
|
||||
name: "土壤湿度",
|
||||
value: 12,
|
||||
unit: "℃",
|
||||
flag: false
|
||||
}, {
|
||||
name: "土壤电导率",
|
||||
value: 12,
|
||||
unit: "ps/cm",
|
||||
flag: true
|
||||
}, {
|
||||
name: "土壤PH值",
|
||||
value: 4,
|
||||
unit: "",
|
||||
flag: true
|
||||
}, {
|
||||
name: "土壤含氮量",
|
||||
value: 12,
|
||||
unit: "",
|
||||
flag: false
|
||||
}, {
|
||||
name: "土壤含磷量",
|
||||
value: 12,
|
||||
unit: "",
|
||||
flag: false
|
||||
},
|
||||
{
|
||||
name: "土壤含钾量",
|
||||
value: 12,
|
||||
unit: "",
|
||||
flag: true
|
||||
},
|
||||
|
||||
|
||||
|
||||
])
|
||||
|
||||
|
||||
const config3 = reactive({
|
||||
header: ['产品名称', '溯源码', '产品名称', '溯源码',],
|
||||
headerBGC: "#092757",
|
||||
oddRowBGC: "#0C2045",
|
||||
headerStyle: "background-image: url('/static/index/SBGJBG.png');font-family: FZCYJ;background-size: 100% 100%;",
|
||||
align: alignFn(4),
|
||||
data: [
|
||||
['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
|
||||
['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
|
||||
['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
|
||||
['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
|
||||
['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
|
||||
['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
|
||||
['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
|
||||
|
||||
]
|
||||
})
|
||||
const showWarnDeatil = ref(false)
|
||||
const hdClick3 = (e) => {
|
||||
if (e.ceil) {
|
||||
if (e.columnIndex == 3) {
|
||||
showWarnDeatil.value = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 图表
|
||||
const initCharts = (tag, option) => {
|
||||
var chartDom = document.getElementById(tag);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(option);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
const test = () => {
|
||||
router.replace('/detail')
|
||||
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.getElementById("online").removeAttribute('_echarts_instance_');
|
||||
document.getElementById("offline").removeAttribute('_echarts_instance_');
|
||||
initCharts('online', options.onLine)
|
||||
initCharts('offline', options.offLine)
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.box {
|
||||
|
|
@ -310,56 +70,6 @@ onMounted(() => {
|
|||
box-sizing: border-box;
|
||||
padding: 6vh 2vh 1vh 2vh;
|
||||
color: #E5EFFF;
|
||||
|
||||
.area-num {
|
||||
margin-right: 10px;
|
||||
width: 35px;
|
||||
height: 40px;
|
||||
background-image: url("/static/detail/numbg.png");
|
||||
display: inline-block;
|
||||
background-size: 100% 100%;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.lands {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
overflow-y: auto;
|
||||
margin-top: 1vh;
|
||||
height: 15vh;
|
||||
|
||||
.land {
|
||||
width: 5vw;
|
||||
height: 3vh;
|
||||
// background-color: #fff;
|
||||
background-image: url('/static/detail/ZL.png');
|
||||
background-size: 100% 100%;
|
||||
color: white;
|
||||
text-align: center;
|
||||
line-height: 3vh;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.lands::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
background-color: #153041;
|
||||
}
|
||||
|
||||
.lands::-webkit-scrollbar-track {
|
||||
background-color: #153041;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #15A1DC;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -414,30 +124,7 @@ onMounted(() => {
|
|||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.bottom-li {
|
||||
// background-color: #fff;
|
||||
width: 49%;
|
||||
height: 4vh;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
// border: 1px solid red;
|
||||
background-image: url('/static/detail/ZC.png');
|
||||
background-size: 100% 100%;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
color: #E5EFFF;
|
||||
font-family: FZCYJ;
|
||||
padding: 0 1VW;
|
||||
|
||||
}
|
||||
|
||||
.act {
|
||||
background-image: url('/static/detail/YC.png');
|
||||
color: #C65956;
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -494,66 +181,8 @@ onMounted(() => {
|
|||
.center {
|
||||
background-image: url('/static/index/JCSBSLTJ.png');
|
||||
|
||||
.num {
|
||||
font-size: 20px;
|
||||
font-family: FZCYJ;
|
||||
color: #E5EFFF;
|
||||
background: linear-gradient(to bottom, #DAE8FE 30%, #53A0FF 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.cont {
|
||||
height: 70%;
|
||||
|
||||
.eqNum {
|
||||
margin-top: 2vh;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-size: 11px;
|
||||
background-image: url('/static/index/BTBG.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
position: relative;
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.act-img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
animation: spin 2s linear infinite;
|
||||
left: -0%;
|
||||
top: 0%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.online {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,40 +2,13 @@
|
|||
<div class="box">
|
||||
<div class="l">
|
||||
<div class="top">
|
||||
<!-- <warnDetail v-if="showWarnDeatil" @off="showWarnDeatil = false"></warnDetail>
|
||||
<scrollTable @click="hdClick3" :config="config3" style="width:100%;height:100%"></scrollTable> -->
|
||||
<leftTop></leftTop>
|
||||
</div>
|
||||
<div class="center top">
|
||||
<div>监控设备总数: <span class="num color-font">1528</span> 台</div>
|
||||
<div class="cont">
|
||||
<div style="display: flex;justify-content: space-between;align-items: center;margin-top: 3vh;">
|
||||
<img src="/static/index/JYZ.png" style="width: 2.8vw; height: 4vw;" alt="">
|
||||
<div class="circle">
|
||||
<img src="/static/detail/bk.png" class="act-img" alt="">
|
||||
<div style="width: 110px;height: 110px;" class="online" id="online"></div>
|
||||
</div>
|
||||
<div class="circle">
|
||||
<img src="/static/detail/bk.png" class="act-img" alt="">
|
||||
<div style="width: 110px;height: 110px;" class="online" id="offline"></div>
|
||||
</div>
|
||||
<img src="/static/index/JTY.png" style="width: 2.8vw; height: 4vw;" alt="">
|
||||
</div>
|
||||
<div class="eqNum">
|
||||
<div>
|
||||
<img src="/static/index/Q.png" alt="" style="transform: translateY(2px);"> 在线设备统计：<span
|
||||
class="num color-font" style="margin-left: 10px;">1418</span> 台
|
||||
</div>
|
||||
<div>
|
||||
<img src="/static/index/Q.png" style="transform: translateY(2px);"> 离线设备统计：<span
|
||||
class="num color-font" style="margin-left: 10px;">1418</span>
|
||||
台
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<leftCenter></leftCenter>
|
||||
</div>
|
||||
<div class="bottom top">
|
||||
<scrollTable :config="config2" style="width:100%;height:100%"></scrollTable>
|
||||
<leftBottom></leftBottom>
|
||||
</div>
|
||||
</div>
|
||||
<div class="c">
|
||||
|
|
@ -53,40 +26,21 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<warnPop v-if="showWarnPop" ref="ChildsDom" @off="showWarnPop = false"></warnPop>
|
||||
<scrollTable :config="config" @click="hdClick" style="width:100%;height:100%"></scrollTable>
|
||||
<centerBottom></centerBottom>
|
||||
</div>
|
||||
</div>
|
||||
<div class="r">
|
||||
<div class="top">
|
||||
<div class="content" id="eq">
|
||||
<div class="eq" v-for="item in 10" :key="item">
|
||||
<img :src="u" style="width:8vw;height: 100%;border-radius: 1vh;" alt="">
|
||||
<div
|
||||
style="display: flex;flex-direction: column;justify-content: space-between;margin-left: 1vw;color: #CAD5E5;">
|
||||
<div style="display: flex;align-items: center;">
|
||||
<img src="/static/index/MC.png" style="width:1.7vw;height: 1.5vw;margin-right: 5px; "
|
||||
alt="">
|
||||
张伟
|
||||
<rightTop></rightTop>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;">
|
||||
<img src="/static/index/JS.png" style="width:1.7vw;height: 1.5vw;margin-right: 5px; "
|
||||
alt="">
|
||||
这是一名后端开发
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="bottoms">
|
||||
<div style="height: 35%;">
|
||||
<div class="lands">
|
||||
<div class="land" v-for="(item, index) in 16" @click="test" :key="index">地块</div>
|
||||
<div class="landa">
|
||||
<div class="land-li" v-for="(item, index) in landlist" :key="index">{{ item.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video" style="height: 65%;">
|
||||
<div class="video-tit"> 实时监测影像 </div>
|
||||
<!-- <JessibucaDemo style="height: 80%;" :url="a"></JessibucaDemo> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -95,132 +49,35 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
// import flvjs from "flv.js"
|
||||
import { ref, reactive, onMounted } from "vue"
|
||||
import leftTop from "@/components/index/leftTop.vue"
|
||||
import scrollTable from "@/components/scrollTable.vue"
|
||||
import options from "./option"
|
||||
import * as echarts from 'echarts';
|
||||
import warnPop from "@/components/warnPop.vue"
|
||||
import leftCenter from "../components/index/leftCenter.vue"
|
||||
import leftBottom from "../components/index/leftBottom.vue"
|
||||
import centerBottom from "../components/index/centerBottom.vue"
|
||||
import JessibucaDemo from "@/components/videoFlv.vue"
|
||||
import { useRouter } from "vue-router";
|
||||
import areaMap from "@/components/areaMap.vue"
|
||||
const a=ref( 'http://192.168.1.27/live/test.live.flv?secret=gqig2yFKkDpIMic1uWZY1L5MsIo0eflm')
|
||||
import {landListApi} from "@/api.js"
|
||||
import rightTop from "../components/index/rightTop.vue"
|
||||
|
||||
|
||||
const router = useRouter()
|
||||
const u = ref('https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231129\/202311291816106120a4034.png')
|
||||
const alignFn = (num) => {
|
||||
let arr = []
|
||||
for (let i = 0; i < num; i++) {
|
||||
arr.push('center')
|
||||
}
|
||||
return arr
|
||||
}
|
||||
const config = reactive({
|
||||
header: ['地块名称', '土壤温度', '土壤湿度', '土壤PH值', '土壤氮磷钾', '风速', '环境温度', '环境湿度', '二氧化碳', '历史预警数据'],
|
||||
headerBGC: "#092757",
|
||||
headerStyle: "background-image: url('/static/index/tableHead.png');font-family: FZCYJ;background-size: 100% 100%;",
|
||||
oddRowBGC: "#0C2045",
|
||||
align: alignFn(10),
|
||||
data: [
|
||||
['行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', `<span style='color:#2562AD' > 查看<span>`],
|
||||
['行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', `<span style='color:#2562AD' > 查看<span>`],
|
||||
['行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', `<span style='color:#2562AD' > 查看<span>`],
|
||||
['行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', `<span style='color:#2562AD' > 查看<span>`],
|
||||
['行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', `<span style='color:#2562AD' > 查看<span>`],
|
||||
['行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', `<span style='color:#2562AD' > 查看<span>`],
|
||||
['行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1', '行1列2', '行1列3', `<span style='color:#2562AD' > 查看<span>`],
|
||||
|
||||
]
|
||||
})
|
||||
const config2 = reactive({
|
||||
header: ['产品名称', '溯源码', '产品名称', '溯源码',],
|
||||
headerBGC: "#092757",
|
||||
oddRowBGC: "#0C2045",
|
||||
headerStyle: "background:#0E316B",
|
||||
|
||||
align: alignFn(4),
|
||||
data: [
|
||||
['行1列1', '行1列2', '行1列3', '行1列1',],
|
||||
['行1列1', '行1列2', '行1列3', '行1列1',],
|
||||
['行1列1', '行1列2', '行1列3', '行1列1',],
|
||||
['行1列1', '行1列2', '行1列3', '行1列1',],
|
||||
['行1列1', '行1列2', '行1列3', '行1列1',],
|
||||
['行1列1', '行1列2', '行1列3', '行1列1',],
|
||||
['行1列1', '行1列2', '行1列3', '行1列1',],
|
||||
// 地块
|
||||
const landlist=reactive([])
|
||||
|
||||
landListApi( {
|
||||
areaCode:510521,
|
||||
streetCode:510521100
|
||||
}).then(res=>{
|
||||
res.data.list.forEach( item=>{ landlist.push(item) })
|
||||
|
||||
]
|
||||
})
|
||||
|
||||
const config3 = reactive({
|
||||
header: ['设备名称', '设备编号', '告警时间', '操作',],
|
||||
headerBGC: "#092757",
|
||||
oddRowBGC: "#0C2045",
|
||||
headerStyle: "background-image: url('/static/index/SBGJBG.png');font-family: FZCYJ;background-size: 100% 100%;",
|
||||
align: alignFn(4),
|
||||
data: [
|
||||
['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
|
||||
['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
|
||||
['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
|
||||
['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
|
||||
['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
|
||||
['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
|
||||
['行1列1', '行1列2', '行1列3', `<span style="color:#2562AD"> 详情 </span>`,],
|
||||
|
||||
]
|
||||
})
|
||||
// 图表
|
||||
const initCharts = (tag, option) => {
|
||||
var chartDom = document.getElementById(tag);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(option);
|
||||
}
|
||||
const ChildsDom = ref(null);
|
||||
const showWarnPop = ref(false)
|
||||
const hdClick = (e) => {
|
||||
// console.log(e)
|
||||
if (e.ceil) {
|
||||
if (e.columnIndex == 9) {
|
||||
showWarnPop.value = true
|
||||
}
|
||||
}
|
||||
}
|
||||
const showWarnDeatil = ref(false)
|
||||
const hdClick3 = (e) => {
|
||||
if (e.ceil) {
|
||||
if (e.columnIndex == 3) {
|
||||
// showWarnPop.value = true
|
||||
showWarnDeatil.value = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const test = () => {
|
||||
router.replace('/detail')
|
||||
}
|
||||
const scrollTableFn = () => {
|
||||
const tag = document.getElementById('eq')
|
||||
const height = tag.scrollHeight
|
||||
setInterval(() => {
|
||||
tag.scrollTop += 1
|
||||
if ((tag.scrollTop + tag.clientHeight) >= height - 50) {
|
||||
tag.scrollTop = 0
|
||||
|
||||
}
|
||||
}, 50)
|
||||
|
||||
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.getElementById("online").removeAttribute('_echarts_instance_');
|
||||
document.getElementById("offline").removeAttribute('_echarts_instance_');
|
||||
scrollTableFn()
|
||||
initCharts('online', options.onLine)
|
||||
initCharts('offline', options.offLine)
|
||||
// liveFn()
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
<style lang="scss">
|
||||
|
|
@ -253,66 +110,7 @@ onMounted(() => {
|
|||
.center {
|
||||
background-image: url('/static/index/JCSBSLTJ.png');
|
||||
|
||||
.num {
|
||||
|
||||
font-size: 20px;
|
||||
// font-family: FZCYJ;
|
||||
// color: #E5EFFF;
|
||||
// background: linear-gradient(to bottom, #DAE8FE 30%, #53A0FF 100%);
|
||||
// -webkit-background-clip: text;
|
||||
// -webkit-text-fill-color: transparent;
|
||||
// margin-left: 30px;
|
||||
}
|
||||
|
||||
.cont {
|
||||
height: 70%;
|
||||
|
||||
.eqNum {
|
||||
margin-top: 2vh;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-size: 11px;
|
||||
background-image: url('/static/index/BTBG.png');
|
||||
background-size: 100% 100%;
|
||||
|
||||
// text-align: ;
|
||||
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
position: relative;
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.act-img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
animation: spin 2s linear infinite;
|
||||
left: -0%;
|
||||
top: 0%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.online {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -379,7 +177,7 @@ onMounted(() => {
|
|||
width: 25vw;
|
||||
height: 93vh;
|
||||
|
||||
.bottom {
|
||||
.bottoms {
|
||||
width: 25vw;
|
||||
box-sizing: border-box;
|
||||
padding-top: 6vh;
|
||||
|
|
@ -390,18 +188,15 @@ onMounted(() => {
|
|||
background-image: url('/static/index/MQ.png');
|
||||
margin-top: 1vh;
|
||||
|
||||
.lands {
|
||||
.landa {
|
||||
display: flex;
|
||||
// justify-content: ;
|
||||
flex-wrap: wrap;
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
flex-wrap: wrap;
|
||||
.land-li {
|
||||
|
||||
.land {
|
||||
width: 5vw;
|
||||
height: 3vh;
|
||||
// background-color: #fff;
|
||||
padding: 2px 20px;
|
||||
margin-right: 10px;
|
||||
background-image: url('/static/index/DK.png');
|
||||
background-size: 100% 100%;
|
||||
color: white;
|
||||
|
|
@ -436,40 +231,6 @@ onMounted(() => {
|
|||
margin-top: 1vh;
|
||||
padding-top: 6vh;
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: 1s;
|
||||
// background-color: #fff;
|
||||
overflow-y: auto;
|
||||
font-size: 14px;
|
||||
|
||||
.eq {
|
||||
width: 100%;
|
||||
height: 10vh;
|
||||
// background-color: #fff;
|
||||
margin-bottom: 1vh;
|
||||
background-color: #092049;
|
||||
box-sizing: border-box;
|
||||
padding: 1vh;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.content::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
background-color: #153041;
|
||||
}
|
||||
|
||||
.content::-webkit-scrollbar-track {
|
||||
background-color: #153041;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #1581DC;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -99,7 +99,6 @@
|
|||
<script setup>
|
||||
import { ref, reactive } from "vue"
|
||||
import { useRouter } from "vue-router";
|
||||
import { loginAPI } from "@/api.js"
|
||||
const router = useRouter()
|
||||
const show = ref(false)
|
||||
const account = ref('')
|
||||
|
|
|
|||
|
|
@ -397,7 +397,7 @@ const options = {
|
|||
// 氮钾磷
|
||||
CKP: {
|
||||
// backgroundColor: "#21263A",
|
||||
color: ["#ffc20e", "#00ae9d"],
|
||||
color: ["#ffc20e", "#00ae9d",'red'],
|
||||
grid: {
|
||||
top: "5%",
|
||||
left: "2%",
|
||||
|
|
|
|||
Loading…
Reference in New Issue