Newer
Older
operation_web / src / components / configure / PatrolConfiguration.vue
@朱忠杰 朱忠杰 on 19 Jan 2021 20 KB 白色
<template>
  <div id="PatrolConfiguration">
    <div id="PCTopSearchBox">
      <span class="SelectTitle">平台:</span>
      <el-select
        v-model="Project"
        filterable
        placeholder="请选择"
        @change="loadProjectUser(Project)"
      >
        <el-option
          v-for="item in ProjectOptions"
          :key="item.platform_code"
          :label="item.name"
          :value="item.platform_code"
        ></el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-plus" @click="Add()"
        >新增配置</el-button
      >
    </div>
    <div
      id="PCCertent"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <el-table :data="TableData" style="width: 100%;height:calc(100% - 45px)">
        <el-table-column
          prop="platForm"
          label="序号"
          width="50px"
        ></el-table-column>
        <el-table-column prop="platFormName" label="创建时间"></el-table-column>
        <el-table-column
          prop="pushFrequency"
          label="关联人员"
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="details(scope.$index, scope.row)"
              style="margin:0 10px"
              >查看详情</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="Edit(scope.$index, scope.row)"
              style="margin:0 10px"
              >编辑配置</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="Del(scope.$index, scope.row)"
              style="margin:0 10px"
              >删除配置</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="PRSizeChange"
        @current-change="PRCurrentChange"
        :current-page="PRPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="PRSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="PRDatagridDataLength"
        style="margin-top:10px;"
      ></el-pagination>
    </div>
    <el-dialog
      title="绩效考核标准表"
      :visible.sync="dialogVisible"
      width="1100px"
    >
      <div id="tablelist">
        <span class="DataTitle">
          设备检测类(33%)
          <span class="DataTitleFz">分值</span>
        </span>
        <div class="Datalistbox">
          <div
            class="Datalist"
            v-for="(item, index) in detailsData.No1"
            :key="index"
          >
            <div class="DatalistTitle">{{ item.Title }}</div>
            <div class="DatalistNember">{{ item.Value }}</div>
          </div>
        </div>
        <span class="DataTitle">
          人员打卡(33%)
          <span class="DataTitleFz">分值</span>
        </span>
        <div class="Datalistbox">
          <div
            class="Datalist"
            v-for="(item, index) in detailsData.No2"
            :key="index"
          >
            <div class="DatalistTitle">{{ item.Title }}</div>
            <div class="DatalistNember">{{ item.Value }}</div>
          </div>
        </div>
        <span class="DataTitle">
          轨迹跟踪(33%)
          <span class="DataTitleFz">分值</span>
        </span>
        <div class="Datalistbox">
          <div
            class="Datalist"
            v-for="(item, index) in detailsData.No3"
            :key="index"
          >
            <div class="DatalistTitle">{{ item.Title }}</div>
            <div class="DatalistNember">{{ item.Value }}</div>
          </div>
          <span class="TJD">途经点位预览</span>
        </div>
      </div>
    </el-dialog>
    <!-- 新增 / 修改 dialog弹窗 -->
    <el-dialog :visible.sync="dialogVisible2" width="1100px">
      <div id="AddBox1" class="WhiteBorder">
        <span class="SelectTitle2">配置名称:</span>
        <el-input v-model="ConfigName" placeholder="请输入配置名称"></el-input>
      </div>
      <div id="AddBox2">
        <p id="AddBoxP">
          <el-checkbox v-model="checkedSB"></el-checkbox>
          <span class="SelectTitle2">设备检测类(50%)</span>
        </p>
        <div id="AddBox2Sel" class="WhiteBorder">
          <span
            class="SelectTitle3"
            :style="{ color: checkedSB === true ? '#fff' : '#878788' }"
            >选择业务:</span
          >
          <el-select
            v-model="business"
            filterable
            placeholder="请选择"
            @change="loadProjectUser(Project)"
            style="width:180px"
            size="mini"
            :disabled="!checkedSB"
          >
            <el-option
              v-for="item in businessOptions"
              :key="item.platform_code"
              :label="item.name"
              :value="item.platform_code"
            ></el-option>
          </el-select>
          <span
            class="SelectTitle3"
            :style="{ color: checkedSB === true ? '#fff' : '#878788' }"
            >需要巡检次数(日):</span
          >
          <el-input
            placeholder="请输入  次"
            v-model="XjDayValue"
            clearable
            min="0"
            type="number"
            size="mini"
            :disabled="!checkedSB"
          ></el-input>
          <span
            class="SelectTitle3"
            :style="{ color: checkedSB === true ? '#fff' : '#878788' }"
            >需要巡检次数(月):</span
          >
          <el-input
            placeholder="请输入  次"
            v-model="XjMonthValue"
            clearable
            min="0"
            size="mini"
            type="number"
            :disabled="!checkedSB"
          ></el-input>
        </div>
        <div id="AddBox2Check">
          <el-checkbox-group v-model="SBcheckList">
            <el-checkbox
              v-for="(item, index) in detailsData.No1"
              :key="index"
              :label="item.Title"
              :disabled="!checkedSB"
              class="SbChecks"
              >{{ item.Title }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
      </div>
      <div id="AddBox3">
        <p id="AddBoxP">
          <el-checkbox v-model="checkedUser"></el-checkbox>
          <span class="SelectTitle2">人员打卡</span>
        </p>
        <div id="AddBox3Sel" class="WhiteBorder">
          <span
            class="SelectTitle3"
            :style="{ color: checkedUser === true ? '#fff' : '#878788' }"
            >时间范围:</span
          >
          <el-time-picker
            is-range
            v-model="AddBox3Time"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
            size="mini"
            value-format="HH:mm:ss"
            format="HH:mm:ss"
            :disabled="!checkedUser"
          ></el-time-picker>
          <span
            class="SelectTitle3"
            :style="{ color: checkedUser === true ? '#fff' : '#878788' }"
            >需要打卡次数(日):</span
          >
          <el-input
            placeholder="请输入  次"
            v-model="DkDayValue"
            clearable
            min="0"
            type="number"
            size="mini"
            :disabled="!checkedUser"
          ></el-input>
          <span
            class="SelectTitle3"
            :style="{ color: checkedUser === true ? '#fff' : '#878788' }"
            >需要打卡次数(月):</span
          >
          <el-input
            placeholder="请输入  次"
            v-model="DkMonthValue"
            clearable
            min="0"
            type="number"
            size="mini"
            :disabled="!checkedUser"
          ></el-input>
          <span
            class="SelectTitle3"
            :style="{ color: checkedUser === true ? '#fff' : '#878788' }"
            >当前定位:</span
          >
          <el-select
            v-model="LocationType"
            filterable
            placeholder="请选择"
            style="width:120px"
            size="mini"
            :disabled="!checkedUser"
          >
            <el-option
              v-for="item in LocationTypeSel"
              :key="item.platform_code"
              :label="item.name"
              :value="item.platform_code"
            ></el-option>
          </el-select>
          <span
            class="SelectTitle3"
            :style="{ color: checkedUser === true ? '#fff' : '#878788' }"
            >偏离设置:</span
          >
          <el-input
            placeholder="请输入  米"
            v-model="DkPLValue"
            clearable
            min="0"
            type="number"
            size="mini"
            :disabled="!checkedUser"
          ></el-input>
        </div>
      </div>
      <div id="AddBox4">
        <p id="AddBoxP">
          <el-checkbox v-model="checkedGuiJi"></el-checkbox>
          <span class="SelectTitle2">轨迹跟踪(50%)</span>
        </p>
        <div id="AddBox3Sel" class="WhiteBorder">
          <span
            class="SelectTitle3"
            :style="{ color: checkedGuiJi === true ? '#fff' : '#878788' }"
            >统计方式:</span
          >
          <el-input
            placeholder="请输入  次"
            v-model="ZjTjValue"
            clearable
            min="0"
            type="number"
            size="mini"
            :disabled="!checkedGuiJi"
          ></el-input>
          <span
            class="SelectTitle3"
            :style="{ color: checkedGuiJi === true ? '#fff' : '#878788' }"
            >偏离设置:</span
          >
          <el-input
            placeholder="请输入  米"
            v-model="GjPLValue"
            clearable
            min="0"
            type="number"
            size="mini"
            :disabled="!checkedGuiJi"
          ></el-input>
        </div>
        <div id="TJDBox">
          <span
            class="SelectTitle3"
            :style="{ color: checkedGuiJi === true ? '#fff' : '#878788' }"
            style="float:left"
            >途经点:</span
          >
          <div id="DianBox">
            <span
              class="detailsDian"
              v-for="(item, index) in detailsData.No1"
              :key="index"
              >{{ item.Title }}</span
            >
            <el-button
              type="info"
              icon="el-icon-plus"
              size="mini"
              style="float:left;margin-left:10px;margin-top: 5px;"
            ></el-button>
          </div>
        </div>
      </div>
      <div id="AddBox5">
        <a href="javascript:void(0)" id="AddBox5Close" @click="Close()"
          >取&nbsp;&nbsp;&nbsp;消</a
        >
        <a href="javascript:void(0)" id="AddBox5Dataup" @click="Updata()"
          >提&nbsp;&nbsp;&nbsp;交</a
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "PatrolConfiguration",
  data: function() {
    return {
      Project: "", //平台
      ProjectOptions: [
        {
          name: "全部",
          platform_code: ""
        }
      ], //平台的数据源
      loading: false, //加载中 状态
      TableData: [], //表格数据
      PRPage: 1, //分页默认显示页
      PRDatagridDataLength: 0, //分页上显示的数据总条数
      PRSize: 10, //分页上显示的每页的条数
      dialogVisible: false, //详情弹窗状态
      detailsData: {
        // 设备巡检类
        No1: [
          { Title: "需要巡检的次数(日) 1次", Value: "1" },
          { Title: "需要巡检的次数(月) 26次", Value: "26" },
          { Title: "工业排污", Value: "1" },
          { Title: "生活排污", Value: "1" },
          { Title: "黑臭水体", Value: "1" },
          { Title: "僵尸船", Value: "1" },
          { Title: "非法码头", Value: "1" },
          { Title: "非法采砂", Value: "1" },
          { Title: "侵占水域", Value: "1" },
          { Title: "围垦湖泊", Value: "1" },
          { Title: "防洪安全", Value: "1" },
          { Title: "河面大面积漂浮物", Value: "1" },
          { Title: "河岸垃圾", Value: "1" },
          { Title: "非法排污口", Value: "1" },
          { Title: "破坏饮用水源地", Value: "1" },
          { Title: "违法养殖", Value: "1" },
          { Title: "非法捕捞", Value: "1" },
          { Title: "河岸蓄禽养殖", Value: "1" },
          { Title: "破坏湿地", Value: "1" },
          { Title: "其它", Value: "1" }
        ],
        No2: [
          { Title: "时间范围  08:30-17:30", Value: "10" },
          { Title: "需要打卡的次数(日) 1次", Value: "1" },
          { Title: "需要打卡的次数(月) 26次", Value: "26" },
          { Title: "偏离设置5m", Value: "5" }
        ],
        No3: [
          { Title: "偏离设置5m", Value: "5" },
          { Title: "途经点:", Value: "25" }
        ]
      }, //详情弹窗数据
      dialogVisible2: false, //新增/修改 弹窗状态
      ConfigName: "", //配置名称
      checkedSB: true, //设备检测类的
      business: "", //选择业务
      businessOptions: [], //业务总类
      XjDayValue: "0", //需要巡检次数(日)
      XjMonthValue: "0", //需要巡检次数(月)
      SBcheckList: [], //设备检测
      checkedUser: false, //人员打卡
      AddBox3Time: ["08:30:00", "17:30:00"], //时间范围
      DkDayValue: "0", //打卡 日
      DkMonthValue: "0", //打卡 月
      DkPLValue: "0", //偏离设置
      LocationType: "wx", //定位方式
      LocationTypeSel: [{ platform_code: "wx", name: "微信" }], //定位方式选择项
      checkedGuiJi: true, //轨迹跟踪
      ZjTjValue: "0", //轨迹跟踪-统计
      GjPLValue: "0" //轨迹跟踪-偏离
    };
  },
  methods: {
    // 获取所有平台
    loadAllProject() {
      this.$http
        .get(this.nozzle.StationBaseControllerQueryPlatform)
        .then(response => {
          if (response.data.result.list.length > 0) {
            this.ProjectOptions = this.ProjectOptions.concat(
              response.data.result.list
            );
            this.Project = this.ProjectOptions[0].platform_code;
          } else {
            this.$message({
              showClose: true,
              message: "无项目",
              type: "warning"
            });
          }
        })
        .catch(response => {
          this.$message({
            showClose: true,
            message: "请求平台失败",
            type: "warning"
          });
        });
    },
    PRSizeChange(val) {
      // 改变每页的条数
      this.PRSize = val;
      this.loadGridData();
    },
    PRCurrentChange(val) {
      console.log(val);
      //改变页数
      this.PRPage = val;
      this.loadGridData();
    },
    // 加载表格数据
    loadGridData() {
      // this.loading = true;
      this.TableData = [];
      this.TableData = [
        {
          platForm: 0,
          platFormName: "2019-12-24 08:00:00",
          pushFrequency: "张三"
        }
      ];
      // this.$http
      //   .post(this.nozzle.personnelInfo, {
      //     page: this.PRPage,
      //     size: this.PRSize,
      //     data: {
      //       Project: this.Project //模糊搜索
      //     }
      //   })
      //   .then(response => {
      //     this.loading = false;
      //     if (response.data.code === 200) {
      //       this.TableData = response.data.data.records;
      //       this.PRDatagridDataLength = response.data.data.total;
      //     } else {
      //       message(response);
      //     }
      //   })
      //   .catch(response => {
      //     this.loading = false;
      //     message(response);
      //   });
    },
    // 详情
    details(index, rows) {
      this.dialogVisible = true;
    },
    // 新增
    Add() {
      this.dialogVisible2 = true;
    },
    // 配置
    Edit(index, rows) {
      this.dialogVisible2 = true;
    },
    // 取消
    Close() {
      this.dialogVisible2 = false;
    },
    // 提交
    Updata() {
      // if (this.checkedSB) {
      //   console.log(this.SBcheckList);
      // } else {
      //   this.SBcheckList = [];
      //   console.log(this.SBcheckList);
      // }
      console.log(this.AddBox3Time);
    }
  },
  mounted: function() {
    this.loadAllProject();
    this.loadGridData();
  }
};
</script>

