diff --git a/src/App.vue b/src/App.vue
index 3e7ac2f..d637296 100644
--- a/src/App.vue
+++ b/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)
 
 
 
diff --git a/src/components/JessibucaDemo.vue b/src/components/JessibucaDemo.vue
index fe11816..3ae170b 100644
--- a/src/components/JessibucaDemo.vue
+++ b/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 {
diff --git a/src/components/areaList.vue b/src/components/areaList.vue
index 65c5be5..10cbf01 100644
--- a/src/components/areaList.vue
+++ b/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)
 
diff --git a/src/components/areaMap.vue b/src/components/areaMap.vue
index 693aa08..cfe3a08 100644
--- a/src/components/areaMap.vue
+++ b/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,23 +298,22 @@ 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';
+    return item.properties.name == name
+  })
+  var mapName = 'town';
   const myChart = document.getElementById("chart3")
   let option = {
     geo: [
@@ -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()
 
diff --git a/src/components/index/centerBottom.vue b/src/components/index/centerBottom.vue
index 2a18474..c8e2e62 100644
--- a/src/components/index/centerBottom.vue
+++ b/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=>{
diff --git a/src/components/index/leftBottom.vue b/src/components/index/leftBottom.vue
index 49916b4..f3567f2 100644
--- a/src/components/index/leftBottom.vue
+++ b/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 => {
diff --git a/src/components/index/leftCenter.vue b/src/components/index/leftCenter.vue
index 8a70a77..1d5e02f 100644
--- a/src/components/index/leftCenter.vue
+++ b/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
diff --git a/src/components/index/leftTop.vue b/src/components/index/leftTop.vue
index bb8b2e6..1ba8eec 100644
--- a/src/components/index/leftTop.vue
+++ b/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>`,],
             )
diff --git a/src/components/index/rightTop.vue b/src/components/index/rightTop.vue
index e2247ab..61ae6f3 100644
--- a/src/components/index/rightTop.vue
+++ b/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=>{
diff --git a/src/components/warnDetail.vue b/src/components/warnDetail.vue
index c6f876e..43330b2 100644
--- a/src/components/warnDetail.vue
+++ b/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'])
diff --git a/src/store/index.js b/src/store/index.js
index a84269d..33df16d 100644
--- a/src/store/index.js
+++ b/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
+
         }
 
     }
diff --git a/src/view/home.vue b/src/view/home.vue
index 1587235..eb7e4a3 100644
--- a/src/view/home.vue
+++ b/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)
 
+}
 
 
 
diff --git a/static/index/video.png b/static/index/video.png
new file mode 100644
index 0000000..a5fb209
Binary files /dev/null and b/static/index/video.png differ