sda

src/App.vue

@@ -1,13 +1,11 @@
 <script setup lang="ts">
-// @ts-ignore
-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)
+userInfoStore.changeUserInfoFn(510521)
 
 
 

src/components/JessibucaDemo.vue

@@ -32,7 +32,7 @@
             type="input"
             autocomplete="on"
             ref="playUrl"
-            :value="url"
+            :value="props.url"
         />
         <button v-if="!playing" @click="play">播放</button>
         <button v-else @click="pause">停止</button>
@@ -47,8 +47,7 @@
 export default {
   name: "DemoPlayer",
   props: {
-
-    url:String
+    src:String
   },
   data() {
     return {

src/components/areaList.vue

@@ -21,10 +21,16 @@ const areaList = reactive([])
 
 // 选额镇
 const choseTownFn = (item) => {
-    if (item.isArea) userInfoStore.changeUserInfoFn( item.code ,null )
-    else { userInfoStore.changeUserInfoFn(510524, Number(item.code)) }
-
-
+    if (item.isArea)
+     {
+        userInfoStore.changeUserInfoFn( item.code ,null )
+        userInfoStore.changeAddress(item.name,'')
+    }
+    else { 
+        userInfoStore.changeUserInfoFn(510524, Number(item.code))
+        userInfoStore.changeAddress("",item.name)
+    }
+    console.log(userInfoStore.userInfo)
     props.choseArea = false
     emit('offAreaList', item)
 

src/components/areaMap.vue

@@ -1,6 +1,5 @@
 <template>
   <div>
-
     <div style="width: 45vw;height: 50vh;" id="chart2" v-show="showArea"></div>
     <div style="width: 45vw;height: 50vh;" id="chart3" v-show="!showArea"></div>
   </div>
@@ -37,12 +36,13 @@
 </style>
 
 <script setup>
-import { ref, onMounted } from "vue"
+import { ref, onMounted, watch } from "vue"
 import * as echarts from 'echarts';
-import "echarts-gl"
+// import "echarts-gl"
 import geoJson from "/static/jsonData/luxian_geo.js"
 import { useRouter } from "vue-router"
-
+import { areaObj } from "@/store/index.js"
+const areaStore = areaObj()
 
 const showArea = (ref(true))
 const router = useRouter()
@@ -87,8 +87,8 @@ const pointerFn = () => {
   return list
 }
 
-const initAreaMap=()=>{
-  
+const initAreaMap = () => {
+  showArea.value=true
   var mapName = 'lz';
   const myChart = document.getElementById("chart2")
   let option = {
@@ -298,22 +298,21 @@ const initAreaMap=()=>{
   const bg = echarts.init(myChart)
   bg.setOption(option);
   bg.on('click', function (params) {
+    areaStore.changeAddress('',params.name||params.value)
     initTownMap(params.name || params.value)
-    // router.push("/detail?town="+params.name||params.value)
 
 
   });
 
 
 }
-const initTownMap=(name)=>{
+const initTownMap = (name) => {
+  showArea.value = false
+
   const townJson = deepCopy(geoJson)
   townJson.features = townJson.features.filter((item) => {
     return item.properties.name == name
   })
-
-    showArea.value=false
-
   var mapName = 'town';
   const myChart = document.getElementById("chart3")
   let option = {
@@ -518,21 +517,37 @@ const initTownMap=(name)=>{
     ],
   };
 
-  // document.getElementById("chart3").removeAttribute('_echarts_instance_');
   echarts.registerMap(mapName, townJson)
   const bg = echarts.init(myChart)
   bg.setOption(option);
   bg.on('click', function (params) {
-    initTownMap(params.name || params.value)
-    // router.push("/detail?town="+params.name||params.value)
-   
-
   });
-
-
-
 }
 
+
+watch(
+  () => areaStore.address,
+  (value, oldValue) => {
+
+    if(value.city){
+      initAreaMap()
+    }
+    else if(value.area){
+      showArea.value = false
+      initTownMap(value.area)
+      console.log(showArea.value)
+    }
+
+
+  }, {
+  deep: true,
+  // immediate: true
+}
+
+)
+
+
+
 onMounted(() => {
   initAreaMap()
 

src/components/index/centerBottom.vue

@@ -7,6 +7,9 @@ import {ref,reactive} from "vue"
 import scrollTable from "@/components/scrollTable.vue"
 import warnPop from "@/components/warnPop.vue"
 import {landCollectionListApi} from "@/api.js"
+import { areaObj } from "@/store/index.js"
+const userInfoStore=areaObj()
+// ...userInfoStore.userInfo
 const showWarnPop = ref(false)
 const ChildsDom = ref(null);
 const hdClick = (e) => {
@@ -37,8 +40,8 @@ const config = reactive({
 
 landCollectionListApi(
 {
-    areaCode:510521,
-    streetCode:510521100
+    ...userInfoStore.userInfo
+
 }
 
 ).then(res=>{

src/components/index/leftBottom.vue

@@ -5,7 +5,9 @@
 import scrollTable from "@/components/scrollTable.vue"
 import { ref, reactive, onMounted } from "vue"
 import { plantProductCountApi } from "@/api.js"
-
+import { areaObj } from "@/store/index.js"
+const userInfoStore=areaObj()
+// ...userInfoStore.userInfo
 const alignFn = (num) => {
     let arr = []
     for (let i = 0; i < num; i++) {
@@ -43,8 +45,8 @@ const correctionListFn = (list) => {
 
 plantProductCountApi(
     {
-        areaCode: 510521,
-        streetCode: 510521100
+     ...userInfoStore.userInfo
+
 
     }
 ).then(res => {

src/components/index/leftCenter.vue

@@ -32,6 +32,11 @@
 import * as echarts from 'echarts';
 import { ref, reactive, onMounted } from "vue"
 import { deviceCountApi } from "@/api.js"
+
+import { areaObj } from "@/store/index.js"
+const userInfoStore=areaObj()
+// ...userInfoStore.userInfo
+
 const totalNum = ref(0)
 const onlineNum = ref(0)
 const offlineNum = ref(0)
@@ -319,7 +324,7 @@ const initCharts = (tag, option) => {
     myChart.setOption(option);
 }
 deviceCountApi({
-    areaCode: 510521, streetCode: 510521100
+    ...userInfoStore.userInfo
 }).then(res => {
     totalNum.value = res.data.total
     onlineNum.value = res.data.online

src/components/index/leftTop.vue

@@ -1,5 +1,5 @@
 <template>
-    <warnDetail v-if="showWarnDeatil" @off="showWarnDeatil = false"></warnDetail>
+    <warnDetail v-if="showWarnDeatil" @off="showWarnDeatil = false" :data="popData"></warnDetail>
     <scrollTable @click="hdClick3" :config="config3" style="width:100%;height:100%" v-if="config3.data.length"></scrollTable>
 </template>
 <script setup>
@@ -8,7 +8,6 @@ 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)
@@ -16,7 +15,7 @@ const showWarnDeatil = ref(false)
 const hdClick3 = (e) => {
     if (e.ceil) {
         if (e.columnIndex == 3) {
-            // showWarnPop.value = true
+            popData.value=data[e.rowIndex]
             showWarnDeatil.value = true
         }
     }
@@ -49,13 +48,21 @@ const config3 = reactive({
     ]
 })
 
+const data=reactive([])
+const popData=ref("")
+
 onMounted( ()=>{
     deviceAlarmCountApi(
     {
         ...userInfoStore.userInfo
     }
     ).then(res=>{
+
+        console.log(res)
         res.data.list.forEach(item => {
+
+
+            data.push(item)
             config3.data.push(
                 [item.device_name, item.device_code, item.update_time, `<span style="color:#2562AD"> 详情 </span>`,],
             )

src/components/index/rightTop.vue

@@ -55,6 +55,9 @@
 <script setup>
 import {ref,reactive,onMounted} from "vue"
 import {productListApi} from "@/api.js"
+import { areaObj } from "@/store/index.js"
+const userInfoStore=areaObj()
+// ...userInfoStore.userInfo
 const scrollTableFn = () => {
     const tag = document.getElementById('eq')
     const height = tag.scrollHeight
@@ -72,8 +75,8 @@ const scrollTableFn = () => {
 const productList=reactive([])
 productListApi(
     {
-        areaCode:510521,
-        streetCode:510521100
+       ...userInfoStore.userInfo
+
 
     }
 ).then(res=>{

src/components/warnDetail.vue

@@ -2,7 +2,7 @@
     <div class="warn-box">
         <div class="offWarn" @click="emit('off')">关闭</div>
         <div class="box-top">
-            <img :src="u" style="width: 5vw;height: 4.5vw;" alt="">
+            <img :src="props.data.image" style="width: 5vw;height: 4.5vw;" alt="">
             <div style="display: flex;justify-content: space-between;flex-direction: column;margin-left: 1vw;">
                 <div style="font-family:FZCYJ ;">告警数据:</div>
                 <div class="warn-li"> <img src="/static/index/PM.png" class="pm-img"> <span class="pm-num">1</span>
@@ -17,11 +17,9 @@
             </div>
         </div>
         <div class="box-bottom">
-
             <div style="font-family: FZCYJ;">告警原因</div>
-            <div class="text" style="width: 10vw;">这地方时间回到房间和第三方季后赛得分</div>
-            <div style="font-family: FZCYJ;margin-top: 1vh;">建议解决方案</div>
-            <div class="settle text">实打实的技术的开发和迪斯科飞机还是打开非官方的离开国家队联发科更健康</div>
+            <div class="text" style="width: 10vw;">{{ props.data.content }}</div>
+           
         </div>
 
 
@@ -90,7 +88,15 @@
 }
 </style>
 <script setup>
-import { ref, reactive, defineEmits } from "vue"
+import { ref, reactive, defineEmits,defineProps } from "vue"
+
+const props = defineProps({
+    data:Object,
+})
+
+
+console.log
+
 const u = ref('https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231129\/202311291816106120a4034.png')
 
 const emit = defineEmits(['off'])

src/store/index.js

@@ -5,11 +5,14 @@ import {
 export const areaObj = defineStore('counter', {
     state: () => ({
         userInfo: {
-
-            areaCode:'',
-            streetCode:'',
+            // areaCode:'',
+            // streetCode:'',
 
         },
+        address:{
+            city:"",
+            area:""
+        }
 
 
     }),
@@ -18,6 +21,11 @@ export const areaObj = defineStore('counter', {
         changeUserInfoFn(areaCode,streetCode='') {
             this.userInfo.areaCode = areaCode
             this.userInfo.streetCode = streetCode||''
+        },
+        changeAddress(c,a){
+            this.address.city=c
+            this.address.area=a
+
         }
 
     }

src/view/home.vue

@@ -2,13 +2,13 @@
     <div class="box">
         <div class="l">
             <div class="top">
-                <leftTop></leftTop>
+                <leftTop :key="userInfoStore.userInfo.streetCode"></leftTop>
             </div>
             <div class="center top">
-                <leftCenter></leftCenter>
+                <leftCenter :key="userInfoStore.userInfo.streetCode"></leftCenter>
             </div>
             <div class="bottom top">
-                <leftBottom></leftBottom>
+                <leftBottom :key="userInfoStore.userInfo.streetCode"></leftBottom>
             </div>
         </div>
         <div class="c">
@@ -21,27 +21,37 @@
                     <div class="c-top-li">地块数量 <span class="color-font"
                             style="font-size: 18px;margin-left: 1vw; ">{{ centerData.landCount }}</span> 块</div>
                 </div>
+
+                <!-- <div class="c-top-tit">
+                    <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>
+                </div> -->
                 <div class="map">
-                    <areaMap></areaMap>
+                    <areaMap ></areaMap>
                 </div>
             </div>
             <div class="bottom">
-                <centerBottom></centerBottom>
+                <centerBottom :key="userInfoStore.userInfo.streetCode"></centerBottom>
             </div>
         </div>
         <div class="r">
             <div class="top">
-                <rightTop></rightTop>
+                <rightTop :key="userInfoStore.userInfo.streetCode"></rightTop>
             </div>
             <div class="bottoms">
                 <div style="height: 35%;">
                     <div class="landa">
-                        <div class="land-li" v-for="(item, index) in landlist" :key="index">{{ item.title }}</div>
+                        <div class="land-li" @click="choseUrl(item)" 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 v-if="video_url" :src="video_url"></JessibucaDemo>
+                    <div style="height: 100%;height: 100%;background-color: #0C2856;position: relative;" v-else> 
                         
+                        <img src="/static/index/video.png"  style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);" alt="">
+                        
+                        </div>
                 </div>
             </div>
         </div>
@@ -55,18 +65,17 @@ 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 { centralCountApi } from "@/api.js"
 import areaMap from "@/components/areaMap.vue"
 import { landListApi } from "@/api.js"
 import rightTop from "../components/index/rightTop.vue"
-
+import { areaObj } from "@/store/index.js"
+const userInfoStore= areaObj()
+// ...userInfoStore.userInfo
 
 centralCountApi({
-    areaCode: 510521,
-    streetCode: 510521100
+...userInfoStore.userInfo
 }).then(res => {
-    console.log(res.data)
 
 for (let key in centerData){
     centerData[key]=res.data[key]
@@ -83,15 +92,21 @@ const centerData = reactive({
 const landlist = reactive([])
 
 landListApi({
-    areaCode: 510521,
-    streetCode: 510521100
+    ...userInfoStore.userInfo
 }).then(res => {
     res.data.list.forEach(item => { landlist.push(item) })
 
 })
+const video_url=ref('')
 
+const choseUrl=(item)=>{
+    video_url.value=''
+    setTimeout( ()=>{
+        video_url.value=item.video_url
 
+    },500)
 
+}