qinyanlei
/
webs-admin
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

巡视任务页面开发

dev
wangxingyuan 10 months ago
parent
217a6f28f1
commit
b5fd751c92
4 changed files with 624 additions and 1 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +10
    -0
      src/api/administration.js
  2. +7
    -0
      src/api/system/config.js
  3. +21
    -1
      src/store/modules/app.js
  4. +586
    -0
      src/views/administration/administration.vue

+ 10
- 0
src/api/administration.js View File

@ -0,0 +1,10 @@
import request from '@/utils/request'
export function getList(query) {
console.log(query,111111111)
return request({
url: '/patrol/task/list',
method: 'get',
params: query
})
}

+ 7
- 0
src/api/system/config.js View File

@ -58,3 +58,10 @@ export function refreshCache() {
method: 'delete'
})
}
// 批量获取参数配置
export function getConfigByKeys (keys) {
return request({
url: '/system/config/configKeys/' + keys.join(','),
method: 'get'
})
}

+ 21
- 1
src/store/modules/app.js View File

@ -1,5 +1,5 @@
import Cookies from 'js-cookie'
import { getConfigKey,getConfigByKeys } from "@/api/system/config";
const state = {
sidebar: {
opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
@ -37,6 +37,9 @@ const mutations = {
},
SET_SIDEBAR_HIDE: (state, status) => {
state.sidebar.hide = status
},
SET_SYSTEM_PARAMS: (state, systemParams) => {
state.systemParams = systemParams
}
}
@ -55,6 +58,23 @@ const actions = {
},
toggleSideBarHide({ commit }, status) {
commit('SET_SIDEBAR_HIDE', status)
},
// 获取系统参数配置
getSystemParams ({ commit }) {
return new Promise((resolve) => {
getConfigByKeys(["EXTRANET_ADDRESS", "EXTRANET_FTP_VIEW_ADDRESS", "INTRANET_FTP_VIEW_ADDRESS", "VIRTUAL_RTC_MEDIAURL", "EXTRANET_MEDIA_URL", "INTRANET_MEDIA_URL","VIRTUAL_FLV_MEDIAURL","INTRANET_FLV_MEDIA_URL","EXTRANET_FLV_MEDIA_URL"]).then((res) => {
const systemParams = {}
res.data.forEach((x) => {
systemParams[x.configKey] = x.configValue;
});
systemParams.PREFIX = location.hostname === systemParams.EXTRANET_ADDRESS ? 'EXTRANET' : 'INTRANET';
systemParams.ftpViewAddress = systemParams[systemParams.PREFIX + '_FTP_VIEW_ADDRESS']
systemParams.MEDIA_URL = systemParams[systemParams.PREFIX + '_MEDIA_URL']
systemParams.FLV_MEDIA_URL = systemParams[systemParams.PREFIX + '_FLV_MEDIA_URL']
commit("SET_SYSTEM_PARAMS", systemParams)
});
resolve()
})
}
}


+ 586
- 0
src/views/administration/administration.vue View File

