updata

package-lock.json

@@ -15,6 +15,7 @@
         "echarts": "^5.4.3",
         "echarts-gl": "^2.0.9",
         "flv.js": "^1.6.2",
+        "pinia": "^2.1.7",
         "postcss-pxtorem": "^5.1.1",
         "vue": "^3.3.8",
         "vue-router": "^4.2.5"
@@ -1681,6 +1682,50 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.1.7.tgz",
+      "integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.0",
+        "vue-demi": ">=0.14.5"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.31.tgz",
@@ -3394,6 +3439,23 @@
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true
     },
+    "pinia": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.1.7.tgz",
+      "integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==",
+      "requires": {
+        "@vue/devtools-api": "^6.5.0",
+        "vue-demi": ">=0.14.5"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.14.6",
+          "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.6.tgz",
+          "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+          "requires": {}
+        }
+      }
+    },
     "postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.31.tgz",

package.json

@@ -18,7 +18,9 @@
     "flv.js": "^1.6.2",
     "postcss-pxtorem": "^5.1.1",
     "vue": "^3.3.8",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "pinia": "^2.1.7"
+
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.5.0",

src/App.vue

@@ -4,6 +4,13 @@ import Header from "@/components/Header.vue"
 import Login from "@/view/login.vue"
 let Token =localStorage.getItem('TOKEN')
 
+import { areaObj } from "@/store/index.js"
+const userInfoStore=areaObj()
+
+userInfoStore.changeUserInfoFn(510524)
+
+
+
 </script>
 <template>
   <!-- <div>sadas</div> -->

src/api.js

@@ -71,4 +71,10 @@ export function deviceCountLandApi(params) {
     return instacne.get('/api/dataview.land/deviceCount', { params })
 }
 
+
+export function centralCountApi(params) {
+    return instacne.get('/api/dataview.land/centralCount', { params })
+}
+
+// /api/dataview.land/centralCount?areaCode=510521&streetCode=510521100
 // /api/dataview.land/deviceCount?areaCode=510521&streetCode=510521100&land_id=18

src/components/areaList.vue

@@ -1,7 +1,7 @@
 <template>
     <Transition>
         <div class="address" v-if="props.choseArea">
-            <div class="address-li"  @click="choseTownFn({name:'泸县'})"> 泸县</div>
+            <div class="address-li" @click="choseTownFn({ name: '泸县', code: 510521, isArea: true })"> 泸县</div>
             <div class="address-li" @click="choseTownFn(item)" v-for="( item, index ) in areaList ">{{ item.name }}</div>
         </div>
     </Transition>
@@ -9,36 +9,44 @@
 
 <script setup>
 import { defineProps, defineEmits } from "vue"
-import { useRouter } from 'vue-router'
+import { reactive } from "vue"
-import {reactive} from "vue"
 import axios from "axios"
-const router = useRouter()
+import { areaObj } from "@/store/index.js"
+const userInfoStore = areaObj()
 const emit = defineEmits(['offAreaList'])
 const props = defineProps({
     choseArea: Boolean,
 })
-const areaList=reactive([])
+const areaList = reactive([])
 
 // 选额镇
 const choseTownFn = (item) => {
+    if (item.isArea) userInfoStore.changeUserInfoFn( item.code ,null )
+    else { userInfoStore.changeUserInfoFn(510524, Number(item.code)) }
+
+
     props.choseArea = false
-    emit('offAreaList',item)
+    emit('offAreaList', item)
+
+
+
+
     // router.replace('/townDetail?id=' + id)
 }
 
-axios.get(`https://crmeb-test.shop.lihaink.cn/api/city/get_street?area_code=${510524}`)
+axios.get(`https://crmeb-test.shop.lihaink.cn/api/city/get_street?area_code=${510521}`)
-        .then(function (response) {
+    .then(function (response) {
-            response.data.data.forEach(item => {
+        response.data.data.forEach(item => {
-                areaList.push(item)
+            areaList.push(item)
-            })
+        })
 
-        })
+    })
-        .catch(function (error) {
+    .catch(function (error) {
-            // 处理错误情况
+        // 处理错误情况
-        })
+    })
-        .finally(function () {
+    .finally(function () {
-            // 总是会执行
+        // 总是会执行
-        });
+    });
 
 </script>
 

src/components/detail/rightTop.vue

@@ -1,9 +1,8 @@
 <template>
-    <div>监控设备总数: <span class="num">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="">
-
             <div class="circle">
                 <img src="/static/detail/bk.png" class="act-img" alt="">
                 <div style="width: 110px;height: 110px;" class="online" id="online"></div>
@@ -12,37 +11,306 @@
                 <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"
+                <img src="/static/index/Q.png" alt="" style="transform: translateY(2px);"> 在线设备统计：<span
-                    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"
+                <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>
+
+
 <script setup>
-import {ref,reactive,onMounted} from "vue"
 import * as echarts from 'echarts';
