Browse Source

1.系添加项目管理页面

2.设备台账管理添加所属分区ID、安装位置、生产日期、购置日期、品牌责任人
bl_ers
selia-zx 2 days ago
parent
commit
86c77ee0b4
  1. 44
      src/api/system/project.js
  2. 92
      src/views/device/ledger/index.vue
  3. 576
      src/views/system/project/index.vue

44
src/api/system/project.js

@ -0,0 +1,44 @@
import request from "@/utils/request";
/** 查询项目信息列表 */
export function projectList(query) {
return request({
url: "/project/info/list",
method: "get",
params: query,
});
}
/** 根据id查询项目详情 */
export function getProject(projectId) {
return request({
url: "/project/info/" + projectId,
method: "get",
});
}
/** 新增项目信息 */
export function addProject(data) {
return request({
url: "/project/info",
method: "post",
data: data,
});
}
/** 修改项目信息 */
export function updateProject(data) {
return request({
url: "/project/info",
method: "put",
data: data,
});
}
/** 删除项目信息 */
export function delProject(projectIds) {
return request({
url: "/project/info/" + projectIds,
method: "delete",
});
}

92
src/views/device/ledger/index.vue

@ -150,11 +150,6 @@
</el-table-column> </el-table-column>
<el-table-column label="技术参数描述" align="center" prop="techParams" /> <el-table-column label="技术参数描述" align="center" prop="techParams" />
<el-table-column label="设备文档" align="center" prop="techDoc" /> <el-table-column label="设备文档" align="center" prop="techDoc" />
<el-table-column label="安装日期" align="center" prop="installTime">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.installTime) }}</span>
</template>
</el-table-column>
<el-table-column label="是否需要采集" align="center" prop="isCollection"> <el-table-column label="是否需要采集" align="center" prop="isCollection">
<template slot-scope="scope"> <template slot-scope="scope">
<span v-if="scope.row.isCollection === 0"></span> <span v-if="scope.row.isCollection === 0"></span>
@ -181,10 +176,33 @@
/> />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="所属分区ID" align="center" prop="zoneId" />
<el-table-column label="安装位置" align="center" prop="installLocation" />
<el-table-column label="安装日期" align="center" prop="installTime">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.installTime) }}</span>
</template>
</el-table-column>
<el-table-column label="生产日期" align="center" prop="productionTime">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.productionTime) }}</span>
</template>
</el-table-column>
<el-table-column label="购置日期" align="center" prop="purchaseTime">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.purchaseTime) }}</span>
</template>
</el-table-column>
<el-table-column label="品牌" align="center" prop="brand" />
<el-table-column
label="品牌负责人"
align="center"
prop="personInCharge"
/>
<el-table-column <el-table-column
label="操作" label="操作"
align="center" align="center"
class-name="small-padding fixed-width" width="130"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
@ -359,6 +377,68 @@
</el-select> </el-form-item </el-select> </el-form-item
></el-col> ></el-col>
</el-row> </el-row>
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item label="所属分区ID" prop="zoneId">
<el-input
v-model="form.zoneId"
placeholder="请输入所属分区ID"
clearable
/> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="安装位置" prop="installLocation">
<el-input
v-model="form.installLocation"
placeholder="请输入安装位置"
clearable
/>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item label="生产日期" prop="productionTime">
<el-date-picker
value-format="yyyy-MM-dd HH:mm:ss"
v-model="form.productionTime"
type="datetime"
placeholder="选择生产日期"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="购置日期" prop="purchaseTime">
<el-date-picker
value-format="yyyy-MM-dd HH:mm:ss"
v-model="form.purchaseTime"
type="datetime"
placeholder="选择购置日期"
>
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item label="品牌" prop="brand">
<el-input
v-model="form.brand"
placeholder="请输入品牌"
clearable
/> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="品牌负责人" prop="personInCharge">
<el-input
v-model="form.personInCharge"
placeholder="请输入品牌负责人"
clearable
/>
</el-form-item>
</el-col>
</el-row>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button @click="cancel"> </el-button> <el-button @click="cancel"> </el-button>

576
src/views/system/project/index.vue

