feat 更新批量控制 语音广播完成

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/components/BroadcastParamMulti.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="body">
+    <div class="right" :style="{ width: isMultiControl ? '100%' : undefined }">
+      <div class="top-content">
+        <Video v-if="!isMultiControl" class="item-video" :pileNum="pileNum" />
+
+        <label style="width: 99px;">发布内容: </label>
+        <ElInput type="textarea" v-model="releaseMessage" :autosize="{ minRows: 3, maxRows: 3 }" :maxlength="150"
+          showWordLimit placeholder="请输入发布内容" />
+      </div>
+
+      <div class="footer">
+        <Button @click.native="handleSubmit" :loading="submitting">
+          确定
+        </Button>
+
+        <Button style="background-color: rgba(0, 179, 204, 0.3)" @click.native="cancelClick">
+          取消
+        </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 { batchFunctions } 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,
+    isMultiControl: Boolean,
+    selectItems: {
+      type: Array,
+      default: () => []
+    }
+  },
+  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: {
+    cancelClick() {
+      this.$emit("update:activeIcon", null);
+      this.submitting = false;
+    },
+    handleSubmit() {
+      const selectItems = this.selectItems.map(item => JSON.parse(item));
+      console.log(this.selectItems, selectItems, "selectItems");
+      const checkList = selectItems.map(item => JSON.parse(item.otherConfig));
+      if (!this.releaseMessage?.trim())
+        return Message.error("发布内容不能为空!");
+      if (!selectItems.length)
+        return Message.error("请至少选择一个广播设备!");
+
+      this.submitting = true;
+
+      batchFunctions(
+        {
+          "devices": selectItems,
+          "functions": [
+            {
+              "functionId": "1",//随便 不为空即可
+              "params": {
+                name: "task-3",
+                outVol: "6",
+                priority: "1",
+                text: this.releaseMessage.trim(),
+                repeatTimes: "3",
+                termList: checkList,
+                functionType: "startPaTts",
+              }
+            }
+
+          ]
+        })
+        .then((data) => {
+          const allItems = data.data;
+          const successItems = allItems.filter(item => item.result.retCode == 0);
+          console.log("xxxxxxx111")
+          if (successItems.length == allItems.length) {
+            Message.success("广播设置成功!");
+          } else {
+            Message.error(`广播设置失败, 失败${allItems.length - successItems.length}个!`);
+          }
+        })
+        .finally(() => {
+          this.submitting = false;
+        });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.body {
+  display: flex;
+  gap: 9px;
+  height: 100%;
+  padding-right: 9px;
+  margin-top: 15px;
+
+  .right {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .top-content {
+      display: flex;
+      flex-direction: row;
+      // gap: 9px;
+      align-items: center;
+
+      .item-video {
+        width: 545px;
+      }
+
+      label {
+        font-size: 15px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 400;
+        color: #3de8ff;
+        line-height: 19px;
+        vertical-align: middle;
+        text-align: right;
+        padding-right: 12px;
+        box-sizing: border-box;
+      }
+    }
+  }
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 9px;
+}
+</style>

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrameControl/index.vue

@@ -13,14 +13,14 @@
           <i class="el-icon-close" />
         </span>
         <Form v-model="data" labelWidth="90px" column="2" class="form" ref="FormConfigRef" :formList="formList" />
-        <component :is="componentMap[DeviceTopics[data.deviceType]]" :isMultiControl="true"></component>
+        <component ref="ControlComponent" :is="componentMap[DeviceTopics[data.deviceType]]" :isMultiControl="true"
-        <!-- -->
+          :selectItems="data.childType" @update:activeIcon="(val) => { this.activeIcon = val }"></component>
-        <div class="footer">
+        <!-- <div class="footer">
-          <Button @click.native="">
+          <Button @click.native="submitClick">
             确认
           </Button>
           <Button style="background-color: rgba(0, 179, 204, 0.3)" @click.native="cancelClick"> 取消 </Button>
-        </div>
+        </div> -->
       </div>
     </ElPopover>
 
@@ -38,11 +38,9 @@ import { getDeviceList } from "@screen/pages/Home/components/RoadAndEvents/utils
 import { delay } from "@screen/utils/common";
 import { initSearch } from "@screen/utils/enum/common.js"
 import DeviceParams from "@screen/pages/Home/components/Dialogs/SmartDevice/components/DeviceParams.vue";
-import BroadcastParam from "@screen/pages/Home/components/Dialogs/Broadcast/components/BroadcastParam.vue";
+import BroadcastParam from "@screen/pages/Home/components/Dialogs/Broadcast/components/BroadcastParamMulti.vue";
+import { DeviceForMap } from "@screen/pages/Home/components/RoadAndEvents/utils/buttonEvent";
 
-import Vue from "vue";
-
-import { DeviceForMap } from "@screen/pages/Home/components/RoadAndEvents/utils/buttonEvent"
 const componentMap = { "语音广播": "BroadcastParam" } //DeviceTopics[deviceType]
 //"情报板": undefined, "行车诱导": undefined, "疲劳唤醒": undefined, "合流区": undefined,"设备箱": "DeviceParams",
 const controlMulti = Object.keys(componentMap);//6种批量控制
@@ -51,13 +49,14 @@ const DeviceTopics = {};//6种批量控制 事件专题 {key:label}
 Object.keys(DeviceForMap).forEach(DeviceLabel => {
   controlMulti.indexOf(DeviceLabel) !== -1 && (DeviceTopics[DeviceForMap[DeviceLabel].deviceType] = DeviceLabel);
 });
+const deviceTypeDefault = Object.keys(DeviceTopics)[0];
 async function setDeviceOptions(config, filterData, formList) {
   const data = await getDeviceList(config.deviceType, filterData).then(async (data) => {
     await delay(600);
     return data;
   });
   formList[4].options.options = data.map(item => {
-    return { label: `${item.deviceName}`, value: JSON.stringify({ id: item.id, iotDeviceId: item.iotDeviceId }), disabled: item.deviceState != 1 }
+    return { label: `${item.deviceName}`, value: JSON.stringify({ id: item.id, iotDeviceId: item.iotDeviceId, deviceType: item.deviceType, otherConfig: item.otherConfig }), disabled: item.deviceState != 1 }
   })
 };
 function changeHandle(data, formList) {
@@ -85,6 +84,7 @@ export default {
           label: "设备类型:",
           key: "deviceType",
           type: "select",
+          default: deviceTypeDefault,
           options: {
             clearable: true,
             options: Object.keys(DeviceTopics).map(key => { return { label: DeviceTopics[key], value: key } }),
@@ -92,7 +92,6 @@ export default {
           ons: { //on监听 element事件
             change(value, ...args) {
               const { data, formList } = args.slice(-1)[0]; //data 为数据  formList为传入的配置项
-              console.log(Vue, this)
               if (data.deviceType) changeHandle(data, formList);
               else data.childType = undefined;
             }
@@ -274,14 +273,18 @@ export default {
   //     deep: true
   //   }
   // },
+  mounted() {
+    changeHandle(this.data, this.formList);
+  },
   methods: {
+    submitClick() {
+      this.$refs.ControlComponent.handleSubmit()
+    },
     cancelClick() {
       this.activeIcon = null;
     },
     handleClick(type) {
-      console.log("type: ", type);
       this.activeIcon = this.activeIcon === type ? null : type;
-      console.log("this.activeIcon", this.activeIcon);
     },
     filterEnd(data) {
       this.activeIcon = null;

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/httpList.js

@@ -3,6 +3,14 @@ import { Message } from "element-ui";
 import moment from "moment";
 import request from "@/utils/request";
 
+export function batchFunctions(data) {
+  return request({
+    url: `/business/device/batchFunctions`,
+    method: "post",
+    data: data,
+  });
+}
+
 /**
  *
  * @param {string} camId 相机 ID

ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue

@@ -22,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>