-import options from "@/view/option.js"
+import { ref, reactive, onMounted } from "vue"
-import {deviceCountLandApi} from "@/api.js"
+import { deviceCountLandApi } from "@/api.js"
-// deviceCountLandApi(
+const totalNum = ref(0)
-//     {
+const onlineNum = ref(0)
-//         areaCode:510521,
+const offlineNum = ref(0)
-//         streetCode:510521100,
+const setOnlineFn = (data) => {
-//         land_id:18
+    const onLine = reactive(
-//     }
+        {
-// ).then(res=>{
+            title: [
-//     console.log(res.data)
+
-// })
+                {
+                    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) => {
@@ -50,32 +318,60 @@ const initCharts = (tag, option) => {
     var myChart = echarts.init(chartDom);
     myChart.setOption(option);
 }
+deviceCountLandApi({
+    areaCode: 510521, streetCode: 510521100,land_id:18
+}).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_');
-    initCharts('online', options.onLine)
+    // scrollTableFn()
-    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%;
 
@@ -87,6 +383,8 @@ onMounted(() => {
         background-image: url('/static/index/BTBG.png');
         background-size: 100% 100%;
 
+        // text-align: ;
+
     }
 
     .circle {

src/components/index/leftTop.vue

@@ -7,6 +7,9 @@ import warnDetail from "@/components/warnDetail.vue"
 import scrollTable from "@/components/scrollTable.vue"
 import { ref, reactive,onMounted } from "vue"
 import {deviceAlarmCountApi} from "@/api.js"
+import { areaObj } from "@/store/index.js"
+
+const userInfoStore=areaObj()
 
 const showWarnDeatil = ref(false)
 
@@ -49,11 +52,9 @@ const config3 = reactive({
 onMounted( ()=>{
     deviceAlarmCountApi(
     {
-        areaCode:510521,
+        ...userInfoStore.userInfo
-        streetCode:510521100
     }
     ).then(res=>{
-
         res.data.list.forEach(item => {
             config3.data.push(
                 [item.device_name, item.device_code, item.update_time, `<span style="color:#2562AD"> 详情 </span>`,],

src/main.js

@@ -3,13 +3,19 @@ import App from './App.vue'
 import dataV from '@jiaminghi/data-view'
 import router from "./router";
 
-
+import {
+    createPinia
+} from 'pinia'
 
 import 'amfe-flexible'
 import "/public/jessibuca.js"
 const app = createApp(App)
+const pinia = createPinia()
+
 app.use(router)
 app.use(dataV)
+app.use(pinia)
+
 app.mount('#app')
 
 

src/store/index.js

@@ -0,0 +1,24 @@
+import {
+    defineStore
+} from 'pinia'
+
+export const areaObj = defineStore('counter', {
+    state: () => ({
+        userInfo: {
+
+            areaCode:'',
+            streetCode:'',
+
+        },
+
+
+    }),
+    getters: {},
+    actions: {
+        changeUserInfoFn(areaCode,streetCode='') {
+            this.userInfo.areaCode = areaCode
+            this.userInfo.streetCode = streetCode||''
+        }
+
+    }
+})

src/view/home.vue

@@ -15,11 +15,11 @@
             <div class="top">
                 <div class="c-top-tit">
                     <div class="c-top-li">种植面积 <span class="color-font"
-                            style="font-size: 18px;margin-left: 1vw; ">45454</span> m</div>
+                            style="font-size: 18px;margin-left: 1vw; ">{{ centerData.totalArea }}</span> ㎡</div>
                     <div class="c-top-li">种植种类 <span class="color-font"
-                            style="font-size: 18px;margin-left: 1vw; ">45454</span> 种</div>
+                            style="font-size: 18px;margin-left: 1vw; ">{{ centerData.plantCount }}</span> 种</div>
                     <div class="c-top-li">地块数量 <span class="color-font"
-                            style="font-size: 18px;margin-left: 1vw; ">45454</span> 块</div>
+                            style="font-size: 18px;margin-left: 1vw; ">{{ centerData.landCount }}</span> 块</div>
                 </div>
                 <div class="map">
                     <areaMap></areaMap>
@@ -55,22 +55,38 @@ 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 { useRouter } from "vue-router";
+import { centralCountApi } from "@/api.js"
 import areaMap from "@/components/areaMap.vue"
-import {landListApi} from "@/api.js"
+import { landListApi } from "@/api.js"
 import rightTop from "../components/index/rightTop.vue"
 
 
+centralCountApi({
+    areaCode: 510521,
+    streetCode: 510521100
+}).then(res => {
+    console.log(res.data)
 
+for (let key in centerData){
+    centerData[key]=res.data[key]
+}
+})
 
+const centerData = reactive({
+    landCount: "",
+    plantCount: "",
+    totalArea: "",
+
+})
 // 地块
-const landlist=reactive([])
+const landlist = reactive([])
 
-landListApi( {
+landListApi({
-    areaCode:510521,
+    areaCode: 510521,
-    streetCode:510521100
+    streetCode: 510521100
-}).then(res=>{
+}).then(res => {
-    res.data.list.forEach( item=>{  landlist.push(item) })
+    res.data.list.forEach(item => { landlist.push(item) })
 
 })
 
@@ -110,7 +126,7 @@ landListApi( {
         .center {
             background-image: url('/static/index/JCSBSLTJ.png');
 
-            
+
 
         }
 
@@ -193,8 +209,9 @@ landListApi( {
                 flex-wrap: wrap;
                 font-size: 14px;
                 flex-wrap: wrap;
+
                 .land-li {
-                  
+
                     padding: 2px 20px;
                     margin-right: 10px;
                     background-image: url('/static/index/DK.png');