@ -0,0 +1,576 @@
<template>
<div class="app-container">
<div class="btn-condition">
<div class="condition-left" v-show="showSearch">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
>
<el-form-item label="项目名称" prop="projectName">
<el-input
v-model="queryParams.projectName"
placeholder="请输入项目名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="项目负责人" prop="projectManager">
<el-input
v-model="queryParams.projectManager"
placeholder="请输入项目负责人"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="安装日期范围" prop="timeArr">
<el-date-picker
style="width: 220px"
v-model="timeArr"
type="daterange"
unlink-panels
range-separator="~"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
@change="dateChange"
>
</el-date-picker>
</el-form-item>
</el-form>
<div class="primary-btn">
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
</div>
<div class="cancel-btn">
<el-button
type="cancel"
icon="el-icon-refresh"
size="mini"
@click="resetQuery"
>重置</el-button
>
</div>
</div>
</div>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<div class="primary-btn" v-hasPermi="['project:info:add']">
<el-button
type="primary"
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新增</el-button
>
</div>
</el-col>
<el-col :span="1.5">
<div class="success-btn" v-hasPermi="['project:info:edit']">
<el-button
type="success"
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
>修改</el-button
>
</div>
</el-col>
<el-col :span="1.5">
<div class="delete-btn" v-hasPermi="['project:info:remove']">
<el-button
type="delete"
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
>删除</el-button
>
</div>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table
v-loading="loading"
:data="postList"
@selection-change="handleSelectionChange"
stripe
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="项目编码" align="center" prop="projectCode" />
<el-table-column label="项目名称" align="center" prop="projectName" />
<el-table-column label="项目地址" align="center" prop="projectAddress" />
<el-table-column label="安装日期" align="center" prop="installDate">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.installDate) }}</span>
</template>
</el-table-column>
<el-table-column label="验收日期" align="center" prop="acceptanceDate">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.acceptanceDate) }}</span>
</template>
</el-table-column>
<el-table-column label="上线日期" align="center" prop="onlineDate">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.onlineDate) }}</span>
</template>
</el-table-column>
<el-table-column label="设备数量" align="center" prop="deviceCount" />
<el-table-column label="在线设备" align="center" prop="onlineDeviceCount" />
<el-table-column label="离线设备" align="center" prop="offlineDeviceCount" />
<el-table-column label="网关数量" align="center" prop="gatewayCount" />
<el-table-column label="在线网关" align="center" prop="onlineGatewayCount" />
<el-table-column label="离线网关" align="center" prop="offlineGatewayCount" />
<el-table-column label="项目负责人" align="center" prop="projectManager" />
<el-table-column label="电单价" align="center" prop="electricityPrice" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
width="120"
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['project:info:edit']"
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['project:info: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"
/>
<!-- 添加或修改项目信息对话框 -->
<el-dialog :title="title" :visible.sync="open" append-to-body>
<el-form ref="form" :model="form" :rules="rules">
<el-row>
<el-col :span="12">
<el-form-item label="项目编码" prop="projectCode">
<el-input
v-model="form.projectCode"
placeholder="请输入项目编码"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="项目名称" prop="projectName">
<el-input
v-model="form.projectName"
placeholder="请输入项目名称"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="项目地址" prop="projectAddress">
<el-input
v-model="form.projectAddress"
placeholder="请输入项目地址"
clearable
/> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="项目负责人" prop="projectManager">
<el-input
v-model="form.projectManager"
placeholder="请输入项目负责人"
clearable
/> </el-form-item
></el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="安装日期" prop="installDate">
<el-date-picker
value-format="yyyy-MM-dd HH:mm:ss"
v-model="form.installDate"
type="datetime"
placeholder="选择安装日期"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="验收日期" prop="acceptanceDate">
<el-date-picker
value-format="yyyy-MM-dd HH:mm:ss"
v-model="form.acceptanceDate"
type="datetime"
placeholder="选择验收日期"
>
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="上线日期" prop="onlineDate">
<el-date-picker
value-format="yyyy-MM-dd HH:mm:ss"
v-model="form.onlineDate"
type="datetime"
placeholder="选择上线日期"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="电单价" prop="electricityPrice">
<el-input
v-model="form.electricityPrice"
placeholder="请输入电单价"
clearable
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="设备数量" prop="deviceCount">
<el-input
v-model="form.deviceCount"
placeholder="请输入设备数量"
clearable
/> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="在线设备数量" prop="onlineDeviceCount">
<el-input
v-model="form.onlineDeviceCount"
placeholder="请输入在线设备数量"
clearable
/> </el-form-item
></el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="离线设备数量" prop="offlineDeviceCount">
<el-input
v-model="form.offlineDeviceCount"
placeholder="请输入离线设备数量"
clearable
/> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="网关数量" prop="gatewayCount">
<el-input
v-model="form.gatewayCount"
placeholder="请输入网关数量"
clearable
/> </el-form-item
></el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="在线网关数量" prop="onlineGatewayCount">
<el-input
v-model="form.onlineGatewayCount"
placeholder="请输入在线网关数量"
clearable
/> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="离线网关数量" prop="offlineGatewayCount">
<el-input
v-model="form.offlineGatewayCount"
placeholder="请输入离线网关数量"
clearable
/> </el-form-item
></el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="备注" prop="remark">
<el-input
v-model="form.remark"
placeholder="请输入备注"
type="textarea"
clearable
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel"> </el-button>
<el-button type="primary" @click="submitForm"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
projectList,
getProject,
delProject,
addProject,
updateProject,
} from "@/api/system/project";
export default {
name: "project",
data() {
return {
timeArr: [],
//
loading: true,
//
ids: [],
//
single: true,
//
multiple: true,
//
showSearch: true,
//
total: 0,
//
postList: [],
//
title: "",
//
open: false,
//
queryParams: {
pageNum: 1,
pageSize: 10,
projectName: "",
projectManager: "",
params: {
beginTime: "",
endTime: "",
},
},
//
form: {},
//
rules: {
projectCode: [
{ required: true, message: "项目编码不能为空", trigger: "blur" },
],
projectName: [
{ required: true, message: "项目名称不能为空", trigger: "blur" },
],
},
};
},
created() {
this.getList();
},
methods: {
/** 选中日期事件 */
dateChange() {
if (!this.timeArr) {
this.$nextTick(() => {
this.timeArr = [];
this.queryParams.params.beginTime = "";
this.queryParams.params.endTime = "";
});
} else {
this.queryParams.params.beginTime = this.timeArr[0];
this.queryParams.params.endTime = this.timeArr[1];
}
},
/** 查询项目信息列表 */
getList() {
this.loading = true;
projectList(this.queryParams).then((response) => {
this.postList = response.rows;
this.total = response.total;
this.loading = false;
});
},
/** 取消按钮 */
cancel() {
this.open = false;
this.reset();
this.form.id = "";
},
/** 表单重置 */
reset() {
this.form = {
projectCode: "",
projectName: "",
projectAddress: "",
installDate: "",
acceptanceDate: "",
onlineDate: "",
deviceCount: "",
onlineDeviceCount: "",
offlineDeviceCount: "",
gatewayCount: "",
onlineGatewayCount: "",
offlineGatewayCount: "",
projectManager: "",
electricityPrice: "",
remark: "",
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.timeArr = [];
this.queryParams.params.beginTime = "";
this.queryParams.params.endTime = "";
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();
this.form.id = "";
const projectId = row.id || this.ids;
getProject(projectId).then((response) => {
this.form = {
id: response.data.id,
projectCode: response.data.projectCode,
projectName: response.data.projectName,
projectAddress: response.data.projectAddress,
installDate: response.data.installDate,
acceptanceDate: response.data.acceptanceDate,
onlineDate: response.data.onlineDate,
deviceCount: response.data.deviceCount,
onlineDeviceCount: response.data.onlineDeviceCount,
offlineDeviceCount: response.data.offlineDeviceCount,
gatewayCount: response.data.gatewayCount,
onlineGatewayCount: response.data.onlineGatewayCount,
offlineGatewayCount: response.data.offlineGatewayCount,
projectManager: response.data.projectManager,
electricityPrice: response.data.electricityPrice,
remark: response.data.remark,
};
this.open = true;
this.title = "修改项目信息";
});
},
/** 提交按钮 */
submitForm: function () {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.id != undefined) {
updateProject(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addProject(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const Ids = row.id || this.ids;
/** 获取项目名称:单条删除取当前行名称,批量删除从表格数据中查找名称拼接 */
let projectName;
if (row.projectName) {
projectName = row.projectName;
} else {
const selectedNames = this.postList
.filter((item) => this.ids.includes(item.id))
.map((item) => item.projectName)
.join("、");
projectName = selectedNames || Ids;
}
this.$modal
.confirm('是否确认删除项目名称为"' + projectName + '"的数据项?')
.then(function () {
return delProject(Ids);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
},
};
</script>
<style scoped lang="scss">
/* 媒体查询,适配大于2000px分辨率的大屏样式 - element样式 */
@media (max-width: 2000px) {
::v-deep .el-dialog {
width: 700px !important;
}
::v-deep .el-form-item--medium .el-form-item__content {
width: 100%;
}
::v-deep .el-dialog .el-form-item__label {
width: 150px !important;
}
::v-deep .el-dialog .el-form-item {
display: flex;
flex-direction: row;
align-items: center;
}
}
@media (min-width: 2000px) {
::v-deep .el-dialog {
width: 7rem !important;
}
::v-deep .el-dialog .el-form-item__label {
width: 1.5rem !important;
}
::v-deep .el-dialog .el-form-item {
display: flex;
flex-direction: row;
align-items: center;
}
}
</style>
Loading…
Cancel
Save