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

<template>
  <div class="HomeFrameControl">
    <ElPopover trigger="manual" :value="activeIcon === 'FrameControl'" :visibleArrow="false" placement="left"
      popper-class="global-input-search-popover">
      <Button :class="['btn', { 'btn-active': activeIcon }]" slot="reference"
        @click.native="handleClick('FrameControl')">
        <img src="@screen/images/home-FrameControl/FrameControl.svg" />
      </Button>

      <div class="body">
        <div class="title">批量控制</div>
        <span class="close" @click="() => { this.activeIcon = null; }">
          <i class="el-icon-close" />
        </span>
        <Form labelWidth="90px" column="2" class="form" ref="FormConfigRef" :formList="formList" />
        <div class="footer">
          <Button @click.native="">
            确认
          </Button>
          <Button style="background-color: rgba(0, 179, 204, 0.3)" @click.native="cancelClick"> 取消 </Button>
        </div>
      </div>
    </ElPopover>

  </div>
</template>

<script>
import Button from "@screen/components/Buttons/Button.vue";
import Form from "@screen/components/FormConfig";
import * as PresetFormItems from "@screen/common/PresetFormItems.js";
import { merge, cloneDeep } from "lodash";
import { markerClusterIns } from "@screen/pages/Home/components/RoadAndEvents/utils/map.js"
import { ChildTypes } from "@screen/utils/enum.js"
import { getDeviceList } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
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 controlMulti = ["情报板", "行车诱导", "疲劳唤醒", "合流区", "设备箱", "语音广播"];
const DeviceTopics = {};//6种批量控制 事件专题 {key:label}

