shuili-vue/src/views/reservoir/safeMonitorSetting/index.vue

<template>
  <div class="safe-monitor-setting-page">
    <TopBackTitle :showBackBtn="false"></TopBackTitle>
    <div class="container-box flex p-16">
      <div class="tree-box">
        <el-input v-model="filterText" placeholder="请输入关键字"></el-input>
        <el-tree
          class="filter-tree mt-10"
          highlight-current
          :data="treeData"
          :props="defaultProps"
          lazy
          :load="loadTree"
          :filter-node-method="filterNode"
          @node-click="handleClickTree"
          ref="tree"
        >
        </el-tree>
      </div>
      <div class="content-box" ref="contentRef">
        <div class="flex items-center">
          <span>测点编码：</span>
          <el-input
            class="w-200"
            size="small"
            v-model="searchCode"
            placeholder="请输入"
          ></el-input>
          <span class="ml-24">测点类型：</span>
          <el-select size="small" class="w-200" v-model="searchType">
            <el-option label="全部" value=""></el-option>
            <el-option
              v-for="item in searchTypeOptions"
              :label="item.dictLabel"
              :value="item.dictValue"
              :key="item.dictValue"
            ></el-option>
          </el-select>
        </div>

        <el-table
          class="mt-12"
          :data="tableData"
          border
          style="width: 100%"
          :height="tableHeight"
        >
          <el-table-column type="index" label="序号" width="60">
          </el-table-column>
          <el-table-column prop="name" label="测点名称"> </el-table-column>
          <el-table-column prop="code" label="测站编码"> </el-table-column>
          <el-table-column prop="type" label="测站类型"> </el-table-column>
          <el-table-column prop="code" label="采集方式"> </el-table-column>
          <el-table-column prop="source" label="数据来源"> </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="text" @click="handleSetForm(scope.row)"
                >配置</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <div class="mt-24 flex justify-end">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="params.pageSize"
            :total="params.total"
          >
          </el-pagination>
        </div>

        <div class="bottom-box">
          <div class="flex items-center">
            <div class="w-180 text-right flex-shrink-0">预警类型：</div>
            <el-select class="w-200" v-model="currentForm.warnType">
              <el-option label="日降雨" value="1"></el-option>
              <el-option label="x小时累计降雨" value="2"></el-option>
            </el-select>
            <div class="ml-10">日降雨指本日8时至次日8时</div>
          </div>
          <div v-for="(item, index) in currentForm.noticeList" :key="index">
            <div class="flex items-center mt-10">
              <div class="w-180 text-right flex-shrink-0">设置预警值：</div>
              <el-input
                class="w-200"
                v-model="item.warnValue"
                placeholder="请输入"
              ></el-input>
              <div class="ml-10">mm/d</div>
              <i
                v-if="
                  currentForm.noticeList.length > 1 &&
                  index != currentForm.noticeList.length - 1
                "
                class="el-icon-remove ml-18 font-18 cursor-pointer"
                @click="handleRemoveNoticeItem(index)"
              ></i>
              <i
                v-else
                class="el-icon-circle-plus ml-18 font-18 cursor-pointer"
                @click="handleAddNoticeItem"
              ></i>
            </div>
            <div class="flex items-center mt-10">
              <div class="w-180 text-right flex-shrink-0">预警通知人：</div>
              <el-select
                class="w-200"
                filterable
                v-model="item.userId"
                remote
                :remote-method="searchUser"
                value-key="id"
                placeholder="请输入关键词搜索用户"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="flex items-start mt-10">
            <div class="w-180 text-right flex-shrink-0">通知模板：</div>
            <el-input
              class=""
              type="textarea"
              placeholder="请输入"
              :rows="4"
              v-model="currentForm.notifyText"
            ></el-input>
          </div>
          <div class="flex justify-end mt-16">
            <el-button type="primary" @click="handleSaveRowForm"
              >保存</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import TopBackTitle from "@/components/TopBackTitle";

import { getAreasData } from "@/api/areas/index";
import { getDicts } from "@/api/management";

import { listUser } from "@/api/system/user";

