<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()"
>取 消</a
>
<a href="javascript:void(0)" id="AddBox5Dataup" @click="Updata()"
>提 交</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>
