wenhongquan 3 năm trước cách đây
mục cha
commit
d2d602afa9

BIN
src/assets/card-bg/frame_sjlb@2x.png


BIN
src/assets/icons/detail/back@2x.png


BIN
src/assets/icons/detail/list@2x.png


+ 11 - 11
src/components/MapView/index.tsx

@@ -38,7 +38,12 @@ export default defineComponent({
       {
         name: '市局运行监测',
         image: icon_sys_sjyxjc,
-        url: 'http://61.147.254.211:9999/screen/',
+        url: 'http://10.11.208.39:9999/screen/#/home/country-home',
+      },
+      {
+        name: '交通应急指挥',
+        image: icon_sys_jtyjzh,
+        url: 'http://sqpchd.xt.wenhq.top:8083/#/home',
       },
       {
         name: '执法运行监测',
@@ -51,20 +56,15 @@ export default defineComponent({
         url: 'http://10.11.208.13:30080/tles-hcdp-web/#/HCdpView',
       },
       {
-        name: '交通应急指挥',
-        image: icon_sys_jtyjzh,
+        name: '港行运行监测',
+        image: icon_sys_ghyxjc,
         url: 'http://sqpchd.xt.wenhq.top:8083/#/home',
       },
       {
-        name: '路运行监测',
+        name: '路运行监测',
         image: icon_sys_dlyxjc,
         url: 'http://sqpchd.xt.wenhq.top:8083/#/home',
       },
-      {
-        name: '港行运行监测',
-        image: icon_sys_ghyxjc,
-        url: 'http://sqpchd.xt.wenhq.top:8083/#/home',
-      },
     ]);
 
     const openclose = () => { 
@@ -74,11 +74,11 @@ export default defineComponent({
 
     const classindex=ref("")
     const enter = (index) => {
-      console.log(index)
+
       classindex.value = index;
     };
     const leave = (index) => {
-      console.log(index);
+ 
       classindex.value = '';
     };
 

+ 2 - 2
src/components/MarkerMap/index.scss

@@ -92,8 +92,8 @@
     .othersystem {
         position: absolute;
         bottom: 5%;
-        left: 27.5%;
-        width: 45%;
+        left: 30%;
+        width: 40%;
         height: 15%;
         text-align: center;
         flex-direction: row;

+ 10 - 4
src/components/MarkerMap/index.tsx

@@ -56,7 +56,7 @@ import { IncidentItemDetail } from '@/api/incident';
 import { useIncidentStore } from '@/store';
 import Popup from '../Popup';
 import { ElMessage } from 'element-plus';
-import { isEmpty } from 'lodash';
+import { isEmpty, xor } from 'lodash';
 import clsx from 'clsx';
 import { SingleDeviceItem } from '@/api/resource';
 
@@ -543,8 +543,8 @@ export default defineComponent({
                 offset: [-25, -25],
               })
                 .setLngLat({
-                  lng: i.locations?.split(',')[0],
-                  lat: i.locations?.split(',')[1],
+                  lng: ((i) => { var ii = parseFloat(i.locations?.split(',')[0] ?? "0"); return ii; })(i),
+                  lat: ((i) => { var ii = parseFloat(i.locations?.split(',')[1] ?? "0"); return ii>90?89:ii<-90?-89:ii; })(i) ,
                 })
                 .setPopup(popup)
                 .addTo(state.map),
@@ -564,8 +564,14 @@ export default defineComponent({
 
       const leftTop = locations.reduce((carry, next) => {
         if (carry.length === 0) return next;
-        return [Math.min(carry[0], next[0]), Math.max(carry[1], next[1])];
+        var x = Math.min(carry[0], next[0]);
+        var y = Math.max(carry[1], next[1]);
+        console.log(x)
+        console.log(y);
+
+        return [x<118?118:x, y>35?35:y<30?30:y];
       }, []);
+      console.log(leftTop)
 
       const rightBottom = locations.reduce((carry, next) => {
         if (carry.length === 0) return next;

+ 6 - 0
src/store/useMainStore.ts

@@ -12,6 +12,7 @@ import { BaseLoginUrl } from '@/constants/constants';
 export interface MainStateType {
   cancelReqToken: Canceler[];
   userInfo: Omit<UserInfo, 'accessToken'>;
+  isshoweventlist:Boolean;
 }
 
 export interface MainActionsType {
@@ -19,12 +20,14 @@ export interface MainActionsType {
   clearReqToken(): void;
   getUserInfo(ticket: string): Promise<true | undefined>;
   getMessage(params: NoticeInfoParams): Promise<NoticeInfo[] | undefined>;
+  setEventListshow(isshow:boolean):void;
 }
 
 export default defineStore<'main', MainStateType, {}, MainActionsType>('main', {
   state: () => ({
     cancelReqToken: [],
     userInfo: {},
+    isshoweventlist:false,
   }),
   actions: {
     async getMessage(params) {
@@ -35,6 +38,9 @@ export default defineStore<'main', MainStateType, {}, MainActionsType>('main', {
         console.log(err);
       }
     },
+    setEventListshow(isshow) { 
+       this.isshoweventlist = isshow; 
+    },
     async getUserInfo(ticket) {
       try {
         const {

+ 2 - 3
src/store/useMarkerStore.ts

@@ -98,7 +98,7 @@ export default defineStore<'marker', MarkerStateType, {}, MainActionsType>(
             ...item,
             locations: `${item.gpsX},${item.gpsY}`,
           }));
-          console.log(this.singleDevice);
+          // console.log(this.singleDevice);
         } finally {
           this.toggleLoading();
         }
@@ -111,7 +111,6 @@ export default defineStore<'marker', MarkerStateType, {}, MainActionsType>(
           let videoData = [];
           for(var index in data){
             if(data[index].gpsX){
-              console.log(index);
               videoData.push(data[index]);
             }
           }
@@ -121,7 +120,7 @@ export default defineStore<'marker', MarkerStateType, {}, MainActionsType>(
             ...item,
             locations: `${item.gpsX},${item.gpsY}`,
           }));
-          console.log(this.videoSurveillance);
+          // console.log(this.videoSurveillance);
         } finally {
           this.toggleLoading();
         }

+ 1 - 1
src/views/HomePage/MessageCard/index.tsx

@@ -17,7 +17,7 @@ export default defineComponent({
     const router = useRouter();
 
     return () => (
-      <Card cardType="message-list">
+      <Card cardType="message-list" style="display:none">
         <div class="message-card-container">
           {store.incidents.data?.map((item, idx) => (
             <a

+ 22 - 4
src/views/HomePage/index.tsx

@@ -1,7 +1,13 @@
 import { onMounted, defineComponent } from 'vue';
 import MessageCard from './MessageCard';
 import './index.scss';
-import { useCommonStore, useIncidentStore } from '@/store';
+import {
+  useCommonStore,
+  useIncidentStore,
+  useMarkerStore,
+} from '@/store';
+import { IncidentListResponse } from '@/api/incident';
+import { useRouter } from 'vue-router';
 
 export default defineComponent({
   name: 'HomePage',
@@ -9,17 +15,29 @@ export default defineComponent({
   setup() {
     const store = useIncidentStore();
     const commonStore = useCommonStore();
+    const router = useRouter();
+    const markerStore = useMarkerStore();
 
-    onMounted(() => {
+    onMounted(async () => {
       commonStore.getGlobalDict('zhdd_incident_level');
       commonStore.getGlobalDict('zhdd_incident_type');
       commonStore.getGlobalDict('zhdd_incident_source');
       commonStore.getGlobalDict('zhdd_car_type');
 
-      store.getIncidentList({
+      await store.getIncidentList({
         // 事件等级1,2的事件
         level: 1,
-      });
+      })
+      if ((store.incidents.data ?? []).length > 0) { 
+        var item = store.incidents.data![0];
+         markerStore.currentIncident = item;
+         item.id && (await store.getIncidentItem(item.id));
+         router.push(`/incidentDetail?id=${item.id}`);
+
+      }
+      
+    
+      
     });
     return () => (
       <div class="home-page-container">

+ 1 - 1
src/views/IncidentDetail/EmergencyCard/index.tsx

@@ -40,7 +40,7 @@ export default defineComponent({
                 {commonStore.globalDict['zhdd_incident_level']?.find(
                   (i) =>
                     i.dictValue?.toString() ===
-                    store.incidentDetail?.baseInfo['level']?.toString(),
+                    (store.incidentDetail?.baseInfo ?? {})['level']?.toString(),
                 )?.dictLabel ?? '-'}
               </div>
             </div>

+ 16 - 8
src/views/IncidentDetail/IncidentInfoCard/index.tsx

@@ -16,7 +16,10 @@ import IconSource2 from '@/assets/icons/detail/source2@2x.png';
 import IconStyle2 from '@/assets/icons/detail/style2@2x.png';
 // @ts-ignore
 import IconTitle from '@/assets/icons/detail/title@2x.png';
-import { useCommonStore, useIncidentStore } from '@/store';
+// @ts-ignore
+import IconList from '@/assets/icons/detail/list@2x.png';
+
+import { useCommonStore, useIncidentStore,useMainStore } from '@/store';
 
 const listss = [
   { label: '事件标题', icon: IconTitle, prop: 'name' as const },
@@ -30,6 +33,7 @@ export default defineComponent({
   setup(props) {
     const store = useIncidentStore();
     const commonStore = useCommonStore();
+    const mainStore = useMainStore();
     const list = computed(() => [
       // {
       //   label: '事件标题',
@@ -56,15 +60,21 @@ export default defineComponent({
         dict: 'zhdd_incident_level' as const,
       },
     ]);
+    const showeventlist = () => { 
+      mainStore.setEventListshow(true);
+    }
 
-    setTimeout(() => {
-      console.log(store.incidentDetail?.baseInfo);
-    }, 2000);
+    // setTimeout(() => {
+    //   console.log(store.incidentDetail?.baseInfo);
+    // }, 2000);
     
     // debugger
     return () => (
       <Card cardType="incident-info">
-        <div class="info-title">{ store.incidentDetail?.baseInfo?.name}</div>
+        <div class="event-list" onClick={showeventlist}>
+          <img src={IconList} />
+        </div>
+        <div class="info-title">{store.incidentDetail?.baseInfo?.name}</div>
         <div class="info-container">
           {list.value.map((item, idx) => (
             <div class="info-item">
@@ -79,9 +89,7 @@ export default defineComponent({
                     commonStore.globalDict[item.dict]?.find(
                       (i) =>
                         i.dictValue?.toString() ===
-                        (
-                          store.incidentDetail?.baseInfo[item.prop]
-                        )?.toString(),
+                        ((store.incidentDetail?.baseInfo ?? {})[item.prop] ?? "").toString(),
                     )?.dictLabel) ?? '-'}
               </div>
             </div>

+ 88 - 0
src/views/IncidentDetail/index.scss

@@ -68,6 +68,84 @@
         }
     }
     
+    .event-list-c {
+        position: absolute;
+        top: px2rem(76px * 2);
+        left: px2rem(30px * 2);
+        width: px2rem(861px * 2);
+        height: px2rem(475px * 2);
+        background-color: red;
+        z-index: 1;
+        background: url("../../assets/card-bg/frame_sjlb@2x.png");
+        background-size: 100% 100%;
+        .elc-back {
+            position: absolute;
+            right: px2rem(24px * 2);
+            top: px2rem(24px * 2);
+            font-size: px2rem(15px * 2);
+            font-weight: 400;
+            text-align: center;
+            color: #00e9ff;
+            img {
+                width: px2rem(15px * 2);
+                height: px2rem(12px * 2);
+                vertical-align: middle;
+            }
+        }
+        .elc-content {
+            // font-size: 3rem;
+            height: px2rem(475px * 2)- px2rem(55px * 4);
+            width: px2rem(861px * 2) - px2rem(27px * 4);
+            top: px2rem(79px * 2);
+            left: px2rem(27px * 2);
+            position: absolute;
+            overflow-y: auto;
+            overflow-x: hidden;
+            &::-webkit-scrollbar {
+                width: 5px;
+                height: 5px;
+            }
+            &::-webkit-scrollbar-track {
+                background: transparent;
+            }
+            &::-webkit-scrollbar-thumb {
+                background: #39d6fe;
+                border-radius: 3px;
+            }
+            >a {
+                color: #fff;
+                cursor: pointer;
+                &:hover {
+                    .title {
+                        transition: color 0.2s;
+                        color: #7cb3ff;
+                    }
+                }
+            }
+            .message-item {
+                padding-bottom: px2rem(30px * 2);
+                .title {
+                    font-size: px2rem(16px * 2);
+                    display: flex;
+                    align-items: top;
+                    padding-bottom: px2rem(13px * 2);
+                    color: #fff;
+                    .index {
+                        color: #fff;
+                        width: px2rem(20px * 2);
+                        // width: 20px * 2;
+                    }
+                }
+                .desc {
+                    font-size: px2rem(16px * 2);
+                    padding-left: px2rem(20px * 2);
+                    color: rgba(255, 255, 255, 0.5);
+                    // padding-left: 20px * 2;
+                }
+            }
+        }
+    }
+    
     .incident-detail-page-container {
         flex: 1;
         position: absolute;
@@ -109,6 +187,16 @@
             &-bg-incident-info {
                 // left: px2rem(30px);
                 margin-right: px2rem(21px * 2);
+                position: relative;
+                .event-list {
+                    position: absolute;
+                    top: px2rem(13px * 2);
+                    left: px2rem(23px * 2);
+                    img {
+                        width: px2rem(47px * 2);
+                        height: px2rem(34px * 2);
+                    }
+                }
                 .info-title {
                     margin-top: px2rem(20px * 2);
                     background: url('../../assets/card-bg/kuang_biaoti@2x.png') no-repeat;

+ 75 - 7
src/views/IncidentDetail/index.tsx

@@ -1,5 +1,5 @@
-import { onMounted, onUnmounted, defineComponent, ref, watchEffect } from 'vue';
-import { useRoute } from 'vue-router';
+import { onMounted, onUnmounted, defineComponent, ref, watchEffect,watch } from 'vue';
+import { useRoute,useRouter } from 'vue-router';
 import {
   useCommonStore,
   useDaHuaStore,
@@ -17,12 +17,18 @@ import LiveVideoCard from './LiveVideoCard';
 import AccidentCard from './AccidentCard';
 import EmergencyCard from './EmergencyCard';
 import './index.scss';
-import { watch } from 'fs';
+// import { watch } from 'fs';
 import { isEmpty } from 'lodash';
 import isString from 'lodash/isString';
 import { NeedsReadUser, NeedsReadUserName } from '@/api/common';
 import { BaseReg } from '@/constants/constants';
 
+// @ts-ignore
+import Iconback from '@/assets/icons/detail/back@2x.png';
+import MessageCard from '../HomePage/MessageCard';
+
+
+
 export default defineComponent({
   name: 'IncidentDetail',
   provide: {},
@@ -33,6 +39,7 @@ export default defineComponent({
     const markerStore = useMarkerStore();
     const daHuaStore = useDaHuaStore();
     const route = useRoute();
+    const router = useRouter();
 
     const liveVideoRef = ref<HTMLElement>();
 
@@ -79,6 +86,20 @@ export default defineComponent({
       }
     });
 
+    watch(
+      () => store.incidentDetail,
+      (next) => {
+        if(next.baseInfo==undefined||next.baseInfo==null) router.push('/home');
+        console.log(next)
+      },
+    );
+
+    const docloseeventlist = () => { 
+      mainStore.setEventListshow(false);
+    }
+
+    
+
     onMounted(async () => {
       commonStore.getGlobalDict('zhdd_incident_type');
       commonStore.getGlobalDict('zhdd_incident_source');
@@ -88,6 +109,10 @@ export default defineComponent({
         if (el.target && liveVideoRef.value?.contains(el.target as Node)) {
         }
       });
+      // if (!store.incidentDetail) { 
+      //   router.push("/home");
+
+      // }
     });
     onUnmounted(() => {
       store.incidentDetail = {};
@@ -99,7 +124,7 @@ export default defineComponent({
     return () => (
       <>
         <div class="incident-detail-page-container">
-          {!markerStore.livevideovisible && (
+          {
             <div class="detail-left">
               <IncidentInfoCard />
               <LiveMonitoringCard />
@@ -108,9 +133,9 @@ export default defineComponent({
               <CommandChainCard />
               <AccidentCard />
             </div>
-          )}
+          }
 
-          {!daHuaStore.dahuaUserVisible && (
+          {
             <div class="detail-right">
               <EmergencyCard />
               <IncidentPlanCard />
@@ -118,7 +143,7 @@ export default defineComponent({
 
               {/* <LiveMonitoringCard /> */}
             </div>
-          )}
+          }
         </div>
         {/*大华 相关的通讯录可以放这里*/}
         {/*{daHuaStore.dahuaUserVisible && (*/}
@@ -144,6 +169,49 @@ export default defineComponent({
             </div>
           </div>
         )}
+        <div class="event-list-c" v-show={mainStore.isshoweventlist}>
+          <div class="elc-back" onClick={docloseeventlist}>
+            <img src={Iconback} /> 返回
+          </div>
+          <div class="elc-content">
+           
+              {store.incidents.data?.map((item, idx) => (
+                <a
+                  onClick={async (e) => {
+                    e.preventDefault();
+                    // @ts-ignore
+                    markerStore.currentIncident = item;
+                    item.id && (await store.getIncidentItem(item.id));
+                    router.push(`/incidentDetail?id=${item.id}`);
+                  }}>
+                  <div class="message-item">
+                    <div class="title">
+                      <span class="index">{idx + 1}、</span>
+                      <span>
+                        {item.createTime +
+                          ',在' +
+                          item.addr +
+                          '处发生了' +
+                          (commonStore.globalDict['zhdd_incident_type']?.find(
+                            (i) => i.dictValue.toString() === `${item.type}`,
+                          )?.dictLabel ?? '预警') +
+                          '事件'}
+                      </span>
+                    </div>
+                    <div class="desc">
+                      来源:
+                      {
+                        commonStore.globalDict['zhdd_incident_source']?.find(
+                          (i) => i.dictValue.toString() === `${item.source}`,
+                        )?.dictLabel
+                      }
+                    </div>
+                  </div>
+                </a>
+              ))}
+      
+          </div>
+        </div>
       </>
     );
   },