ly-front/src/views/menuData/AlertDialog.vue

<template>
  <div class="alert">
    <div class="demo-formName">
      <my-form
        :formNewList="formList"
        :fromItem="formItem"
        @headdenForm="headdenForm"
        @onMounted="onMountedForm"
        ref="myForm"
        :labelWidth="'110px'"
      >
      </my-form>
    </div>
    <div class="count">
      <el-button
        type="primary"
        icon="el-icon-search"
        @click="headdenForm({ page: 1, pageSize: 10 }, 'search')"
      >
        查询
      </el-button>
    </div>
    <div class="table-container">
      <my-table
        :tableData="tableData"
        :coloumData="coloumData"
        isShowPagination
        :paginationParam="paginationParam"
        isShowSelection
        @changeSize="handleSizeChange"
        @changePage="handlePageChange"
      >
        <template #operate="{ data }">
          <el-link
            type="primary"
            :underline="false"
            @click="handleClick(data, 'playback')"
          >
            轨迹回放
          </el-link>
        </template>
      </my-table>
    </div>
    <el-drawer
      :title="title"
      :visible.sync="drawer"
      append-to-body
      direction="rtl"
    >
      <div class="demo-drawer__content">
        <my-mars :historyList="historyList"> </my-mars>
      </div>
    </el-drawer>
  </div>
</template>

<script>
"use script";
import { alarmList, alarmDetail } from "@/api/alarm.js";
import moment from "moment";
export default {
  name: "webDevice",
  data() {
    return {
      defaultImg: require("@/assets/img/nopic.png"),
      formList: [
        {
          label: "日期范围",
          type: "daterange",
          model: "dateRange",
          format: "yyyy-MM-dd"
        },
        {
          label: "sn",
          type: "input",
          model: "sn"
        }
      ],
      formItem: {},
      formDrawerList: [
        {
          label: "设备名称",
          type: "input",
          model: "name",
          rules: [{ required: true, message: "请输入设备名称" }]
        },
        {
          label: "设备SN",
          type: "input",
          model: "deviceSN",
          rules: [{ required: true, message: "请输入设备SN" }]
        },
        {
          label: "设备协议",
          type: "input",
          model: "protocol"
        },
        {
          label: "端口",
          type: "input",
          model: "port"
        },
        {
          label: "账号",
          type: "input",
          model: "account"
        },
        {
          label: "密码",
          type: "input",
          model: "password"
        },
        {
          label: "ip",
          type: "input",
          model: "ip"
        },
        {
          label: "详细地址",
          type: "input",
          model: "address",
          disabled: false
        },
        {
          label: "位置",
          type: "marsMapmap",
          model: "pointP",
          disabled: false
        },
        {
          label: "关联防区",
          type: "select",
          model: "positionId",
          options: [],
          disabled: false
        },
        {
          label: "设备图片",
          type: "img",
          model: "img",
          disabled: false
        }
      ],
      tableData: [],
      coloumData: [
        {
          label: "防区名称",
          prop: "positionName",
          align: "center"
        },
        {
          label: "持续时间（秒）",
          prop: "duration",
          align: "center"
        },
        {
          label: "机型",
          prop: "model",
          align: "center"
        },
        {
          label: "SN码",
          prop: "sn",
          align: "center"
        },
        {
          label: "频段",
          prop: "frequency",
          align: "center"
        },
        {
          label: "开始时间",
          prop: "startTime",
          align: "center"
        },
        {
          label: "结束时间",
          prop: "endTime",
          align: "center"
        },
        {
          label: "是否打击",
          prop: "isattacked",
          align: "center"
        },
        {
          slot: "operate",
          label: "操作",
          width: 250,
          fixed: "right"
        }
      ],
      paginationParam: {
        currentPage: 1,
        size: 10,
        total: 0
      },
      drawer: false,
      title: "",
      fromItem: {},
      deviceType: [],
      PositionList: [],
      historyList: []
    };
  },
  mounted() {
    this.headdenForm({}, "search");
  },
  methods: {
    getStatusStyle(value) {
      return {
        color: value == 0 ? "green" : "red"
      };
    },
    // 最大健康值 默认显示
    onMountedForm() {
      this.$forceUpdate();
    },
    // 关闭抽屉
    handleClose() {
      this.drawer = false;
    },
    // 新增 搜索
    headdenForm(value, type) {
      let params = {};
      if (type === "search") {
        params = JSON.parse(JSON.stringify(this.$refs.myForm.ruleForm));
        if (params.dateRange && params.dateRange.length === 2) {
          params.strartDate = moment(params.dateRange[0]).format("YYYY-MM-DD");
          params.endDate = moment(params.dateRange[1]).format("YYYY-MM-DD");
        }
        this.$delete(params, "dateRange");
        params.pageNum = this.paginationParam.currentPage;
        params.pageSize = this.paginationParam.size;
        alarmList(params).then((res) => {
          if (res.code === 0) {
            this.tableData = res.data.items.map((item) => {
              const { isWhitelist, duration, frequency, ...rest } = item;
              return {
                ...rest,
                isattacked: item.isattacked ? "是" : "否",
                duration: String(item.duration),
                frequency: String(item.frequency)
              };
            });
            this.paginationParam.total = res.data.total;
          }
        });
      }
      console.log(value);
    },
    // 停用 编辑 删除
    handleClick(value, type) {
      let params = { batchid: value.batchId };
      if (type === "playback") {
        console.log(value);
        alarmDetail(params).then((res) => {
          if (res.code === 0) {
            console.log(res.data, "res.data");
            this.historyList = res.data;
            // this.historyList = [
            //   {
            //     lon: 109.056198,
            //     lat: 38.674443,
            //     alt: 0,
            //     createTime: "2025-03-30 03:44:21",
            //     alarmLevel: 0
            //   },
            //   {
            //     lon: 109.081454,
            //     lat: 38.664766,
            //     alt: 0,
            //     createTime: "2025-03-30 03:44:22",
            //     alarmLevel: 0
            //   },
            //   {
            //     lon: 109.101687,
            //     lat: 38.632524,
            //     alt: 0,
            //     createTime: "2025-03-30 03:44:25",
            //     alarmLevel: 0
            //   },
            //   {
            //     lon: 109.063063,
            //     lat: 38.622878,
            //     alt: 0,
            //     createTime: "2025-03-30 03:44:30",
            //     alarmLevel: 0
            //   },
            //   {
            //     lon: 109.016034,
            //     lat: 38.635138,
            //     alt: 0,
            //     createTime: "2025-03-30 03:44:35",
            //     alarmLevel: 0
            //   },
            //   {
            //     lon: 108.991419,
            //     lat: 38.659515,
            //     alt: 0,
            //     createTime: "2025-03-30 03:44:38",
            //     alarmLevel: 0
            //   }
            // ];
          }
        });
        this.title = "轨迹回放";
        this.drawer = true;
      }
    },
    handleSizeChange(value) {
      console.log(value);
      this.paginationParam.size = value;
      this.headdenForm({}, "search");
    },
    handlePageChange(value) {
      console.log(value);
      this.paginationParam.currentPage = value;
      this.headdenForm({}, "search");
    }
  }
};
</script>
<style scoped lang="scss">
.alert {
  width: 95%;
  height: 100%;
  padding: 20px;
  position: relative;
}
</style>