From 9ecd6ca9817dcc98fe404a1434529307c5f3ced4 Mon Sep 17 00:00:00 2001
From: qingzhengli <1204552371@qq.com>
Date: Tue, 16 Apr 2024 10:11:24 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=20=E6=8B=86=E5=88=86=E5=B0=81=E8=A3=85?=
 =?UTF-8?q?=E6=89=B9=E9=87=8F=E6=8E=A7=E5=88=B6=E7=9A=84=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=20&=20readMe=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/README.md                            |  88 +------
 .../Broadcast/components/BroadcastParam.vue   | 220 ++++++++++++++++++
 .../components/BroadcastReleases.vue          |  71 +++---
 .../components/Dialogs/Broadcast/index.vue    |  18 +-
 .../Home/components/HomeFilter/index.vue      |   1 -
 .../components/HomeFrameControl/index.vue     |   7 +-
 .../Home/components/RoadAndEvents/index.vue   |   1 -
 .../views/JiHeExpressway/pages/Home/index.vue |  32 +--
 8 files changed, 275 insertions(+), 163 deletions(-)
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/components/BroadcastParam.vue

diff --git a/ruoyi-ui/README.md b/ruoyi-ui/README.md
index 6f9886d8..82cc4cbe 100644
--- a/ruoyi-ui/README.md
+++ b/ruoyi-ui/README.md
@@ -84,84 +84,13 @@ data.js 表单封装,里面会使用PresetFormItems的一些FormItem.
 
 Form表单属性介绍:
 <Form labelWidth="90px" column="2" class="form" ref="FormConfigRef" :formList="formList" />
-  {
-    key: "ServiceAreaAbnormal", //唯一标识 一般tabs才需要
-    label: "服务区异常",//表单标题
-    formConfig: {
-      formOptions: {//element中表单配置参数
-        column: 2, //一行放多少元素(基于:style grid布局实现)
-      },
-      list: [//FormItem定义
-        {
-          label: "异常分类:",
-          key: "eventSubclass",
-          type: "RadioGroup",
-          isAlone: true,
-          required: true,
-          options: {
-            activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
-            options: [
-              {
-                key: "8-1",
-                label: "封闭、暂停营业",
-              },
-              {
-                key: "8-2",
-                label: "重要设施停用",
-              },
-              {
-                key: "8-3",
-                label: "其他异常",
-              },
-            ],
-          },
-        },
-        PresetFormItems.freeway,
-        PresetFormItems.direction,
-        {
-          label: "服务区:",
-          key: "dcEventServiceArea.facilityId",
-          type: "select",
-          isAlone: true,
-          required: true,
-          options: {
-            options: [
-              {
-                value: "选项1",
-                label: "黄金糕",
-              },
-            ],
-          },
-        },
-        {
-          label: "出入口:",
-          key: "dcEventServiceArea.exitsInlets",
-          type: "RadioGroup",
-          isAlone: true,
-          required: true,
-          options: {
-            activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
-            options: [
-              {
-                key: "1",
-                label: "出口",
-              },
-              {
-                key: "2",
-                label: "入口",
-              },
-            ],
-          },
-        },
-        PresetFormItems.startTime,
-        PresetFormItems.expectedEndTime,
-        PresetFormItems.remark,
-        PresetFormItems.source,
-      ],
-    },
-  }
+/*
+  column:  一行放多少元素(基于:style grid布局实现)
+  formList: 表单项(FormItem)配置集合
+  v-model: 双向绑定的表单数据(可以获取到表单数据(同步表单数据this.$emit("update:value", this.formData)), 也可修改表单数据)
+*/
 
