Merge branch 'develop' of http://39.106.31.193:9211/mengff/jihe-hs into develop

ruoyi-ui/src/views/JiHeExpressway/components/RoadStateCard/index.vue

@@ -7,7 +7,7 @@
     </div>
     <div class="right">
       <div class="info">
-        <p v-for="(item, index) in keyMap" :key="index">
+        <p class="linText" v-for="(item, index) in keyMap" :key="index">
           <span>{{ item.label }}: </span>
           <span>{{ cardData[item.key] }}</span>
         </p>
@@ -15,8 +15,8 @@
       <div class="controls">
         <Button :style="{ background: firstBtnColor, width: '50%' }"
           @click.native="$emit('firstBtnClick', cardData.id)">{{
-            getFirstBtnText(cardData.state)
+        getFirstBtnText(cardData.state)
-          }}</Button>
+      }}</Button>
         <Button v-if="cardData.state == 4" :style="{ background: lastBtnColor, width: '50%' }"
           @click.native="$emit('lastBtnClick', cardData.id)">{{ getLastBtnText(cardData.state)
           }}</Button>
@@ -63,6 +63,10 @@ export default {
     keyMap: {
       type: Array,
       default: () => ([
+        {
+          key: "stringEventType",
+          label: "事件"
+        },
         {
           key: "stringEventSource",
           label: "来源"
@@ -98,9 +102,9 @@ export default {
   methods: {
     getFirstBtnText(state) {
       let text = '详情';
-      if(state == 5) text = '去确认'
+      if (state == 5) text = '去确认'
-      if(state == 4) text = '详情'
+      if (state == 4) text = '详情'
-      if(state == 3) text = '处置记录'
+      if (state == 3) text = '处置记录'
       return text;
     },
     getLastBtnText(state) {
@@ -139,6 +143,7 @@ export default {
     flex: 1;
     gap: 12px;
     height: 159px;
+    width: 201px;
 
     .info {
       flex: 1;
@@ -146,16 +151,31 @@ export default {
       flex-direction: column;
 
       >p {
-        font-size: 14px;
+        font-size: 12px;
         color: #f4f4f4;
         line-height: 24px;
 
-        &:first-child {
+        &:nth-child(-n+2) {
           color: #37E7FF;
-          font-size: 18px;
+          font-size: 16px;
           font-weight: bold;
-          margin-bottom: 16px;
         }
+
+        &:nth-child(2) {
+          margin-bottom: 3px;
+        }
+
+      }
+
+      .linText {
+        /*不换行*/
+        white-space: nowrap;
+        /*超出的显示省略号*/
+        text-overflow: ellipsis;
+        /*超出部分隐藏*/
+        overflow: hidden;
+        /*长单词不换行-兼容ie*/
+        // word-wrap: normal;
       }
     }
 

ruoyi-ui/src/views/JiHeExpressway/components/Video/Video.vue

@@ -1,5 +1,8 @@
 <template>
-  <video controls autoplay muted class="video-stream" v-bind="$attrs" ref="videoContainerRef" />
+  <video v-if="videoType == 'mp4'" controls muted class="video-stream" v-bind="$attrs" ref="videoContainerRef">
+    <source :src="url" type="video/mp4">
+  </video>
+  <video v-else controls autoplay muted class="video-stream" v-bind="$attrs" ref="videoContainerRef" />
 </template>
 
 <script>
@@ -20,16 +23,27 @@ export default {
       type: String,
       default: null
     },
+    videoType: {
+      type: String,
+      default: 'flv'
+    },
     rangeIndex: {
       type: Number,
       default: 0
     }
   },
   async mounted() {
-    // const player = await openLiveVideo(this.$refs.videoContainerRef, { camId: this.camId, url: this.url, pileNum: this.pileNum })
+    // setTimeout(() => {
-    const player = new HttpLivePlayer(this.$refs.videoContainerRef, { camId: this.camId, url: this.url, pileNum: this.pileNum, rangeIndex: this.rangeIndex });
+    //   this.$nextTick(() => {
+        if (this.videoType == 'flv') {
+          // const player = await openLiveVideo(this.$refs.videoContainerRef, { camId: this.camId, url: this.url, pileNum: this.pileNum })
+          const player = new HttpLivePlayer(this.$refs.videoContainerRef, { camId: this.camId, url: this.url, pileNum: this.pileNum, rangeIndex: this.rangeIndex });
+
+          this.$once("hook:beforeDestroy", () => player?.destroy());
+        }
+    //   })
+    // })
 
-    this.$once("hook:beforeDestroy", () => player?.destroy());
   }
 }
 </script>

ruoyi-ui/src/views/JiHeExpressway/components/Video/index.vue

@@ -14,7 +14,7 @@
     </div>
     <Transition name="fade" mode="out-in">
       <Video :rangeIndex="rangeIndex" v-if="active === 'video'" class="video-stream" :pileNum="pileNum" :camId="camId"
-        :url="url" />
+        :url="url" :videoType="videoType" />
       <img v-else src="./view.png" />
     </Transition>
   </div>
@@ -43,6 +43,10 @@ export default {
       type: String,
       default: null
     },
+    videoType: {
+      type: String,
+      default: 'flv'
+    },
     rangeIndex: {
       type: Number,
       default: 0

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/data.js

@@ -5,8 +5,8 @@ export const formList = [
     type: "input",
     options: {
       disabled: true,
-      placeholder: ''
+      placeholder: "",
-    }
+    },
   },
   {
     label: "桩号:",
@@ -14,8 +14,8 @@ export const formList = [
     type: "input",
     options: {
       disabled: true,
-      placeholder: ''
+      placeholder: "",
-    }
+    },
   },
   {
     label: "行驶方向:",
@@ -23,8 +23,8 @@ export const formList = [
     type: "input",
     options: {
       disabled: true,
-      placeholder: ''
+      placeholder: "",
-    }
+    },
   },
   {
     label: "事件类型:",
@@ -32,8 +32,8 @@ export const formList = [
     type: "input",
     options: {
       disabled: true,
-      placeholder: ''
+      placeholder: "",
-    }
+    },
   },
   {
     label: "事件原因:",
@@ -41,8 +41,8 @@ export const formList = [
     type: "input",
     options: {
       disabled: true,
-      placeholder: ''
+      placeholder: "",
-    }
+    },
   },
   {
     label: "事件状态:",
@@ -50,8 +50,8 @@ export const formList = [
     type: "input",
     options: {
       disabled: true,
-      placeholder: ''
+      placeholder: "",
-    }
+    },
   },
   {
     label: "操作员:",
@@ -59,8 +59,8 @@ export const formList = [
     type: "input",
     options: {
       disabled: true,
-      placeholder: ''
+      placeholder: "",
-    }
+    },
   },
   {
     label: "发生时间:",
@@ -68,8 +68,8 @@ export const formList = [
     type: "input",
     options: {
       disabled: true,
-      placeholder: ''
+      placeholder: "",
-    }
+    },
   },
   {
     label: "完结时间:",
@@ -77,18 +77,64 @@ export const formList = [
     type: "input",
     options: {
       disabled: true,
-      placeholder: ''
+      placeholder: "",
-    }
+    },
+  },
+  {
+    label: "水膜厚度(mm):",
+    key: "waterFilmThickness",
+    type: "input",
+    options: {
+      disabled: true,
+      placeholder: "",
+    },
+    visible: (data) => {
+      if (data?.waterFilmThickness) {
+        return true;
+      }
+      return false;
+    },
+  },
+  {
+    label: "风速:",
+    key: "windSpeed",
+    type: "input",
+    options: {
+      disabled: true,
+      placeholder: "",
+    },
+    visible: (data) => {
+      if (data?.windSpeed) {
+        return true;
+      }
+      return false;
+    },
+  },
+  {
+    label: "能见度(m):",
+    key: "visibility",
+    type: "input",
+    options: {
+      disabled: true,
+      placeholder: "",
+    },
+    visible: (data) => {
+      if (data?.visibility) {
+        return true;
+      }
+      return false;
+    },
   },
   {
     label: "事件描述:",
     key: "remark",
     type: "input",
+    isAlone: true,
     gridColumn: 3,
     options: {
       disabled: true,
-      placeholder: ''
+      placeholder: "",
-    }
+    },
   },
 ];
 

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue

@@ -4,12 +4,12 @@
       <Form :formList="formList" :dFormData="formData" label-width="100px" />
 
       <div class="video-pic">
-        <Video style="height: 100%; width: 380px;" :showHeader="activeName != '-1'" />
+        <Video style="height: 100%; width: 380px;" :showHeader="activeName != '-1'" :url="formData.videoList[0]" videoType="mp4"/>
-        <Video v-if="activeName != '-1'" style="height: 100%; width: 380px;" />
+        <Video v-if="activeName != '-1'" style="height: 100%; width: 380px;" :url="formData.videoList[1]" videoType="mp4"/>
 
         <Carousel v-else style="flex: 1" :pictures="formData.pictures" />
       </div>
-
+      <!-- <div>{{ formData.videoList[0] }}</div> -->
       <TimeLine1 v-if="activeName == '1' || activeName == '2'" :data="timeLine1List" />
       <TimeLine2 v-if="activeName == '1' || activeName == '2'" :data="timeLine2List" style="flex: 1;" />
 

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/data.js

@@ -114,7 +114,7 @@ export const gjSearchFormList = [
     required: false,
     type: "datePicker",
     options: {
-      style: 'width: 250px',
+      style: 'width: auto',
       type: "datetimerange",
       format: "yyyy-MM-dd HH:mm:ss",
       valueFormat: "yyyy-MM-dd HH:mm:ss",

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/index.vue

@@ -12,12 +12,14 @@
           新增
         </ButtonGradient>
         <ButtonGradient @click="onExport">
+
           <template #prefix>
             <img src="./images/export.svg" />
           </template>
           导出
         </ButtonGradient>
         <ButtonGradient @click="onRefresh">
+
           <template #prefix>
             <img src="./images/refresh.svg" />
           </template>
@@ -36,9 +38,9 @@
 
     <!-- 分页 -->
     <div class="footer">
-      <Pagination @current-change="getData" @size-change="onSizeChange" width="'100%'" :page-sizes="[12, 16, 20, 30, 50]"
+      <Pagination @current-change="getData" @size-change="onSizeChange" width="'100%'"
-        :page-size="searchData.pageSize" :current-page.sync="searchData.pageNum" layout="total, sizes, prev, pager, next"
+        :page-sizes="[12, 16, 20, 30, 50]" :page-size="searchData.pageSize" :current-page.sync="searchData.pageNum"
-        :total="total">
+        layout="total, sizes, prev, pager, next" :total="total">
       </Pagination>
     </div>
 
@@ -103,12 +105,67 @@ const warningTypeMapping = {
   4: '停车',
   5: '倒车/逆行',
   6: '烟火',
-  7: '撒落物8异常天气',
+  7: '撒落物',
+  8: '异常天气',
   9: '护栏碰撞',
   10: '交通事故',
   11: '车辆故障',
   99: '其它',
 }
+const warningSubclassTypeMapping = {
+  1: {
+    1: '拥堵',
+    2: '缓行',
+  },
+  2: {
+    1: '普通行人',
+    2: '工作人员',
+  },
+  3: {
+    1: '摩托车',
+    2: '自行车',
+  },
+  4: {
+    1: '非工程车',
+    2: '工程车',
+    3: '主路有车',
+    4: '匝道有车',
+    5: '车辆故障',
+    6: '交通事故',
+    7: '应急车道被占用',
+    8: '车离开应急车道',
+    9: '其他',
+  },
+  5: {
+    1: '倒车/逆行',
+  },
+  6: {
+    1: '烟火',
+  },
+  7: {
+    1: '撒落物',
+  },
+  8: {
+    1: '雨',
+    2: '冰雹',
+    3: '风',
+    4: '雾',
+    5: '高温',
+    6: '积水',
+    7: '路面湿滑',
+    8: '路面结冰',
+    9: '道路能见度低',
+    10: '道路团雾',
+  },
+  9: {
+    1: '只碰撞不倾斜',
+    2: '只倾斜无碰撞',
+    3: '碰撞后倾斜',
+  },
+  10: {},
+  11: {},
+  99: {},
+}
 
 export default {
   name: "RoadNetworkMonitoring2",
@@ -192,6 +249,13 @@ export default {
           result.rows.forEach(it => {
             it.stringEventSource = it?.warningSource ? warningSourceMapping[it?.warningSource] : '';
             it.stringDirection = gzDirectionMapping[it.direction] || it.direction;
+
+            let strSub = '';
+            if (it.warningSource && warningSubclassTypeMapping[it.warningType][it.warningSource]) {
+              strSub = `(${warningSubclassTypeMapping[it.warningType][it.warningSource]})`
+            }
+            it.stringEventType = warningTypeMapping[it.warningType] + strSub;
+
             it.startTime = it.warningTime;
 
             if (it.otherConfig) {
@@ -214,6 +278,8 @@ export default {
           if (result.code != 200) return Message.error(result?.msg);
           result.rows.forEach(it => {
             it.stringDirection = gzDirectionMapping[it.direction] || it.direction;
+            it.startTime = it?.occurrenceTime || '';
+            it.stringEventType = it.stringEventType + (it.eventSubclass ? `(${it.eventSubclass})` : '');
             // if (it.otherConfig) {
             //   let otherConfig = JSON.parse(it.otherConfig);
             //   it.pictures = otherConfig.pictures || [];
@@ -223,33 +289,6 @@ export default {
           this.total = result.total;
         });
       }
-
-
-      // request({
-      //   url: `/dc/system/event/count`,
-      //   method: "get",
-      // }).then((result) => {
-      //   if (result.code != 200) return Message.error(result?.msg);
-
-      //   this.panels = [
-      //     {
-      //       label: `告警事件(${result.warningCount})`,
-      //       key: "-1",
-      //     },
-      //     {
-      //       label: `待确认事件(${result.state0Count})`,
-      //       key: "0",
-      //     },
-      //     {
-      //       label: `处置中事件(${result.state1Count})`,
-      //       key: "1",
-      //     },
-      //     {
-      //       label: `已处置事件(${result.state2Count})`,
-      //       key: "2",
-      //     },
-      //   ];
-      // });
     },
     onRefresh() {
       this.data = [];
@@ -305,13 +344,23 @@ export default {
           let data = result.data;
 
           data.stringEventSource = data?.warningSource ? warningSourceMapping[data.warningSource] : '';
+          data.nickName = data.userName;
           data.direction = gzDirectionMapping[data.direction] || data.direction;
           data.startTime = data.warningTime;
           data.stringEventState = warningStateMapping[data.warningState];
           data.stringEventType = warningTypeMapping[data.warningType];
+
+          data.videoList = [];
           if (data.otherConfig) {
             let otherConfig = JSON.parse(data.otherConfig);
+
+            data.waterFilmThickness = otherConfig.waterFilmThickness;
+            data.windSpeed = otherConfig.windSpeed;
+            data.visibility = otherConfig.visibility;
+
             data.pictures = otherConfig.pictures || [];
+            // data.videoList = otherConfig.videoList || []
+            data.videoList = otherConfig.videoList || ['https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-480p.mp4']
           }
 
           this.detailDialogFormData = data;
@@ -328,6 +377,14 @@ export default {
           let data = result.data;
           data.stringDirection = gzDirectionMapping[data.direction] || data.direction;
 
+          data.videoList = ['https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-480p.mp4'];
+          if (data.otherConfig) {
+            let otherConfig = JSON.parse(data.otherConfig);
+            // data.pictures = otherConfig.pictures || [];
+            data.videoList = otherConfig.videoList || []
+            //data.videoList = otherConfig.videoList || ['https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-480p.mp4']
+          }
+
           this.detailDialogFormData = data;
 
           this.eventDetailDialogVisible = true;
@@ -358,7 +415,8 @@ export default {
         warningSource: data?.warningSource || '',
         direction: data.direction,
         startTime: daterange && daterange.length > 0 ? daterange[0] : "",
-        endTime: daterange && daterange.length > 0 ? daterange[1] : "",
+        endTime: this.activeName != "-1" && daterange && daterange.length > 0 ? daterange[1] : "",
+        completeTime: this.activeName == "-1" && daterange && daterange.length > 0 ? daterange[1] : "",
         stakeMark: stakeMark,
         endStakeMark: endStakeMark,
       };