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

ruoyi-ui/src/views/JiHeExpressway/components/Card2/Card.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class='Card'>
+  <div class="Card">
     <Title :title="title">
       <template #suffix>
         <slot name="title-suffix" />
@@ -12,27 +12,31 @@
 </template>
 
 <script>
-import Title from "@screen/components/Title/index.vue"
+import Title from "@screen/components/Title/index.vue";
 
 export default {
-  name: 'Card',
+  name: "Card",
   components: {
-    Title
+    Title,
   },
   props: {
     title: {
-      type: String
-    }
-  }
-}
+      type: String,
+    },
+  },
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .Card {
   height: 100%;
   width: 100%;
   overflow: hidden;
-  background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, rgba(6, 66, 88, .4) 93%);
+  background: linear-gradient(
+    180deg,
+    rgba(6, 66, 88, 0) 0%,
+    rgba(6, 66, 88, 0.4) 93%
+  );
   display: flex;
   flex-direction: column;
 

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

@@ -1,38 +1,69 @@
 <template>
-  <Card class='DisposalProcess' title="处置过程">
+  <Card class="DisposalProcess" title="处置过程">
     <template #title-suffix>
-      <ButtonGradient class="title-button">
-        事件解除
-      </ButtonGradient>
-      <ButtonGradient class="title-button">
-        协同调度
-      </ButtonGradient>
-      <ButtonGradient class="title-button">
-        无需清障
-      </ButtonGradient>
-      <ButtonGradient class="title-button">
-        重要事件上报
-      </ButtonGradient>
-      <ButtonGradient class="title-button">
-        路赔
-      </ButtonGradient>
-      <ButtonGradient class="title-button special-button" @click.native="handleFullHeight">
+      <ButtonGradient class="title-button"> 事件解除 </ButtonGradient>
+      <ButtonGradient class="title-button"> 协同调度 </ButtonGradient>
+      <ButtonGradient class="title-button"> 无需清障 </ButtonGradient>
+      <ButtonGradient class="title-button"> 重要事件上报 </ButtonGradient>
+      <ButtonGradient class="title-button"> 路赔 </ButtonGradient>
+      <ButtonGradient
+        class="title-button special-button"
+        @click.native="handleFullHeight"
+      >
         <template #prefix>
-          <div class="icon"
-            :style="{ backgroundImage: `url(${require(`./images/${isFullHeight ? 'reduce' : 'zoom'}.svg`)})` }" />
+          <div
+            class="icon"
+            :style="{
+              backgroundImage: `url(${require(`./images/${
+                isFullHeight ? 'reduce' : 'zoom'
+              }.svg`)})`,
+            }"
+          />
         </template>
       </ButtonGradient>
     </template>
 
     <TimeLine1 :data="timeLine1List" :filterDistance="filterDistance" />
-    <TimeLine2 :data="timeLine2List" style="flex: 1;" />
+    <TimeLine2 :data="timeLine2List" style="flex: 1" />
     <div v-if="!timeLine2List.length" class="no-data">暂无数据</div>
     <div class="bottom">
-      <ElSelect value="" placeholder="请选择关键点" />
-      <RadioGroup :options="[{ key: 'input', label: '输入' }, { key: 'upload', label: '上传' }]" v-model="testRadio"
-        type="button" />
-      <ElInput v-model="test" placeholder="请输入调度指令" />
-      <ButtonGradient class="title-button special-button">
+      <ElSelect v-model="processId" placeholder="请选择关键点">
+        <ElOption
+          v-for="item in options"
+          :key="item.nodeNode"
+          :label="item.processNode"
+          :value="item.nodeNode"
+        >
+        </ElOption>
+      </ElSelect>
+      <RadioGroup
+        :options="[
+          { key: 'input', label: '输入' },
+          { key: 'upload', label: '上传' },
+        ]"
+        v-model="testRadio"
+        type="button"
+      />
+      <ElInput
+        v-if="testRadio == 'input'"
+        class="input"
+        v-model="context"
+        placeholder="请输入调度指令"
+      />
+      <el-upload
+        v-if="testRadio == 'upload'"
+        class="input"
+        :headers="headers"
+        :action="uploadImgUrl"
+        :file-list="fileList"
+        :show-file-list="false"
+        :on-success="handleUploadSuccess"
+        :on-error="handleUploadError"
+        accept=".jpg,.jpeg,.png,.mp4"
+      >
+        <el-button class="input">点击上传</el-button>
+      </el-upload>
+      <ButtonGradient class="title-button special-button" @click="onSubmit">
         发送
       </ButtonGradient>
       <ButtonGradient class="title-button special-button">
@@ -43,19 +74,19 @@
 </template>
 
 <script>