Object.keys(DeviceForMap).forEach(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) => {
    await delay(600);
    return data;
  });
  formList[4].options.options = data.map(item => {
    return { label: `${item.deviceName}${item.stakeMark}`, value: JSON.stringify({ id: item.id, iotDeviceId: item.iotDeviceId }) }
  })
};
function changeHandle(data, formList) {
  const filterData = {};
  data.direction && (filterData.direction = data.direction);
  data.startStakeMark && (filterData.startStakeMark = data.startStakeMark);
  data.endStakeMark && (filterData.endStakeMark = data.endStakeMark);
  setDeviceOptions({ deviceType: data.deviceType }, filterData, formList);
}
export default {
  name: "HomeFrameControl",//设备控制
  components: {
    Button,
    Form,
  },
  data() {
    return {
      activeIcon: null,
      formList: [
        {
          label: "设备类型:",
          key: "deviceType",
          type: "select",
          options: {
            clearable: true,
            options: [],
          },
          ons: { //on监听 element事件
            change(value, ...args) {
              const { data, formList } = args.slice(-1)[0]; //data 为数据  formList为传入的配置项
              data.deviceType && changeHandle(data, formList);
            }
          },
        },
        {
          label: "设备方向:",
          key: "direction",
          type: "select",
          options: {
            options: [
              { key: "1", label: "济南方向" },
              { key: "3", label: "菏泽方向" },
              { key: "2", label: "双向" },
            ],
          },
          ons: { //on监听 element事件
            change(value, ...args) {
              const { data, formList } = args.slice(-1)[0]; //data 为数据  formList为传入的配置项
              data.deviceType && changeHandle(data, formList);
            }
          },
        },
        merge({}, PresetFormItems.startStation,
          {
            options: {
              options: [
                {
                  prefix: {
                    text: "K",
                    style: {
                      color: "#3DE8FF",
                    },
                  },
                  key: "startStakeMark[0]",
                  default: initSearch.startStakeMark[0],
                  rules: [
                    {
                      message: "请补全桩号",
                      callback(value, data) {
                        console.log(value, data.startStakeMark);
                        if (
                          !((value + "")?.trim() && (data.startStakeMark[1] + "")?.trim())
                        )
                          return false;
                        else return true;
                      },
                    },
                  ],
                  ons: { //on监听 element事件
                    change(value, ...args) {
                      const { data, formList } = args.slice(-1)[0]; //data 为数据  formList为传入的配置项
                      data.deviceType && changeHandle(data, formList);
                    }
                  },
                },
                {
                  prefix: {
                    text: "+",
                    style: {
                      color: "#3DE8FF",
                    },
                  },
                  default: initSearch.startStakeMark[1],
                  key: "startStakeMark[1]",
                  ons: { //on监听 element事件
                    change(value, ...args) {
                      const { data, formList } = args.slice(-1)[0]; //data 为数据  formList为传入的配置项
                      data.deviceType && changeHandle(data, formList);
                    }
                  },
                },
              ],
            }
          }),
        merge({}, PresetFormItems.endStation, {
          options: {
            options: [
              {
                prefix: {
                  text: "K",
                  style: {
                    color: "#3DE8FF",
                  },
                },
                key: "endStakeMark[0]",
                default: initSearch.endStakeMark[0],
                rules: [
                  {
                    message: "请补全桩号",
                    callback(value, data) {
                      if (
                        !((value + "")?.trim() && (data.endStakeMark[1] + "")?.trim())
                      )
                        return false;
                      else return true;
                    },
                  },
                ],
                ons: { //on监听 element事件
                  change(value, ...args) {
                    const { data, formList } = args.slice(-1)[0]; //data 为数据  formList为传入的配置项
                    data.deviceType && changeHandle(data, formList);
                  }
                },
              },
              {
                prefix: {
                  text: "+",
                  style: {
                    color: "#3DE8FF",
                  },
                },
                default: initSearch.endStakeMark[1],
                key: "endStakeMark[1]",
                ons: { //on监听 element事件
                  change(value, ...args) {
                    const { data, formList } = args.slice(-1)[0]; //data 为数据  formList为传入的配置项
                    data.deviceType && changeHandle(data, formList);
                  }
                },
              },
            ],
          }
        }),
        {
          label: "设备名称:",
          key: "childType",
          type: "select",
          isAlone: true,
          options: {
            clearable: true,
            options: [],
          },
          visible: data => {
            return true;
          },
        },
        {
          label: "控制操作:",
          key: "controlOp",
          type: "select",
          default: null,
          options: {
            clearable: true,
            options: [{
              label: "在线",
              value: "1"
            }, {
              label: "离线",
              value: "0"
            }]
          },
          visible: data => {
            // if (find(this.activeDeviceTypes, (type => type.match("路测设备_"))))
            //   return true;
          },
        },
      ]
    }
  },
  inject: ["activeDeviceTypes"],
  watch: {
    activeDeviceTypes: {
      handler(val) {
        const activeTopicOptions = []
        this.activeDeviceTypes.filter(activeDeviceType => {
          const match = activeDeviceType.match(/路测设备_(\d+)/);
          if (match) {
            const deviceType = match[1];
            DeviceTopics[deviceType] && activeTopicOptions.push({ label: DeviceTopics[deviceType], value: deviceType });

          }
        });
        this.formList[0].options.options = activeTopicOptions;

      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    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;
      // this.filterData = data;
      this.$parent.$refs.RoadAndEventsRef?.setFilterData?.(data);
    },
  },
};
</script>

<style lang="scss">
div.el-popper.global-input-search-popover {
  background: rgba(6, 66, 88, 0.8);
  border: 1px solid rgba(42, 217, 253, 0.6);
  position: relative;
  padding-top: 36px;
  transform: translateY(24px);
  // margin-top: 6vh;

  .body {
    .title {
      background: linear-gradient(90deg,
          #237e9b 0%,
          rgba(23, 145, 184, 0) 100%);
      padding: 3px 9px;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }

    .close {
      padding: 3px 9px;
      cursor: pointer;
      position: absolute;
      top: 0;
      right: 0;
      width: fit-content;
    }

  }
}
</style>

<style lang="scss" scoped>
.image {
  width: 50vw;
  height: 65vh;
}

.HomeFrameControl {
  .btn {
    padding: 9px;
    background: linear-gradient(180deg, #152e3c 0%, #163a45 100%);
    border-radius: 4px;
    overflow: hidden;
    height: unset;
    border: 1px solid rgba(40, 144, 167, 1);
  }

  .btn-active {
    background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
  }
}
</style>