-FormItem属性介绍:
+FormItem属性介绍 & ons 事件监听:
 
 export const additionalNotes = {
   label: "补充说明:", // 标题
@@ -184,8 +113,9 @@ export const additionalNotes = {
   },
   ons: { //on监听 element事件
       change(value, ...args) {
-        const { data, formList } = args.slice(-1)\[0]; //data 为数据  formList为传入的配置项
-        mileCal(data);
+        const { data, formList } = args.slice(-1)\[0]; //data 为表单数据  formList为传入的配置项
+        formList[4].options.options = []; //调整配置项 修改下拉框options选项
+        this.$set(this.data, 'deviceState', undefined); //更新v-model双向绑定的表单数据
       }
     },
 };
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/components/BroadcastParam.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/components/BroadcastParam.vue
new file mode 100644
index 00000000..e6b921b7
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/components/BroadcastParam.vue
@@ -0,0 +1,220 @@
+<template>
+  <div class="body">
+    <div class="left">
+      <div class="title">路测广播列表</div>
+      <CheckboxGroup class="checkbox-group" gap="9px" :showIcon="true" v-model="checkList" :options="musicList"
+        id="otherConfig" label="deviceName">
+        <template #[otherConfig]="{ data }">
+          <span style="color: #6ee5fe"> {{ data.deviceName }}(当前) </span>
+        </template>
+      </CheckboxGroup>
+    </div>
+    <div class="right">
+      <div class="top-content">
+        <Video class="item-video" :pileNum="pileNum" />
+
+        <label>发布内容: </label>
+        <ElInput type="textarea" v-model="releaseMessage" :autosize="{ minRows: 3, maxRows: 3 }" :maxlength="150"
+          showWordLimit placeholder="请输入发布内容" />
+      </div>
+
+      <div class="footer">
+        <Button style="background-color: rgba(0, 179, 204, 0.3)"
+          @click.native="(modelVisible = false), (submitting = false)">
+          取消
+        </Button>
+        <Button @click.native="handleSubmit" :loading="submitting">
+          确定
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Dialog from "@screen/components/Dialog/index.vue";
+import Button from "@screen/components/Buttons/Button.vue";
+import Video from "@screen/components/Video";
+import CheckboxGroup from "@screen/components/FormConfig/components/ElCheckboxGroup.vue";
+
+import request from "@/utils/request";
+import { getDeviceList } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
+
+import { Message } from "element-ui";
+
+export default {
+  name: "BroadcastReleases",
+  components: {
+    Dialog,
+    Button,
+    Video,
+    CheckboxGroup,
+  },
+  model: {
+    prop: "visible",
+    event: "update:value",
+  },
+  props: {
+    visible: Boolean,
+    pileNum: String,
+    otherConfig: String,
+  },
+  data() {
+    return {
+      submitting: false,
+      checkList: [],
+      releaseMessage: null,
+      musicList: [],
+    };
+  },
+  computed: {
+    modelVisible: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit("update:value", val);
+      },
+    },
+  },
+  created() {
+    getDeviceList(5).then((data) => {
+      if (Array.isArray(data))
+        this.musicList = data.map((item) => ({
+          ...item,
+          disabled: item.deviceState != 1,
+        }));
+    });
+  },
+  methods: {
+    handleSubmit() {
+      if (!this.releaseMessage?.trim())
+        return Message.error("发布内容不能为空!");
+      if (!this.checkList.length)
+        return Message.error("请至少选择一个广播设备!");
+
+      this.submitting = true;
+
+      request({
+        url: `/broadcast/broadcastFunctionCall`,
+        method: "post",
+        data: {
+          name: "task-3",
+          outVol: "6",
+          priority: "1",
+          text: this.releaseMessage.trim(),
+          repeatTimes: "3",
+          termList: this.checkList.map((str) => JSON.parse(str)),
+          functionType: "startPaTts",
+        },
+      })
+        .then((data) => {
+          // console.log(data);
+          if (data.retCode == "0") {
+            Message.success("广播设置成功!");
+            this.modelVisible = false;
+          } else {
+            Message.error("广播设置失败!");
+          }
+        })
+        .finally(() => {
+          this.submitting = false;
+        });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.body {
+  display: flex;
+  gap: 9px;
+  height: 100%;
+
+  .left {
+    width: 251px;
+    border-radius: 3px 3px 3px 3px;
+    border: 1px solid #3de8ff;
+    padding: 3px 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 9px;
+
+    ::v-deep .el-checkbox__label {
+      display: flex !important;
+      justify-content: space-between;
+      width: 100%;
+
+      .title {
+        flex: 1;
+        width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-break: keep-all;
+      }
+
+      .state {
+        width: 18px;
+        height: 18px;
+        margin-right: 4px;
+      }
+
+      .huiduButton {
+        background: transparent;
+        border: none;
+        height: 18px;
+        width: 18px;
+        line-height: 20px;
+        padding: 0;
+        color: #fff;
+        font-size: 16px;
+      }
+
+      .huiduButton:hover {
+        color: #05afe3 !important;
+      }
+    }
+
+    .checkbox-group {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      overflow: auto;
+      height: 100%;
+      flex: 1;
+      flex-wrap: nowrap;
+    }
+  }
+
+  .right {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .top-content {
+      display: flex;
+      flex-direction: column;
+      gap: 9px;
+
+      .item-video {
+        width: 545px;
+      }
+
+      label {
+        font-size: 16px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 400;
+        color: #3de8ff;
+        line-height: 19px;
+      }
+    }
+  }
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 9px;
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/components/BroadcastReleases.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/components/BroadcastReleases.vue
index 019b76c1..01cbfb3f 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/components/BroadcastReleases.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/components/BroadcastReleases.vue
@@ -1,51 +1,37 @@
 <template>
   <Dialog v-model="modelVisible" title="广播发布" width="850px">
     <div class="BroadcastReleases">
-      <div class="body">
+      <BroadcastParam v-model="modelVisible" :pileNum="pileNum" :otherConfig="otherConfig" />
+      <!-- <div class="body">
         <div class="left">
           <div class="title">路测广播列表</div>
-          <CheckboxGroup
-            class="checkbox-group"
-            gap="9px"
-            :showIcon="true"
-            v-model="checkList"
-            :options="musicList"
-            id="otherConfig"
-            label="deviceName"
-          >
+          <CheckboxGroup class="checkbox-group" gap="9px" :showIcon="true" v-model="checkList" :options="musicList"
+            id="otherConfig" label="deviceName">
             <template #[otherConfig]="{ data }">
               <span style="color: #6ee5fe"> {{ data.deviceName }}(当前) </span>
             </template>
-          </CheckboxGroup>
-        </div>
-        <div class="right">
-          <div class="top-content">
-            <Video class="item-video" :pileNum="pileNum" />
-
-            <label>发布内容: </label>
-            <ElInput
-              type="textarea"
-              v-model="releaseMessage"
-              :autosize="{ minRows: 3, maxRows: 3 }"
-              :maxlength="150"
-              showWordLimit
-              placeholder="请输入发布内容"
-            />
-          </div>
-
-          <div class="footer">
-            <Button
-              style="background-color: rgba(0, 179, 204, 0.3)"
-              @click.native="(modelVisible = false), (submitting = false)"
-            >
-              取消
-            </Button>
-            <Button @click.native="handleSubmit" :loading="submitting">
-              确定
-            </Button>
-          </div>
-        </div>
-      </div>
+</CheckboxGroup>
+</div>
+<div class="right">
+  <div class="top-content">
+    <Video class="item-video" :pileNum="pileNum" />
+
+    <label>发布内容: </label>
+    <ElInput type="textarea" v-model="releaseMessage" :autosize="{ minRows: 3, maxRows: 3 }" :maxlength="150"
+      showWordLimit placeholder="请输入发布内容" />
+  </div>
+
+  <div class="footer">
+    <Button style="background-color: rgba(0, 179, 204, 0.3)"
+      @click.native="(modelVisible = false), (submitting = false)">
+      取消
+    </Button>
+    <Button @click.native="handleSubmit" :loading="submitting">
+      确定
+    </Button>
+  </div>
+</div>
+</div> -->
     </div>
   </Dialog>
 </template>
@@ -55,7 +41,7 @@ import Dialog from "@screen/components/Dialog/index.vue";
 import Button from "@screen/components/Buttons/Button.vue";
 import Video from "@screen/components/Video";
 import CheckboxGroup from "@screen/components/FormConfig/components/ElCheckboxGroup.vue";
-
+import BroadcastParam from "./BroadcastParam.vue";
 import request from "@/utils/request";
 import { getDeviceList } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
 
@@ -68,6 +54,7 @@ export default {
     Button,
     Video,
     CheckboxGroup,
+    BroadcastParam
   },
   model: {
     prop: "visible",
@@ -75,9 +62,7 @@ export default {
   },
   props: {
     visible: Boolean,
-    deviceId: String,
     pileNum: String,
-    currentId: [String, Number],
     otherConfig: String,
   },
   data() {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/index.vue
index 21008c8e..033773fa 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/index.vue
@@ -10,11 +10,7 @@
         </ElTabPane>
         <!-- <ElTabPane label="设备参数" name="second">设备参数</ElTabPane> -->
         <ElTabPane label="在线率统计" name="third">
-          <LineChart
-            v-if="activeName === 'third'"
-            :productId="dialogData.id"
-            style="height: 150px"
-          />
+          <LineChart v-if="activeName === 'third'" :productId="dialogData.id" style="height: 150px" />
         </ElTabPane>
       </ElTabs>
 
@@ -23,13 +19,7 @@
       </div>
     </div>
 
-    <BroadcastReleases
-      v-model="releaseVisible"
-      :deviceId="dialogData.iotDeviceId"
-      :pileNum="dialogData.stakeMark"
-      :otherConfig="dialogData.otherConfig"
-      :currentId="dialogData.id"
-    />
+    <BroadcastReleases v-model="releaseVisible" :pileNum="dialogData.stakeMark" :otherConfig="dialogData.otherConfig" />
   </Dialog>
 </template>
 
@@ -131,7 +121,7 @@ export default {
     if (roadInfo) this.data.roadName = roadInfo.roadName;
   },
   methods: {
-    handleClickTabs() {},
+    handleClickTabs() { },
   },
 };
 </script>
@@ -171,7 +161,7 @@ export default {
     align-items: center;
     justify-content: end;
 
-    > div {
+    >div {
       font-size: 16px;
       padding: 6px 12px;
     }
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFilter/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFilter/index.vue
index e24e8e8a..2fc0ff81 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFilter/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFilter/index.vue
@@ -90,7 +90,6 @@ export default {
   watch: {
     activeDeviceTypes: {
       handler(val) {
-        console.log(val, this.activeDeviceTypes, 'xxx')
         const options = []
         for (let id of DeviceTypeIds) {
           if (this.activeDeviceTypes.indexOf(`路测设备_${id}`) >= 0) {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrameControl/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrameControl/index.vue
index 31acbadd..78bf3965 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrameControl/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrameControl/index.vue
@@ -37,10 +37,11 @@ import { delay } from "@screen/utils/common";
 import { initSearch } from "@screen/utils/enum/common.js"
 
 import { DeviceForMap } from "@screen/pages/Home/components/RoadAndEvents/utils/buttonEvent"
-const DeviceTopics = {}
+const controlMulti = ["情报板", "行车诱导", "疲劳唤醒", "合流区", "设备箱", "语音广播"];
+const DeviceTopics = {};//6种批量控制 事件专题 {key:label}
 
 Object.keys(DeviceForMap).forEach(DeviceLabel => {
-  DeviceTopics[DeviceForMap[DeviceLabel].deviceType] = DeviceLabel;
+  controlMulti.indexOf(DeviceLabel) !== -1 && (DeviceTopics[DeviceForMap[DeviceLabel].deviceType] = DeviceLabel);
 });
 async function setDeviceOptions(config, filterData, formList) {
   const data = await getDeviceList(config.deviceType, filterData).then(async (data) => {
@@ -248,7 +249,7 @@ export default {
           const match = activeDeviceType.match(/路测设备_(\d+)/);
           if (match) {
             const deviceType = match[1];
-            activeTopicOptions.push({ label: DeviceTopics[deviceType], value: deviceType });
+            DeviceTopics[deviceType] && activeTopicOptions.push({ label: DeviceTopics[deviceType], value: deviceType });
 
           }
         });
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue
index 74a6d568..b1ff7993 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue
@@ -246,7 +246,6 @@ export default {
         this.emitter.emit("selectedCompleted", item);
         return this.$emit("onClickItem", item);
       }
-      console.log(`${key}${status ? "_close" : ""}`, this.filterData, isDefault)
 
       await eventMap[`${key}${status ? "_close" : ""}`]?.call(this, item, this.filterData, isDefault, this.cb);
     },
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue
index b0fd17c3..fc62b317 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue
@@ -1,13 +1,9 @@
 <template>
   <div class="Home">
-    <AMapContainer
-      ref="AMapContainerRef"
-      @update:isGisCompleted="
-        (data) => {
-          this.isGisCompleted = data;
-        }
-      "
-    />
+    <AMapContainer ref="AMapContainerRef" @update:isGisCompleted="(data) => {
+        this.isGisCompleted = data;
+      }
+      " />
     <section class="content">
       <!-- 左侧 -->
       <div class="content-l">
@@ -15,11 +11,7 @@
         <FocusedMonitoring class="card-menu" />
 
         <!-- 下 -->
-        <RoadAndEvents
-          ref="RoadAndEventsRef"
-          :isGisCompleted="isGisCompleted"
-          class="content-l-b card-menu"
-        />
+        <RoadAndEvents ref="RoadAndEventsRef" :isGisCompleted="isGisCompleted" class="content-l-b card-menu" />
       </div>
 
       <!-- 右侧 -->
@@ -30,7 +22,7 @@
           <HomeVector class="item" />
           <HomeWord class="item" />
           <!-- <HomeVectorControl class="item" /> -->
-          <!-- <HomeFrameControl class="item" /> -->
+          <HomeFrameControl class="item" />
         </div>
         <ConditionStatistics class="right card-menu" />
       </div>
@@ -39,11 +31,7 @@
     <footer class="footer card-menu">
       <div class="footer-title">
         <span>济菏高速缩略图</span>
-        <i
-          class="el-icon-s-fold"
-          style="color: #2ad9fd; transform: rotate(-90deg)"
-          @click.stop="handleShrink"
-        />
+        <i class="el-icon-s-fold" style="color: #2ad9fd; transform: rotate(-90deg)" @click.stop="handleShrink" />
       </div>
       <div class="footer-content">
         <Thumbnail />
@@ -147,7 +135,7 @@ export default {
     height: min-content;
     pointer-events: none;
 
-    > div {
+    >div {
       pointer-events: auto;
     }
 
@@ -161,7 +149,7 @@ export default {
       overflow: hidden;
       height: 100%;
 
-      > div {
+      >div {
         pointer-events: all;
         flex: 1;
       }
@@ -202,7 +190,7 @@ export default {
     will-change: height;
     bottom: 0;
 
-    > div {
+    >div {
       pointer-events: all;
     }