-import Card from "@screen/components/Card2/Card.vue";;
-import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue';
-import RadioGroup from '@screen/components/FormConfig/components/RadioGroup/index.vue';
-
+import Card from "@screen/components/Card2/Card.vue";
+import ButtonGradient from "@screen/components/Buttons/ButtonGradient.vue";
+import RadioGroup from "@screen/components/FormConfig/components/RadioGroup/index.vue";
+import { getToken } from "@/utils/auth";
 import TimeLine1 from "@screen/components/TimeLine/TimeLine1/index";
 import TimeLine2 from "@screen/components/TimeLine/TimeLine2/index";
 
-import { provideMixin } from "./../../mixin"
+import { provideMixin } from "./../../mixin";
 import { timeLine2List } from "./data";
 import request from "@/utils/request";
 
 export default {
-  name: 'DisposalProcess',
+  name: "DisposalProcess",
   inject: ["adpScale"],
   mixins: [provideMixin],
   components: {
@@ -65,12 +96,13 @@ export default {
     TimeLine2,
     RadioGroup,
   },
-  emit: ['fullHeight'],
+  emit: ["fullHeight"],
   data() {
     return {
       test: null,
       testRadio: "input",
       timeLine1List: [],
+
       // timeLine2List: Array.from({ length: 6 }).map(() => ({
       //   title: "接警记录",
       //   time: "2023-12-21 16:35:44",
@@ -79,66 +111,136 @@ export default {
       //   posts: '淄博发展公司管理员'
       // })),
       timeLine2List: [],
-      isFullHeight: false
-    }
+      isFullHeight: false,
+      options: [],
+      processId: "",
+      context: "",
+      headers: {
+        Authorization: "Bearer " + getToken(),
+      },
+      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
+      fileList: [],
+      fileType: ["bmp", "gif", "jpg", "jpeg", "png", "mp4", "avi", "xmvb"],
+      imageUrl: "",
+    };
   },
   methods: {
     filterDistance(distance) {
-      return 1 / this.adpScale.scaleX * distance
+      return (1 / this.adpScale.scaleX) * distance;
     },
     handleFullHeight() {
       this.isFullHeight = !this.isFullHeight;
 
-      this.$emit('fullHeight', 'CrowdnessIndicatorRankings')
+      this.$emit("fullHeight", "CrowdnessIndicatorRankings");
     },
-    async detailChange(data) {
-      const timelineData = await this.getDetail(data);
-
-      let processIdMap = {}
-
-      this.timeLine2List = timelineData.map(item => {
+    async detailChange(id) {
+      const timelineData = await this.getDetail(id);
+      let processIdMap = {};
 
-        processIdMap[item.processId] = new Date(item.operationTime).toLocaleTimeString();
+      this.timeLine2List = timelineData.map((item) => {
+        processIdMap[item.processId] = new Date(
+          item.operationTime
+        ).toLocaleTimeString();
 
         return {
           // title: "接警记录",
-          time: item.operationTime ? new Date(item.operationTime).toLocaleString() : null,
+          time: item.operationTime
+            ? new Date(item.operationTime).toLocaleString()
+            : null,
           name: item.operator,
           desc: item.context,
           // posts: '淄博发展公司管理员'
-        }
-      });
-
-      this.timeLine1List = data.processConfigList.map((item) => {
-        return {
-          time: processIdMap[item.nodeNode],
-          label: item.processNode,
-          isActive: !!processIdMap[item.nodeNode],
         };
       });
+
+      // this.timeLine1List = data.processConfigList.map((item) => {
+      //   return {
+      //     time: processIdMap[item.nodeNode],
+      //     label: item.processNode,
+      //     isActive: !!processIdMap[item.nodeNode],
+      //   };
+      // });
     },
-    getDetail(data) {
+    getDetail(id) {
       return request({
         url: `/system/process/list`,
         method: "GET",
         params: {
-          eventId: data.id
-        }
+          eventId: id,
+        },
+      })
+        .then((result) => {
+          return result || [];
+        })
+        .catch((err) => []);
+    },
+    //
+    getProcessNode(eventId) {
+      return request({
+        url:
+          `/dc/system/event/getProcessNode/` +
+          "1a91d65cc31f4a9d90122888edb31043",
+        method: "GET",
       })
         .then((result) => {
           if (result.code != 200) return [];
-
-          return result.rows || []
+          this.timeLine1List = result.data.map((item) => {
+            return {
+              time: item.operationTime,
+              label: item.processNode,
+              isActive: item.status == 1 ? true : false,
+            };
+          });
+          this.options = result.data.filter((item) => {
+            item.status == 0;
+            return item;
+          });
         })
         .catch((err) => []);
     },
-  }
-}
+    // 上传成功
+    handleUploadSuccess(res, file) {
+      this.$message.success("上传成功");
+      this.imageUrl = res.url;
+    },
+    // 上传失败
+    handleUploadError() {
+      this.$message.error("上传失败");
+    },
+    containsArrayElement(str, arr) {
+      return arr.filter((element) => str.includes(element));
+    },
+    onSubmit() {
+      let type = this.containsArrayElement(this.imageUrl, this.fileType);
+      console.log(type);
+      request({
+        url: `/system/process`,
+        method: "POST",
+        data: {
+          eventId: "1a91d65cc31f4a9d90122888edb31043",
+          processId: this.processId,
+          context: this.context,
+          file: this.imageUrl,
+          type: type.join(","),
+        },
+      })
+        .then((result) => {
+          if (result.code != 200) return [];
+          this.getProcessNode();
+          this.detailChange("1a91d65cc31f4a9d90122888edb31043");
+        })
+        .catch((err) => []);
+    },
+  },
+  async mounted() {
+    // this.getProcessNode();
+    // await this.detailChange("1a91d65cc31f4a9d90122888edb31043");
+  },
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .DisposalProcess {
-
   ::v-deep {
     .content {
       display: flex;
@@ -153,15 +255,24 @@ export default {
       background-size: 100% 100%;
       width: 20px;
       height: 20px;
-      transition: all .3s linear;
+      transition: all 0.3s linear;
     }
   }
 
   .bottom {
     display: grid;
-    grid-template-columns: .5fr auto 1fr 90px 90px;
+    grid-template-columns: 0.5fr auto 1fr 90px 90px;
     width: 100%;
     gap: 6px;
   }
+  .input {
+    background-color: #0d5f79;
+    color: #f4f4f4;
+    border-radius: 2px;
+    line-height: 5px;
+    height: 26px;
+    font-size: 14px;
+    border: 0;
+  }
 }
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="CommandDispatch" :style="{ '--row': row , 'height': '100%'}">
+  <div class="CommandDispatch" :style="{ '--row': row, height: '100%' }">
     <component
       :is="key"
       v-for="(_, key) in gridAreaMap"
@@ -24,8 +24,8 @@ const components = files.keys().reduce((components, key) => {
 
 const originGridArea = {
   EventInformation: "1 / 1 / span 12 / 1", // 事件信息（左1）
-  DispatchLiaison: "13 / 1 / span 11 / 2", // 调度联络（左2）
-  TrafficControl: "24 / 1 / span 10 / 2", //交通管制（左3）
+  DispatchLiaison: "13 / 1 / span 8 / 2", // 调度联络（左2）13 / 1 / span 11 / 2
+  TrafficControl: "21 / 1 / span 13 / 2", //交通管制（左3）24 / 1 / span 10 / 2
   CrowdnessIndicatorRankings: "1 / 2 / span 12 / 2", //地图 / 拥挤指数排名情况（中1）
   DisposalProcess: "13 / 2 / span 21 / 2", //处置过程（中2）
   RealTimeVideo: "1 / 3 / span 9 / 3", //实时视频（右1）
@@ -42,7 +42,7 @@ export default {
   props: {
     detailId: {
       type: [String, Number],
-      default: '96b9918efc01488cb22fa1d9d3236dfd',
+      default: "96b9918efc01488cb22fa1d9d3236dfd",
     },
   },
   provide() {
@@ -73,16 +73,20 @@ export default {
       })
         .then((result) => {
           if (result.code != 200) return;
-          console.log(result.data)
+          console.log(result.data);
           this.provideData.detail = result.data;
-          if(['设备设施隐患','非法上路','施工建设','服务区异常'].includes(result.data.eventName)){
-            const gridArea = {...originGridArea}
+          if (
+            ["设备设施隐患", "非法上路", "施工建设", "服务区异常"].includes(
+              result.data.eventName
+            )
+          ) {
+            const gridArea = { ...originGridArea };
             // 第一列变化
-            gridArea['DispatchLiaison'] = '13 / 1 / span 21 / 2'
+            gridArea["DispatchLiaison"] = "10 / 1 / span 20 / 2";
             delete gridArea.TrafficControl;
-            if(['设备设施隐患','非法上路'].includes(result.data.eventName)){
+            if (["设备设施隐患", "非法上路"].includes(result.data.eventName)) {
               // 第三列变化
-              gridArea['RealTimeVideo'] = '1 / 3 / span 16 / 3'
+              gridArea["RealTimeVideo"] = "1 / 3 / span 17 / 3";
               delete gridArea.ReleaseInformation;
             }