yemain1iuyd

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 })
+}
 
-
+export function landCollectionListApi(params) {
-//
+    return instacne.get('/api/dataview.land/landCollectionList', { params })
-//api/dataview/merchant?mer_id=36&areaCode=510524&streetCode=510524100
+}
-// }
+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 })
+}

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")
+}
 
 
 

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>

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>

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>

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>

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>

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>

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>

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 {
+    .eqNum {
-    margin-top: 2vh;
+        margin-top: 2vh;
-    display: flex;
+        display: flex;
-    justify-content: space-around;
+        justify-content: space-around;
-    font-size: 11px;
+        font-size: 11px;
-    background-image: url('/static/index/BTBG.png');
+        background-image: url('/static/index/BTBG.png');
-    background-size: 100% 100%;
+        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%;
+        top: 50%;
-        height: 100%;
+        left: 50%;
-        animation: spin 2s linear infinite;
+        transform: translate(-50%, -50%);
-        left: -0%;
+
-        top: 0%;
     }
-
 }
-
-.online {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-
-}
-}
-
 </style>

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>`,],

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>

src/components/index/version.js

@@ -1 +0,0 @@
-export const VERSION = '#VERSION#'

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)

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>

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>

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;">
+                <leftTop></leftTop>
-                    <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>
             </div>
-
             <div class="bottom top">
-                <warnDetail v-if="showWarnDeatil" @off="showWarnDeatil = false"></warnDetail>
+               <leftCenter></leftCenter>
-                <scrollTable @click="hdClick3" :config="config3" style="width:100%;height:100%"></scrollTable>
             </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">
-
+                <centerBottom></centerBottom>
-                <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>
-
             </div>
         </div>
         <div class="r">
-
             <div class="center top">
-                <div>监控设备总数: <span class="num">1528</span> 台</div>
+                <rightTop></rightTop> 
-                <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>
             </div>
-
-
-
-
-
-
-
             <div class="bottom">
-                <div class="r-b-li" :class="item.flag ? '' : 'act'" v-for="(item, index) in MoistureData" :key="index">
+                <rightBottom></rightBottom>
-
-                    <span style="color: azure;">{{ item.name }}</span>
-                    <span>{{ item.value }} {{ item.unit }}</span>
-                    <span v-if="item.flag">状态正常</span>
-                    <span v-else>状态异常</span>
-
-
-                </div>
-
             </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";
-
+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";
-const router = useRouter()
+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">
@@ -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%);
-
-                }
-            }
 
         }
     }

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>
+                <leftCenter></leftCenter>
-                <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>
             </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>
+                <centerBottom></centerBottom>
-                <scrollTable :config="config" @click="hdClick" style="width:100%;height:100%"></scrollTable>
             </div>
         </div>
         <div class="r">
             <div class="top">
-                <div class="content" id="eq">
+                <rightTop></rightTop>
-                    <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>
             </div>
-            <div class="bottom">
+            <div class="bottoms">
                 <div style="height: 35%;">
-                    <div class="lands">
+                    <div class="landa">
-                        <div class="land" v-for="(item, index) in 16" @click="test" :key="index">地块</div>
+                        <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 leftCenter from "../components/index/leftCenter.vue"
-import options from "./option"
+import leftBottom from "../components/index/leftBottom.vue"
-import * as echarts from 'echarts';
+import centerBottom from "../components/index/centerBottom.vue"
-import warnPop from "@/components/warnPop.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: [
+const landlist=reactive([])
-        ['行1列1', '行1列2', '行1列3', '行1列1',],
+
-        ['行1列1', '行1列2', '行1列3', '行1列1',],
+landListApi( {
-        ['行1列1', '行1列2', '行1列3', '行1列1',],
+    areaCode:510521,
-        ['行1列1', '行1列2', '行1列3', '行1列1',],
+    streetCode:510521100
-        ['行1列1', '行1列2', '行1列3', '行1列1',],
+}).then(res=>{
-        ['行1列1', '行1列2', '行1列3', '行1列1',],
+    res.data.list.forEach( item=>{  landlist.push(item) })
-        ['行1列1', '行1列2', '行1列3', '行1列1',],
 
-    ]
 })
 
-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 {
+                .land-li {
-                    width: 5vw;
+                  
-                    height: 3vh;
+                    padding: 2px 20px;
-                    // background-color: #fff;
+                    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;
-            }
 
 
 

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('')

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%",