@ -0,0 +1,586 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
<el-form-item label="计划名称">
<el-input
v-model="queryParams.taskName"
placeholder="请输入计划名称"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="区域名称">
<el-input
v-model="queryParams.areaName"
placeholder="请输入区域名称"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select
v-model="queryParams.isenable"
placeholder="状态"
clearable
style="width: 240px"
>
<el-option label="开启" value="0"></el-option>
<el-option label="不开启" value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item label="计划有效期">
<el-date-picker
v-model="queryParams.cycleStartTime"
type="date"
placeholder="计划有效期开始时间"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
>
</el-date-picker>
-
<el-date-picker
v-model="queryParams.cycleEndTime"
type="date"
placeholder="计划有效期结束时间"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker
v-model="queryParams.beginTime"
type="date"
placeholder="选择日期"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
>
</el-date-picker>
-
<el-date-picker
v-model="queryParams.endTime"
type="date"
placeholder="选择日期"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</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"
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
@click="handleDelete"
>删除</el-button
>
</el-col>
</el-row>
<el-table
v-loading="loading"
:data="dataList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="计划名称" prop="taskName" />
<el-table-column
label="计划有效期开始时间"
prop="cycleStartTime"
:show-overflow-tooltip="true"
/>
<el-table-column
label="计划有效期结束时间"
prop="cycleEndTime"
:show-overflow-tooltip="true"
/>
<el-table-column label="创建时间" prop="beginTime" />
<el-table-column label="区域名称" prop="areaName" />
<el-table-column label="任务策略" prop="roleSort" />
<el-table-column label="执行任务周期" prop="roleSort" />
<el-table-column label="状态" align="center">
<template slot-scope="scope">
<el-switch
v-model="scope.row.status"
active-value="0"
inactive-value="1"
@change="handleStatusChange(scope.row)"
></el-switch>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
width="200"
>
<template slot-scope="scope" v-if="scope.row.roleId !== 1">
<el-button size="mini" type="text" icon="el-icon-edit"
>立即执行</el-button
>
<el-button size="mini" type="text" icon="el-icon-edit"
>下发</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleCopy(scope.row)"
>复制任务</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>编辑</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
/>
<el-dialog :title="title" :visible.sync="dialogTableVisible">
<el-steps :active="active" style="margin-bottom: 20px">
<el-step title="设置计划对象"></el-step>
<el-step title="选择巡检对象"></el-step>
<el-step title="点位设置"></el-step>
</el-steps>
<el-form
ref="form"
:model="dialogForm"
label-width="100px"
v-if="dialogTableVisibleStep == 0"
>
<el-form-item label="名称">
<el-input v-model="dialogForm.name"></el-input>
</el-form-item>
<el-form-item label="优先级">
<el-select v-model="dialogForm.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="任务类型">
<el-select v-model="dialogForm.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="任务执行方式">
<el-checkbox v-model="dialogForm.checked">现在执行</el-checkbox>
</el-form-item>
<el-form-item label="巡检区域">
<el-tree
:data="treeData"
show-checkbox
node-key="id"
ref="tree"
highlight-current
:props="defaultProps"
@check="handleCheckChange"
>
</el-tree>
</el-form-item>
<el-form-item label="执行周期">
<el-radio-group v-model="dialogForm.cycle">
<el-radio :label="0" :value="0">定时执行</el-radio>
<el-radio :label="1" :value="1">周期执行</el-radio>
<el-radio :label="2" :value="2">间隔执行</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="执行日期" v-if="dialogForm.cycle == 0">
<el-date-picker
v-model="dialogForm.value1"
type="datetime"
placeholder="选择日期时间"
>
</el-date-picker>
</el-form-item>
<div v-if="dialogForm.cycle == 1" style="margin-bottom: 20px">
<div class="cycle2">时间设置</div>
<el-form-item label="计划有效期">
<el-date-picker
v-model="dialogForm.value1"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</el-form-item>
<el-form-item label="任务执行周期">
<el-select v-model="dialogForm.region" placeholder="请选择活动区域">
<el-option label="按周选择" value="shanghai"></el-option>
<el-option label="按月选择" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="任务执行时间">
<el-button type="primary" @click="executionTimeBtn"
>添加{{ executionTimeButton }}/7</el-button
>
</el-form-item>
<el-table
:data="executionTimeData"
style="width: 80%; margin-left: 10%"
>
<el-table-column label="日期" align="center">
<template slot-scope="scope">
<el-select v-model="scope.row.day" placeholder="请选择">
<el-option
:label="item.name"
:value="item.name"
v-for="(item, index) in weekData"
:key="item.id"
>{{ item.name }}</el-option
>
</el-select>
</template>
</el-table-column>
<el-table-column prop="name" label="时间" align="center">
<template slot-scope="scope">
<el-time-picker
v-model="scope.row.time"
placeholder="任意时间点"
>
</el-time-picker>
</template>
</el-table-column>
<el-table-column prop="address" label="操作" align="center">
<template slot-scope="scope">
<el-button
type="text"
icon="el-icon-delete"
@click="executionTimeDelet(scope.row)"
/>
</template>
</el-table-column>
</el-table>
</div>
<div v-if="dialogForm.cycle == 2" style="margin-bottom: 20px">
<!-- <div class="cycle2">时间设置</div> -->
<el-form-item label="间隔">
<el-date-picker
v-model="dialogForm.value1"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</el-form-item>
<el-form-item label="执行时间">
<el-time-picker
v-model="dialogForm.value1"
placeholder="任意时间点"
>
</el-time-picker>
</el-form-item>
<el-form-item label="间隔类型">
<el-select v-model="dialogForm.region" placeholder="请选择间隔类型">
<el-option label="小时" value="小时"></el-option>
</el-select>
</el-form-item>
<el-form-item label="间隔数量">
<el-input-number
v-model="dialogForm.num"
:min="1"
></el-input-number>
</el-form-item>
</div>
<el-form-item>
<el-button @click="resetForm('ruleForm')">取消</el-button>
<el-button type="primary" @click="submitForm('ruleForm')"
>下一步</el-button
>
</el-form-item>
</el-form>
<div v-if="dialogTableVisibleStep == 1">
<div class="dialogTableVisibleStep1">
<div class="dialogTableVisibleStep1-content">
<div class="leftTotle">区域</div>
<div
class="dialogTableVisibleStepQurey"
style="margin-bottom: 10px"
>
<el-input placeholder="请输入内容" v-model="input3"> </el-input>
<el-button
slot="append"
icon="el-icon-search"
type="primary"
></el-button>
</div>
<el-tree
:data="treeData"
show-checkbox
node-key="id"
ref="tree"
highlight-current
:props="defaultProps"
@check="handleCheckChange"
>
</el-tree>
</div>
<div>
<el-transfer
v-model="transferValue"
:data="transferData"
:titles="['待添加', '已添加']"
></el-transfer>
</div>
</div>
<div style="margin-left: 80%; margin-top: 20px">
<el-button @click="cancel">上一步</el-button>
<el-button type="primary" @click="submitForm">下一步</el-button>
</div>
</div>
<!-- <span slot="footer" class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="submitForm">下一步</el-button>
</span> -->
</el-dialog>
<!-- 复制弹框 -->
<el-dialog
title="复制任务"
:visible.sync="copyDialogVisible"
width="30%"
:before-close="handleClose"
>
<el-time-picker placeholder="任意时间点">
</el-time-picker>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="copyDialogVisible = false"
>复制</el-button
>
</span>
</el-dialog>
</div>
</template>
<script>
import { getList } from "@/api/administration";
export default {
data() {
return {
queryParams: {
pageNum: 1,
pageSize: 10,
taskName: "",
cycleStartTime: "",
cycleEndTime: "",
areaName: "",
isenable: "",
beginTime: "",
endTime: "",
},
total: 0,
loading: true,
dataList: [],
// 选中数组
ids: [],
title: "新增",
dialogTableVisible: false,
active: 0,
dialogForm: {
checked: true,
cycle: 0,
num: 0,
},
treeData: [
{
id: 1,
label: "一级 1",
children: [
{
id: 4,
label: "二级 1-1",
children: [
{
id: 9,
label: "三级 1-1-1",
},
{
id: 10,
label: "三级 1-1-2",
},
],
},
],
},
],
defaultProps: {
children: "children",
label: "label",
},
rules: {},
executionTimeButton: 1,
executionTimeData: [{ day: "", time: "", id: Date.now() }],
weekData: [
{ name: "周一", id: "0" },
{ name: "周二", id: "1" },
{ name: "周三", id: "2" },
{ name: "周四", id: "3" },
{ name: "周五", id: "4" },
{ name: "周六", id: "5" },
{ name: "周日", id: "6" },
],
dialogTableVisibleStep: 0,
transferData: [
{
key: 1,
label: "北京",
comment: 123,
tabname: 12222,
},
],
transferValue: [],
copyDialogVisible: false,
};
},
mounted() {
this.init();
},
methods: {
init() {
getList(this.queryParams).then((res) => {
console.log(res);
if (res.code == 200) {
this.loading = false;
this.dataList = res.rows;
this.total = res.total;
}
});
},
// 查询
handleQuery() {
this.init();
},
// 重置
resetQuery() {
this.queryParams = {
pageNum: 1,
pageSize: 10,
};
this.init();
},
// 新增
handleAdd() {
this.dialogTableVisible = true;
},
// 多选删除
handleDelete() {},
// 多选框选中数据
handleSelectionChange(selection) {
// this.ids = selection.map((item) => item.roleId);
},
cancel() {
this.dialogTableVisible = false;
this.dialogForm = {};
},
// 弹框tree树选择
handleCheckChange(data) {
console.log(data.id);
},
// 弹框下一步
submitForm() {
// ...
this.active = 1;
this.dialogTableVisibleStep = 1;
},
resetForm() {},
// 添加任务执行时间输入框
executionTimeBtn() {
if (this.executionTimeData.length <= 6) {
this.executionTimeData.push({ day: "", time: "", id: Date.now() });
}
},
executionTimeDelet(row) {
if (this.executionTimeData.length > 1) {
this.executionTimeData = this.executionTimeData.filter(
(item) => item.id != row.id
);
console.log(this.executionTimeData);
}
},
// 复制任务
handleCopy(row) {
this.copyDialogVisible = true;
},
// 编辑任务
handleUpdate(row){
this.dialogTableVisible = true;
}
},
};
</script>
<style lang="scss" scoped>
.cycle2 {
padding: 10px;
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
}
.dialogTableVisibleStep1 {
display: flex;
justify-content: space-around;
}
.dialogTableVisibleStep1-content {
width: 30%;
// height: 200px;
.leftTotle {
font-size: 20px;
margin-bottom: 10px;
}
.el-input {
width: 75%;
}
}
</style>

Write Preview
Loading…
Cancel
Save