yyky_web/src/views/system/healthsolve/index.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="用户姓名" prop="userid">
        <el-input v-model="queryParams.name" placeholder="请输入用户姓名" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="处理状态" prop="solve_status">
        <el-select v-model="queryParams.solve_status">
          <el-option label="已处理" :value="1"></el-option>
          <el-option label="未处理" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <!-- <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:solve:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:solve:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:solve:remove']"
        >删除</el-button>
      </el-col> -->
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['system:solve:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="healthsolveList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <!-- <el-table-column label="id" align="center" prop="id" /> -->
      <el-table-column label="用户名" align="center" prop="name" />
      <el-table-column label="联系电话" align="center" prop="tel_one" />
      <el-table-column label="事件类型" align="center">
        <template slot-scope="scope">
          健康告警
        </template>
      </el-table-column>
      <el-table-column label="告警时间" align="center" prop="createtime" />
      <el-table-column label="告警内容" align="center" prop="alarmMsg" />
      <el-table-column label="处理状态" align="center" prop="solveStatus" />
      <!-- <el-table-column label="服务人员用户ID" align="center" prop="serviceUserid" />
      <el-table-column label="时间记录" align="center" prop="msg" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleSee(scope.row)">查看</el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['system:solve:edit']">处理</el-button>
          <!-- <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:solve:remove']"
          >删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改SOS预警处理对话框 -->
    <el-dialog :visible.sync="open" width="1200px" append-to-body destroy-on-close>
      <el-row>
        <el-col :span="8" class="user-table">
          <div class="label">姓名：</div>
          <div>{{ form.name }}</div>
        </el-col>
        <el-col :span="8" class="user-table">
          <div class="label">联系电话：</div>
          <div>{{ form.tel_one }}</div>
        </el-col>
        <el-col :span="8" class="user-table">
          <div class="label">所属机构：</div>
          <div>{{ form.store_name }}</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" class="user-table">
          <div class="label">设备类型：</div>
          <div>智能设备</div>
        </el-col>
        <el-col :span="8" class="user-table">
          <div class="label">设备型号：</div>
          <div>{{form.deviceModel}}</div>
        </el-col>
        <el-col :span="8" class="user-table">
          <div class="label">设备名称：</div>
          <div>智能手环</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" class="user-table">
          <div class="label">设备ID：</div>
          <div>{{ form.deviceIdCode }}</div>
        </el-col>
        <el-col :span="8" class="user-table">
          <div class="label">事件类型：</div>
          <div>{{ form.alarm_type == 24 ? '健康告警' : '' }}</div>
        </el-col>
        <el-col :span="8" class="user-table">
          <div class="label">告警时间：</div>
          <div>{{ form.createtime }}</div>
        </el-col>
      </el-row>
      <!-- <el-row>
        <el-col :span="8" class="user-table">
          <div class="label">告警开始时间：</div>
          <div>2023-09-07 16:41</div>
        </el-col>
        <el-col :span="8" class="user-table">
          <div class="label">告警结束时间：</div>
          <div>2023-09-07 16:41</div>
        </el-col>
      </el-row> -->
      <el-row>
        <el-col class="user-table">
          <div class="label">告警地址：</div>
          <div>{{ form.address_desc }}</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="user-table">
          <div class="label">告警内容：</div>
          <div>{{ form.alarmMsg }}</div>
        </el-col>
      </el-row>
      <el-row v-if="!deal_flag">
        <el-col class="user-table">
          <div class="label">处理状态：</div>
          <div>{{form.solveStatus}}</div>
        </el-col>
      </el-row>
      <el-row v-if="!deal_flag">
        <el-col class="user-table">
          <div class="label">事件记录：</div>
          <div>{{ form.msg }}</div>
        </el-col>
      </el-row>
      <el-row v-if="deal_flag">
        <el-col class="user-table">
          <div class="label">处理状态：</div>
          <el-radio-group v-model="form.solve_status">
            <el-radio label="0">未处理</el-radio>
            <el-radio label="2">在处理</el-radio>
            <el-radio label="1">已处理</el-radio>
          </el-radio-group>
        </el-col>
      </el-row>
      <el-row v-if="deal_flag" style="margin-bottom: 20px;">
        <el-col class="user-table" style="align-items: flex-start;">
          <div class="label">事件记录：</div>
          <el-input type="textarea" :rows="2" style="width: 950px;" v-model="form.msg"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <div id="health-map"></div>
      </el-row>
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button type="primary" @click="submit" v-if="deal_flag">提 交</el-button>
        <el-button @click="cancel" v-if="!deal_flag">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listHealthsolve, getHealthsolve, delHealthsolve, addHealthsolve, updateHealthsolve } from "@/api/system/healthsolve";
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  name: "Healthsolve",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 健康告警处理表格数据
      healthsolveList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userid: null,
        deviceIdCode: null,
        alarmMsg: null,
        solve_status: null,
        serviceUserid: null,
        msg: null,
        createTime: null,
        alarmid: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      map: null,
      deal_flag: false,
      deviceModel: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    createMap() {
      window._AMapSecurityConfig = {
        securityJsCode: 'e91e92cbd76e89c48f3ff1d6180f288c'
      }
      AMapLoader.load({
        key: 'c968deab485d6e688e7c68689722ffb4',
        version: '2.0'
      }).then(AMap => {
        this.map = new AMap.Map('health-map', {
          zoom: 15,
          center: [this.form.gps_long, this.form.gps_lat]
        })
        this.map.plugin(['AMap.ToolBar', 'AMap.Scale'], () => {
          this.map.addControl(new AMap.ToolBar({
            position: 'RT'
          }))
          this.map.addControl(new AMap.Scale())
        })
        var info = [];
        info.push(`<p>姓名 : ${this.form.name}</p>`)
        info.push(`<p>电话 : ${this.form.tel_one}</p>`);
        info.push(`<p>地址 : ${this.form.address_desc}</p>`);
        info.push(`<p>预警时间 : ${this.form.createtime}</p>`);
        let infoWindow = new AMap.InfoWindow({
          offset: new AMap.Pixel(0, -35),
          content: info.join(""),  //使用默认信息窗体框样式，显示信息内容
        });
        infoWindow.open(this.map, this.map.getCenter());
        let marker = new AMap.Marker({
          position: [this.form.gps_long, this.form.gps_lat]
        })
        this.map.add(marker)
        marker.on('click', () => {
          infoWindow.open(this.map, this.map.getCenter());
        })
      })
    },
    /** 查询健康告警处理列表 */
    async getList() {
      this.loading = true;
      let { data: deviceModel } = await this.getDicts('sys_device_type')
      this.deviceModel = deviceModel
      await listHealthsolve(this.queryParams).then(response => {
        this.healthsolveList = response.rows;
        this.healthsolveList.map(item => {
          if (item.device_model || item.device_model == 0) {
            item.deviceModel = this.deviceModel[item.device_model].dictLabel
          }
          item.solveStatus = item.solve_status == 1 ? '已处理' : item.solve_status == 0 ? '未处理' : '处理中'
        })
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        userid: null,
        deviceIdCode: null,
        alarmMsg: null,
        solveStatus: null,
        serviceUserid: null,
        msg: null,
        createTime: null,
        alarmid: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加健康告警处理";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.aid || this.ids
      this.deal_flag = true
      // getSolve(id).then(response => {
      //   this.form = response.data;
      //   this.open = true;
      //   this.title = "修改SOS预警处理";
      //   this.createMap()
      // });
      this.healthsolveList.map(item => {
        if (item.aid == id) {
          this.form = item
          this.open = true;
        }
      })
      this.createMap()
    },
    handleSee(row) {
      this.reset();
      const id = row.aid
      this.healthsolveList.map(item => {
        if (item.aid == id) {
          this.form = item
          this.open = true;
          this.deal_flag = false
        }
      })
      this.createMap()
    },
    submit() {
      let data = {}
      data.uid = this.form.uid
      data.deviceIdCode = this.form.deviceIdCode
      data.alarmMsg = this.form.alarmMsg
      data.solve_status = this.form.solve_status
      data.msg = this.form.msg
      data.aid = this.form.aid
      addHealthsolve(data).then(response => {
        this.$modal.msgSuccess("提交成功");
        this.open = false;
        this.getList();
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateHealthsolve(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addHealthsolve(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除健康告警处理编号为"' + ids + '"的数据项？').then(function() {
        return delHealthsolve(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/healthsolve/export', {
        ...this.queryParams
      }, `healthsolve_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style scoped>
.user-table {
  display: flex;
  align-items: center;
  line-height: 42px;
}

.label {
  width: 120px;
  text-align: end;
}

#health-map {
  width: 100%;
  height: 500px;
}
</style>