<style scoped>
#PatrolConfiguration {
  width: 100%;
  height: 100%;
}
/* 顶部搜索 */
#PCTopSearchBox {
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: left;
  color: var(--white);
}
#PCTopSearchBox .el-input {
  width: 200px;
  margin: 0 10px;
}
.SelectTitle {
  display: inline-block;
  margin-left: 5px;
  text-align: center;
  height: 60px;
  line-height: 60px;
}
/* 主体内容 */
#PCCertent {
  width: 100%;
  height: calc(100% - 70px);
  margin-top: 10px;
  /* background: rgba(53, 53, 53, 0.5); */
}
/* 详情弹窗 */
#tablelist {
  width: 100%;
  height: auto;
  max-height: 600px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
  padding: 2px;
  overflow: auto;
}
.DataTitle {
  display: inline-block;
  width: 100%;
  text-align: left;
  padding-left: 15px;
  box-sizing: border-box;
  color: var(--diatitle);
  font-size: 16px;
  height: 30px;
  line-height: 30px;
  position: relative;
}
.DataTitleFz {
  position: absolute;
  left: 225px;
  font-size: 14px;
}
.Datalistbox {
  display: inline-block;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.Datalist {
  width: 25%;
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  float: left;
}
.DatalistTitle {
  height: 100%;
  width: 80%;
  float: left;
  text-align: left;
  box-sizing: border-box;
  padding-left: 5px;
  color: var(--white);
}
.DatalistNember {
  height: 100%;
  width: 20%;
  float: left;
  text-align: center;
  color: var(--diatitle);
}
.TJD {
  width: 100px;
  height: 20px;
  line-height: 20px;
  background: rgb(64, 158, 255);
  color: white;
  margin-top: 5px;
  float: left;
  margin-left: 15px;
  cursor: pointer;
}
/* 新增/修改 弹窗样式 */
.SelectTitle2 {
  display: inline-block;
  margin-left: 5px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  color: rgb(1, 109, 252);
  font-size: 16px;
  font-weight: 600;
}
#AddBox1 {
  height: 60px;
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  display: inline-block;
  text-align: left;
  box-sizing: border-box;
  padding: 10px 5px;
}
#AddBox1 .el-input {
  width: 200px;
  margin: 0 10px;
}
#AddBox2 {
  /* height: 40px; */
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  display: inline-block;
  font-size: 12px;
  padding-bottom: 10px;
}
#AddBoxP {
  text-align: left;
  padding: 10px;
}
.SelectTitle3 {
  display: inline-block;
  margin-left: 5px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  color: var(--white) !important;
  font-size: 14px;
}
#AddBox2Sel {
  text-align: left;
  padding-left: 10px;
  height: 40px;
  line-height: 40px;
}
#AddBox2Sel .el-input {
  width: 140px;
  margin: 0 10px;
}
#AddBox2Check {
  width: 100%;
  height: auto;
  text-align: left;
}
.SbChecks {
  margin: 5px 15px;
}
#AddBox3 {
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  display: inline-block;
  font-size: 12px;
  padding-bottom: 10px;
}
#AddBox3Sel {
  text-align: left;
  padding-left: 10px;
}
#AddBox3Sel .el-input {
  width: 120px;
  margin: 0 10px;
}
#AddBox4 {
  /* height: 40px; */
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  display: inline-block;
  padding-bottom: 10px;
}
#TJDBox {
  text-align: left;
  padding-left: 10px;
  box-sizing: border-box;
  height: 70px;
  width: 100%;
}
#DianBox {
  width: calc(100% - 70px);
  height: 100%;
  overflow: auto;
  float: left;
}
.detailsDian {
  float: left;
  padding: 0px 10px;
  border: 1px solid rgb(64, 158, 255);
  box-sizing: border-box;
  margin-left: 10px;
  margin-top: 5px;
  height: 28px;
  line-height: 28px;
  color: rgb(64, 158, 255);
}
#AddBox5 {
  /* height: 40px; */
  width: 100%;
  /* border-bottom: 1px solid rgba(255, 255, 255, 0.2); */
  display: inline-block;
  padding: 10px 0;
}
#AddBox5Close {
  display: inline-block;
  width: 200px;
  height: 40px;
  line-height: 40px;
  border: 2px solid rgb(0, 111, 255);
  color: rgb(0, 111, 255);
  box-sizing: border-box;
  font-size: 17px;
}
#AddBox5Dataup {
  display: inline-block;
  width: 200px;
  height: 40px;
  line-height: 40px;
  background: rgb(0, 111, 255);
  border: 2px solid rgb(0, 111, 255);
  color: white;
  box-sizing: border-box;
  font-size: 17px;
}
</style>