export default {
  components: { TopBackTitle },
  data() {
    return {
      filterText: "",
      treeData: [],
      defaultProps: {
        children: "children",
        label: "label",
        isLeaf: "leaf",
      },
      params: {
        pageSize: 20,
        pageNum: 1,
        total: 0,
      },
      searchCode: "",
      searchType: "",
      searchTypeOptions: [],
      userList: [],
      tableData: [{}, {}],
      currentForm: {
        noticeList: [
          {
            warnType: "",
            userId: "",
          },
        ],
        notifyText: `{通知人name}同志，现发生【水库名称】【测站点编码】{预警类型name}，预警数值【监测值、监测日期时间】，请您严格履行责任人防汛职责，（核对水库数据，提交相关水行政主管单位、联系仪器厂商校准仪器），保证水库数据准确。【广东省水利厅】`,
      },
      tableHeight: null,
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.getTreeData();
    this.searchUser("");
    // 获取巡查类型
    getDicts("measurement_point_type").then((res) => {
      if (res.data && Array.isArray(res.data)) {
        this.searchTypeOptions = res.data;
      }
    });
  },
  mounted() {
    let h = this.$refs.contentRef.offsetHeight - 418 - 30;
    this.tableHeight = h > 0 ? h : 300;
  },
  methods: {
    // 获取行政区数据
    getTreeData() {
      getAreasData().then((items) => {
        let res = [];
        let getChildren = (res, pid) => {
          for (const i of items.data) {
            if (i.parentid === pid) {
              const newItem = {
                label: i.name,
                value: i.id,
              };
              if (i.layer != 3) newItem.children = [];
              res.push(newItem);
              getChildren(newItem.children, newItem.value);
            }
          }
        };
        getChildren(res, items.data[0].parentid);
        this.treeData = res;
      });
    },
    // 获取人员列表信息
    searchUser(e) {
      listUser({
        data: {
          timeView: {
            timeField: "create_time",
          },
        },
        cv: {
          name: "nickName",
          type: "like",
          value: e,
        },
        pageSize: 100,
        pageNum: 1,
      }).then((res) => {
        this.userList =
          res.records?.map((v) => {
            return {
              id: v.id,
              name: v.nickName,
              uid: v.uuid,
            };
          }) || [];
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    loadTree(node, resolve) {
      console.log("node >>>>>  ", node);
      if (node.level === 0) {
        return resolve(node.data);
      } else {
        if (node.data.isEnd) {
          return resolve([]);
        } else if (node.data.children?.length) {
          return resolve(node.data.children);
        } else if (!node.isLeaf) {
          setTimeout(() => {
            resolve([
              {
                id: 111,
                label: "xxx水库",
                isEnd: true,
                leaf: true,
              },
            ]);
          }, 800);
        } else {
          resolve();
        }
      }
    },
    handleClickTree(data, node) {
      console.log("handleClickTree >>>>>  ", data, node);
      if (node.isLeaf) {
        console.log("点击叶子节点----加载水库列表 >>>> ");
      }
    },
    handleAddNoticeItem() {
      this.currentForm.noticeList.push({
        warnValue: "",
        userId: "",
      });
    },
    handleRemoveNoticeItem(index) {
      this.currentForm.noticeList.splice(index, 1);
    },
    handleSetForm(row) {
      this.currentForm = {
        noticeList: row.noticeList || [
          {
            warnValue: "",
            userId: "",
          },
        ],
        warnType: row.warnType,
        notifyText: row.notifyText || "",
      };
    },
    handleSaveRowForm() {},
  },
};
</script>
<style scoped lang="scss">
.safe-monitor-setting-page {
  position: relative;
  font-size: 14px;
  height: 100%;

  .container-box {
    height: calc(100% - 56px);
  }

  .tree-box {
    flex-shrink: 0;
    width: 240px;
    padding: 12px;
    background: #fff;
    border-radius: 2px;
  }

  .content-box {
    flex: 1;
    background: #fff;
    margin-left: 10px;
    padding: 12px;
    overflow: auto;
  }

  .bottom-box {
    border: 1px solid #ccc;
    padding: 10px;
    margin-top: 16px;
    background: #f4f5f7;
  }

  .w-100 {
    width: 100px;
  }

  .w-180 {
    width: 180px;
  }

  .w-200 {
    width: 200px;
  }
}
</style>