fix

package.json

@@ -15,6 +15,7 @@
     "crypto-js": "^4.1.1",
     "echarts": "^5.2.2",
     "element-plus": "^1.1.0-beta.24",
+    "moment": "^2.29.1",
     "nprogress": "^0.2.0",
     "ol": "^6.9.0",
     "pinia": "^2.0.0",

src/layout/BaseLayout/index.scss

@@ -1,54 +1,66 @@
 @import '../../styles/utils.scss';
-
 .base-layout-container {
-  height: 100vh;
-  background-image: url('../../assets/bg.png');
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: top center;
-
-  .dahua-content {
-    position: fixed;
-    top: 0;
-    left: 0;
-    &.display {
-      visibility: visible!important;
-      width: 100%;
-      height: 100vh;
-      z-index: 10;
-    }
-  }
-
-  header {
-    width: 100%;
-    height: 94px * 2;
-    height: px2rem(94px * 2);
-    background: transparent;
-    // background-image: url('../../assets/header.png');
-    background-image: url('../../assets/header@2x.png');
+    height: 100vh;
+    background-image: url('../../assets/bg.png');
     background-repeat: no-repeat;
-    background-size: contain;
-    position: fixed;
-    top: 0;
-    z-index: 1;
-    .back-to-home {
-      position: absolute;
-      width: px2rem(600px * 2);
-      cursor: pointer;
-      height: 100%;
-      left: 50%;
-      transform: translateX(-50%);
+    background-size: cover;
+    background-position: top center;
+    .dahua-content {
+        position: fixed;
+        top: 0;
+        left: 0;
+        &.display {
+            visibility: visible!important;
+            width: 100%;
+            height: 100vh;
+            z-index: 10;
+        }
+    }
+    header {
+        width: 100%;
+        height: 94px * 2;
+        height: px2rem(94px * 2);
+        background: transparent;
+        // background-image: url('../../assets/header.png');
+        background-image: url('../../assets/header@2x.png');
+        background-repeat: no-repeat;
+        background-size: contain;
+        position: fixed;
+        top: 0;
+        z-index: 1;
+        .back-to-home {
+            position: absolute;
+            width: px2rem(600px * 2);
+            cursor: pointer;
+            height: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+        .time-text {
+            font-size: px2rem(16px * 2);
+            color: #39d6fe;
+            font-weight: 400;
+            line-height: px2rem(15px * 5);
+            float: right;
+            padding-right: px2rem(18px * 2);
+             :first-child {
+                font-weight: 700;
+                margin-right: px2rem(55px * 2);
+            }
+             :last-child {
+                margin-left: px2rem(13px * 2);
+            }
+        }
     }
-  }
-  main {
-    display: flex;
-    flex-direction: column;
-    min-height: calc(100vh);
-    position: relative;
-    .el-button--small {
-      min-height: px2rem(32px * 4);
-      padding: px2rem(9px * 2) px2rem(15px * 5);
-      font-size: px2rem(12px * 4);
+    main {
+        display: flex;
+        flex-direction: column;
+        min-height: calc(100vh);
+        position: relative;
+        .el-button--small {
+            min-height: px2rem(32px * 4);
+            padding: px2rem(9px * 2) px2rem(15px * 5);
+            font-size: px2rem(12px * 4);
+        }
     }
-  }
-}
+}

src/layout/BaseLayout/index.tsx

@@ -1,10 +1,125 @@
-import { defineComponent, onMounted, watchEffect } from "vue";
+import { defineComponent, onMounted, watchEffect,ref } from "vue";
 import { RouterView, useRoute, useRouter } from 'vue-router';
 import MarkerMap from '@/components/MarkerMap';
 import './index.scss';
 import { useIncidentStore, useDaHuaStore } from '@/store';
 import { constants } from 'zlib';
 import clsx from "clsx";
+import moment from 'moment';
+
+moment.locale('zh-cn', {
+  months:
+    '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split(
+      '_',
+    ),
+  monthsShort: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),
+  weekdays: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),
+  weekdaysShort: '周日_周一_周二_周三_周四_周五_周六'.split('_'),
+  weekdaysMin: '日_一_二_三_四_五_六'.split('_'),
+  longDateFormat: {
+    LT: 'Ah点mm分',
+    LTS: 'Ah点m分s秒',
+    L: 'YYYY-MM-DD',
+    LL: 'YYYY年MMMD日',
+    LLL: 'YYYY年MMMD日Ah点mm分',
+    LLLL: 'YYYY年MMMD日ddddAh点mm分',
+    l: 'YYYY-MM-DD',
+    ll: 'YYYY年MMMD日',
+    lll: 'YYYY年MMMD日Ah点mm分',
+    llll: 'YYYY年MMMD日ddddAh点mm分',
+  },
+  meridiemParse: /凌晨|早上|上午|中午|下午|晚上/,
+  meridiemHour: function (h, meridiem) {
+    let hour = h;
+    if (hour === 12) {
+      hour = 0;
+    }
+    if (meridiem === '凌晨' || meridiem === '早上' || meridiem === '上午') {
+      return hour;
+    } else if (meridiem === '下午' || meridiem === '晚上') {
+      return hour + 12;
+    } else {
+      // '中午'
+      return hour >= 11 ? hour : hour + 12;
+    }
+  },
+  meridiem: function (hour, minute, isLower) {
+    const hm = hour * 100 + minute;
+    if (hm < 600) {
+      return '凌晨';
+    } else if (hm < 900) {
+      return '早上';
+    } else if (hm < 1130) {
+      return '上午';
+    } else if (hm < 1230) {
+      return '中午';
+    } else if (hm < 1800) {
+      return '下午';
+    } else {
+      return '晚上';
+    }
+  },
+  calendar: {
+    sameDay: function () {
+      return this.minutes() === 0 ? '[今天]Ah[点整]' : '[今天]LT';
+    },
+    nextDay: function () {
+      return this.minutes() === 0 ? '[明天]Ah[点整]' : '[明天]LT';
+    },
+    lastDay: function () {
+      return this.minutes() === 0 ? '[昨天]Ah[点整]' : '[昨天]LT';
+    },
+    nextWeek: function () {
+      let startOfWeek, prefix;
+      startOfWeek = moment().startOf('week');
+      prefix = this.diff(startOfWeek, 'days') >= 7 ? '[下]' : '[本]';
+      return this.minutes() === 0 ? prefix + 'dddAh点整' : prefix + 'dddAh点mm';
+    },
+    lastWeek: function () {
+      let startOfWeek, prefix;
+      startOfWeek = moment().startOf('week');
+      prefix = this.unix() < startOfWeek.unix() ? '[上]' : '[本]';
+      return this.minutes() === 0 ? prefix + 'dddAh点整' : prefix + 'dddAh点mm';
+    },
+    sameElse: 'LL',
+  },
+  ordinalParse: /\d{1,2}(日|月|周)/,
+  ordinal: function (number, period) {
+    switch (period) {
+      case 'd':
+      case 'D':
+      case 'DDD':
+        return number + '日';
+      case 'M':
+        return number + '月';
+      case 'w':
+      case 'W':
+        return number + '周';
+      default:
+        return number;
+    }
+  },
+  relativeTime: {
+    future: '%s内',
+    past: '%s前',
+    s: '几秒',
+    m: '1 分钟',
+    mm: '%d 分钟',
+    h: '1 小时',
+    hh: '%d 小时',
+    d: '1 天',
+    dd: '%d 天',
+    M: '1 个月',
+    MM: '%d 个月',
+    y: '1 年',
+    yy: '%d 年',
+  },
+  week: {
+    // GB/T 7408-1994《数据元和交换格式·信息交换·日期和时间表示法》与ISO 8601:1988等效
+    dow: 1, // Monday is the first day of the week.
+    doy: 4, // The week that contains Jan 4th is the first week of the year.
+  },
+});
 
 export default defineComponent({
   setup() {
@@ -70,19 +185,43 @@ export default defineComponent({
       }, false)
 
     });
+    const timetext = ref("-");
+    const datetext = ref('-');
+    const weektext = ref('-');
+    // debugger
+    setInterval(() => { 
+      datetext.value =
+        moment().format('YYYY年MM月DD日') ; 
+      weektext.value = moment().format('dddd');
+      timetext.value = moment().format('HH:mm:ss');
+
+    },1000)
 
     return () => (
       <section class="base-layout-container">
-        <iframe style={{ visibility: 'hidden', height: '100vh', width: '100%' }} class={clsx('dahua-content', { ['display']: daHuaStore.dahuaUserVisible })}
-          id="DAHUA" name="DAHUA" src="http://sqdh.xt.wenhq.top:8083" frameborder="0" />
+        <iframe
+          style={{ visibility: 'hidden', height: '100vh', width: '100%' }}
+          class={clsx('dahua-content', {
+            ['display']: daHuaStore.dahuaUserVisible,
+          })}
+          id="DAHUA"
+          name="DAHUA"
+          src="http://sqdh.xt.wenhq.top:8083"
+          frameborder="0"
+        />
         <header class="base-layout-title-contatisner">
           <div class="back-to-home" onClick={() => router.push('/home')}></div>
+          <div class="time-text">
+            <span>{timetext.value}</span>
+            <span>{datetext.value}</span>
+            <span>{weektext.value}</span>
+          </div>
         </header>
         <main>
           <RouterView />
           <MarkerMap
             readonly={route.path.includes('incidentDetail')}
-          // marker={store.incidentDetail}
+            // marker={store.incidentDetail}
           />
         </main>
       </section>

src/main.ts

@@ -3,9 +3,14 @@ import ElementPlus from 'element-plus';
 import { createPinia } from 'pinia';
 import App from './App';
 import router from './router';
+
 // import 'nprogress/nprogress.css';
 import './styles/element/index.scss';
 import './styles/global.scss';
 import '@/utils/flexible';
 
-createApp(App).use(createPinia()).use(ElementPlus).use(router).mount('#app');
+createApp(App)
+  .use(createPinia())
+  .use(ElementPlus)
+  .use(router)
+  .mount('#app');

src/views/IncidentDetail/CommandChainCard/index.tsx

@@ -1,5 +1,5 @@
 import Card from '@/components/Card';
-import { computed, defineComponent,onMounted } from 'vue-demi';
+import { computed, defineComponent,onMounted,ref } from 'vue-demi';
 // @ts-ignore
 import command from '@/assets/icons/detail/command@2x.png';
 // @ts-ignore
@@ -28,12 +28,12 @@ export default defineComponent({
         (i) => i?.dictValue?.toString() === value?.toString(),
       )?.dictLabel ?? '-';
     
-    onMounted(() => {
-
+   
 
+    
+    onMounted(() => {
+      
     });
-
-
     
     
     // const xblist = ['2', '2', '2', '2'];
@@ -87,11 +87,8 @@ export default defineComponent({
           </div>
           <div
             class="main-dept"
-            style={
-              store?.incidentDetail?.baseInfo?.assistDept?.split(',').length !=
-              0
-                ? 'display:none'
-                : 'display:block'
+            v-show={
+              (store?.incidentDetail?.baseInfo?.assistDept?.split(',') ?? []).length!=0
             }>
             <div>
               <div class="dept" datatype="2">
@@ -105,16 +102,23 @@ export default defineComponent({
               <div
                 class="leftline"
                 style="position: absolute;background: white;width: 1px;left: 0;"></div>
-              {store?.incidentDetail?.baseInfo?.assistDept?.split(',')
-                ? store?.incidentDetail?.baseInfo?.assistDept?.split(',')
-                : [].map((item, index) => (
-                    <div
-                      class="dept-name"
-                      datatype={index == xblist.length - 1 ? '' : '0'}>
-                      <div></div>
-                      {getDept(item)}
-                    </div>
-                  ))}
+              {(
+                store?.incidentDetail?.baseInfo?.assistDept?.split(',') ?? []
+              ).map((item, index) => (
+                <div
+                  class="dept-name"
+                  datatype={
+                    index ==
+                    store?.incidentDetail!.baseInfo!.assistDept!.split(',')
+                      .length -
+                      1
+                      ? ''
+                      : '0'
+                  }>
+                  <div></div>
+                  {getDept(item)}
+                </div>
+              ))}
             </div>
           </div>
         </div>

src/views/IncidentDetail/ExecutionLogCard/index.tsx

@@ -9,16 +9,17 @@ export default defineComponent({
   setup(props) {
     const store = useIncidentStore();
 
-    const medias = computed(() =>
-      (store.incidentDetail?.baseInfo?.pic?.split(',') ?? []).concat(
-        store.incidentDetail?.baseInfo?.video?.split(',') ?? [],
-      ),
-    );
+    // const medias = computed(() =>
+    //   (store.incidentDetail?.baseInfo?.pic?.split(',') ?? []).concat(
+    //     store.incidentDetail?.baseInfo?.video?.split(',') ?? [],
+    //   ),
+    // );
+
 
     return () => (
       <Card cardType="execution-log">
         <div class="execution-log-container">
-          {store.incidentDetail?.process?.map((item, idx) => (
+          {/* {store.incidentDetail?.process?.map((item, idx) => (
             <div class={clsx('log-item', `log-item-${idx % 4}`)}>
               <span class="log-label">
                 {item.des?.includes('>>>>') ? (
@@ -57,7 +58,41 @@ export default defineComponent({
                 </span>
               </span>
             </div>
-          ))}
+          ))} */}
+
+          <div class="pitem pitem1">
+            <div class="pcontent">
+              <div class="ptime">
+                <span>2021-11-12 13:11</span>
+              </div>
+              <div class="pdesc">
+                <div>这里是内容文字，超过一行省略号省略号...</div>
+                <div class="exdesc">张三、李四、王五、李四、王五等<span>30</span>未读</div>
+              </div>
+            </div>
+            <div class="pline"></div>
+          </div>
+          <div class="pitem pitem2">
+            <div class="pcontent">
+              <div class="ptime"></div>
+              <div class="pdesc">dfsd</div>
+            </div>
+            <div class="pline"></div>
+          </div>
+          <div class="pitem pitem3">
+            <div class="pcontent">
+              <div class="ptime"></div>
+              <div class="pdesc">dfsd</div>
+            </div>
+            <div class="pline"></div>
+          </div>
+          <div class="pitem pitem1" datatype="last">
+            <div class="pcontent">
+              <div class="ptime"></div>
+              <div class="pdesc">dfsd</div>
+            </div>
+            <div class="pline"></div>
+          </div>
         </div>
       </Card>
     );

src/views/IncidentDetail/index.scss

@@ -434,17 +434,17 @@
         &-bg-execution-log {
             // right: px2rem(22px);
             position: relative;
-            &::before {
-                content: '';
-                position: absolute;
-                width: 14px;
-                height: calc(100% - px2rem(80px * 2) - px2rem(30px * 2));
-                background: #112692;
-                top: calc(px2rem(80px + 20px));
-                left: 50%;
-                transform: translateX(-50%);
-                z-index: -1;
-            }
+            // &::before {
+            //     content: '';
+            //     position: absolute;
+            //     width: 14px;
+            //     height: calc(100% - px2rem(80px * 2) - px2rem(30px * 2));
+            //     background: #112692;
+            //     top: calc(px2rem(80px + 20px));
+            //     left: 50%;
+            //     transform: translateX(-50%);
+            //     z-index: -1;
+            // }
             .execution-log-container {
                 padding: px2rem(20px * 2) 0;
                 .log-item {
@@ -582,6 +582,80 @@
                         }
                     }
                 }
+                .pitem1 {
+                    .ptime {
+                        background-image: url("../../assets/card-bg/blue@2x.png") !important;
+                    }
+                }
+                .pitem2 {
+                    .ptime {
+                        background-image: url("../../assets/card-bg/red@2x.png") !important;
+                    }
+                }
+                .pitem3 {
+                    .ptime {
+                        background-image: url("../../assets/card-bg/yellow@2x.png") !important;
+                    }
+                }
+                .pitem {
+                    position: relative;
+                    .pline {
+                        position: absolute;
+                        width: px2rem(14px * 2);
+                        height: 100%;
+                        background: #112692;
+                        left: px2rem(17px * 2);
+                        top: 0;
+                        z-index: 0;
+                        border: none;
+                    }
+                    .pline::after {
+                        background: url('../../assets/icons/detail/arrow@2x.png');
+                        width: px2rem(12px * 2);
+                        height: px2rem(42px * 2);
+                        z-index: 1;
+                        position: absolute;
+                        content: no-open-quote;
+                        background-size: 100% 100%;
+                        background-repeat: no-repeat;
+                        top: 50%;
+                        left: 10%;
+                    }
+                    &[datatype='last'] {
+                        .pline {
+                            display: none;
+                        }
+                    }
+                    .pcontent {
+                        min-height: px2rem(48px * 2 + 158px *2);
+                        z-index: 1;
+                        position: relative;
+                        font-size: px2rem(18px * 2);
+                        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
+                        font-weight: 400;
+                        .exdesc {
+                            opacity: 0.6;
+                            font-size: px2rem(16px * 2);
+                            font-family: Source Han Sans CN, Source Han Sans CN-Regular;
+                            font-weight: 400;
+                        }
+                        .ptime {
+                            background-image: url("../../assets/card-bg/blue@2x.png");
+                            width: px2rem(254px * 2);
+                            height: px2rem(48px * 2);
+                            background-repeat: no-repeat;
+                            background-size: 100% 100%;
+                            font-family: DIN Alternate, DIN Alternate-Bold;
+                            line-height: px2rem(48px * 2);
+                            text-align: right;
+                            font-size: px2rem(24px * 2);
+                            font-weight: 700;
+                            span {
+                                padding-right: px2rem(24px * 2);
+                            }
+                        }
+                    }
+                }
             }
         }
         &-bg-live-monitoring {

yarn.lock

@@ -1836,6 +1836,11 @@ mlly@^0.2.2:
   dependencies:
     import-meta-resolve "^1.1.1"
 
+moment@^2.29.1:
+  version "2.29.1"
+  resolved "https://registry.npmmirror.com/moment/download/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
+
 ms@2.1.2:
   version "2.1.2"
   resolved "https://registry.npmmirror.com/ms/download/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"