From 77539495356f5bf0bc69c7a72c09dd5490e66c00 Mon Sep 17 00:00:00 2001
From: zmj <1493694146@qq.com>
Date: Fri, 15 Dec 2023 18:20:02 +0800
Subject: [PATCH] yemain1iuyd
---
src/api.js | 22 +-
src/components/areaMap.vue | 21 +-
src/components/detail/centerBottom.vue | 99 ++++++
src/components/detail/leftCenter.vue | 44 +++
src/components/detail/leftTop.vue | 67 ++++
src/components/detail/rightBottom.vue | 79 +++++
src/components/detail/rightTop.vue | 117 +++++++
src/components/index/centerBottom.vue | 53 +++
src/components/index/leftBottom.vue | 59 ++++
src/components/index/leftCenter.vue | 429 ++++++++++++++++++++++---
src/components/index/leftTop.vue | 1 -
src/components/index/rightTop.vue | 88 +++++
src/components/index/version.js | 1 -
src/components/scrollTable.vue | 4 +-
src/components/videoFlv.vue | 2 +-
src/components/warnPop.vue | 330 +++++++++++++++++--
src/view/detail.vue | 399 +----------------------
src/view/home.vue | 299 ++---------------
src/view/login.vue | 1 -
src/view/option.js | 2 +-
20 files changed, 1380 insertions(+), 737 deletions(-)
create mode 100644 src/components/detail/centerBottom.vue
create mode 100644 src/components/detail/leftCenter.vue
create mode 100644 src/components/detail/leftTop.vue
create mode 100644 src/components/detail/rightBottom.vue
create mode 100644 src/components/detail/rightTop.vue
create mode 100644 src/components/index/centerBottom.vue
create mode 100644 src/components/index/leftBottom.vue
create mode 100644 src/components/index/rightTop.vue
delete mode 100644 src/components/index/version.js
diff --git a/src/api.js b/src/api.js
index f3acd75..00604ce 100644
--- a/src/api.js
+++ b/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 })
+}
diff --git a/src/components/areaMap.vue b/src/components/areaMap.vue
index 6c227f6..dfe2c9b 100644
--- a/src/components/areaMap.vue
+++ b/src/components/areaMap.vue
@@ -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")
+}
diff --git a/src/components/detail/centerBottom.vue b/src/components/detail/centerBottom.vue
new file mode 100644
index 0000000..de34ac0
--- /dev/null
+++ b/src/components/detail/centerBottom.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/detail/leftCenter.vue b/src/components/detail/leftCenter.vue
new file mode 100644
index 0000000..bd7aa2e
--- /dev/null
+++ b/src/components/detail/leftCenter.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/detail/leftTop.vue b/src/components/detail/leftTop.vue
new file mode 100644
index 0000000..ea9b824
--- /dev/null
+++ b/src/components/detail/leftTop.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/detail/rightBottom.vue b/src/components/detail/rightBottom.vue
new file mode 100644
index 0000000..d552432
--- /dev/null
+++ b/src/components/detail/rightBottom.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/detail/rightTop.vue b/src/components/detail/rightTop.vue
new file mode 100644
index 0000000..8639fb3
--- /dev/null
+++ b/src/components/detail/rightTop.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/index/centerBottom.vue b/src/components/index/centerBottom.vue
new file mode 100644
index 0000000..2a18474
--- /dev/null
+++ b/src/components/index/centerBottom.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/index/leftBottom.vue b/src/components/index/leftBottom.vue
new file mode 100644
index 0000000..49916b4
--- /dev/null
+++ b/src/components/index/leftBottom.vue
@@ -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>
diff --git a/src/components/index/leftCenter.vue b/src/components/index/leftCenter.vue
index 721b9dd..8a70a77 100644
--- a/src/components/index/leftCenter.vue
+++ b/src/components/index/leftCenter.vue
@@ -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,72 +16,409 @@
<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;
+ font-size: 20px;
}
.cont {
-height: 70%;
+ 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%;
+ .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: ;
+ // text-align: ;
-}
-
-.circle {
- width: 120px;
- height: 120px;
- position: relative;
-
- @keyframes spin {
- 0% {
- transform: rotate(0deg);
- }
-
- 100% {
- transform: rotate(360deg);
- }
}
- .act-img {
+ .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;
- width: 100%;
- height: 100%;
- animation: spin 2s linear infinite;
- left: -0%;
- top: 0%;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+
}
-
}
-
-.online {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
-
-}
-}
-
</style>
\ No newline at end of file
diff --git a/src/components/index/leftTop.vue b/src/components/index/leftTop.vue
index 47b5e71..8d6cfec 100644
--- a/src/components/index/leftTop.vue
+++ b/src/components/index/leftTop.vue
@@ -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>`,],
diff --git a/src/components/index/rightTop.vue b/src/components/index/rightTop.vue
new file mode 100644
index 0000000..e2247ab
--- /dev/null
+++ b/src/components/index/rightTop.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/index/version.js b/src/components/index/version.js
deleted file mode 100644
index 0e66498..0000000
--- a/src/components/index/version.js
+++ /dev/null
@@ -1 +0,0 @@
-export const VERSION = '#VERSION#'
\ No newline at end of file
diff --git a/src/components/scrollTable.vue b/src/components/scrollTable.vue
index 8188587..05196d7 100644
--- a/src/components/scrollTable.vue
+++ b/src/components/scrollTable.vue
@@ -2,12 +2,12 @@
<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;
- `" :align="aligns[i]" v-html="headerItem" />
+ `" :align="aligns[i]" v-html="headerItem" />
</div>
<div v-if="mergedConfig" class="rows" :style="`height: ${height - (header.length ? mergedConfig.headerHeight : 0)
diff --git a/src/components/videoFlv.vue b/src/components/videoFlv.vue
index dd9e26b..07c7ba9 100644
--- a/src/components/videoFlv.vue
+++ b/src/components/videoFlv.vue
@@ -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>
diff --git a/src/components/warnPop.vue b/src/components/warnPop.vue
index d7cd13a..f0ed632 100644
--- a/src/components/warnPop.vue
+++ b/src/components/warnPop.vue
@@ -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>
\ No newline at end of file
diff --git a/src/view/detail.vue b/src/view/detail.vue
index 0fe473f..18f4ea9 100644
--- a/src/view/detail.vue
+++ b/src/view/detail.vue
@@ -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>
- </div>
- </div>
- <div style="">种植种类：</div>
- <div>
- <div class="lands">
- <div class="land" v-for="(item, index) in 33" :key="index">地块</div>
- </div>
- </div>
+ <leftTop></leftTop>
</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>
- </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>
+ <rightTop></rightTop>
</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,179 +38,14 @@
<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";
-
-
-
-
-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)
-
-})
+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()
</script>
<style lang="scss">
@@ -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,65 +181,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%;
-
- }
-
- .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%);
-
- }
- }
+
}
}
diff --git a/src/view/home.vue b/src/view/home.vue
index f68c902..1278566 100644
--- a/src/view/home.vue
+++ b/src/view/home.vue
@@ -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,41 +26,22 @@
</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="">
- 张伟
- </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>
+ <rightTop></rightTop>
</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>
</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;
-
- .land {
- width: 5vw;
- height: 3vh;
- // background-color: #fff;
+ flex-wrap: wrap;
+ .land-li {
+
+ 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;
- }
diff --git a/src/view/login.vue b/src/view/login.vue
index ef9974d..73a3acc 100644
--- a/src/view/login.vue
+++ b/src/view/login.vue
@@ -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('')
diff --git a/src/view/option.js b/src/view/option.js
index cf83309..407b0c4 100644
--- a/src/view/option.js
+++ b/src/view/option.js
@@ -397,7 +397,7 @@ const options = {
// 氮钾磷
CKP: {
// backgroundColor: "#21263A",
- color: ["#ffc20e", "#00ae9d"],
+ color: ["#ffc20e", "#00ae9d",'red'],
grid: {
top: "5%",
left: "2%",