🌷 UI(项目、报警): 项目列表、我的项目添加卡片式页面，报警记录（平台）添加项目查询和展示，git过滤dist压缩包
This commit is contained in:
fhysy
parent
d0b3aaaa4b
commit
2609352f30
|
|
@ -29,7 +29,7 @@ VUE_APP_LOGIN_PAGE = 'login-blue-white'
|
|||
# 系统配色 theme-green、theme-blue-black、theme-blue-white
|
||||
#VUE_APP_THEME_CLASS = 'theme-green'
|
||||
#VUE_APP_THEME_CLASS = 'theme-blue-black'
|
||||
VUE_APP_THEME_CLASS = 'theme-blue-white'
|
||||
VUE_APP_THEME_CLASS = 'theme-green'
|
||||
|
||||
# 智慧用电管理系统/开发环境
|
||||
VUE_APP_BASE_API = '/dev-api'
|
||||
|
|
|
|||
|
|
@ -21,5 +21,5 @@ selenium-debug.log
|
|||
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
/dist.zip
|
||||
/dist*.zip
|
||||
/src/assets/download.zip
|
||||
|
|
|
|||
|
|
@ -2,39 +2,49 @@
|
|||
<!-- 告警记录功能 -->
|
||||
<div class="app-container alarm-record">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
v-show="showSearch"
|
||||
ref="queryForm"
|
||||
:inline="true"
|
||||
v-show="showSearch"
|
||||
:model="queryParams"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="所属项目" prop="inProject">
|
||||
<el-select v-model="queryParams.inProject" clearable placeholder="请选择所属项目" size="small">
|
||||
<el-option
|
||||
v-for="(item, index) in inProjectList"
|
||||
:key="item.projectId"
|
||||
:label="item.projectName"
|
||||
:value="item.projectId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="报警时间" prop="alarmTime">
|
||||
<el-date-picker
|
||||
v-model="time"
|
||||
size="small"
|
||||
@change="queryTimeChange"
|
||||
clearable
|
||||
type="datetimerange"
|
||||
:default-time="['00:00:00', '23:59:59']"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
clearable
|
||||
end-placeholder="结束日期"
|
||||
range-separator="至"
|
||||
size="small"
|
||||
start-placeholder="开始日期"
|
||||
type="datetimerange"
|
||||
@change="queryTimeChange"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="告警类型" prop="typeName">
|
||||
<el-input
|
||||
v-model="queryParams.typeName"
|
||||
placeholder="请输入告警类型"
|
||||
clearable
|
||||
placeholder="请输入告警类型"
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
size="mini"
|
||||
type="primary"
|
||||
@click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
|
|
@ -42,10 +52,10 @@
|
|||
>重置</el-button
|
||||
>
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
plain
|
||||
size="mini"
|
||||
type="warning"
|
||||
@click="handleExport"
|
||||
>导出</el-button
|
||||
>
|
||||
|
|
@ -59,29 +69,30 @@
|
|||
@sort-change="sortChange"
|
||||
>
|
||||
<el-table-column
|
||||
type="index"
|
||||
label="序号"
|
||||
align="center"
|
||||
:index="indexFormatter"
|
||||
align="center"
|
||||
label="序号"
|
||||
type="index"
|
||||
width="80px"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
label="设备名称"
|
||||
align="left"
|
||||
width="200px"
|
||||
label="设备名称"
|
||||
prop="deviceName"
|
||||
width="200px"
|
||||
/>
|
||||
<!-- <el-table-column label="设备当前值" align="left" prop="currentValue" >
|
||||
<template slot-scope="scope">
|
||||
<span style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">{{scope.row.currentValue}}</span>
|
||||
</template>
|
||||
</el-table-column>-->
|
||||
<el-table-column label="推送内容" align="left" prop="alarmContent" />
|
||||
<el-table-column align="center" label="所属项目" prop="inProjectName" />
|
||||
<el-table-column align="left" label="推送内容" prop="alarmContent" />
|
||||
<el-table-column
|
||||
label="报警时间"
|
||||
align="center"
|
||||
sortable="custom"
|
||||
label="报警时间"
|
||||
prop="alarmTime"
|
||||
sortable="custom"
|
||||
width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
|
|
@ -91,21 +102,21 @@
|
|||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="处理状态"
|
||||
width="100px"
|
||||
align="center"
|
||||
prop="processState"
|
||||
:formatter="stateFormatter"
|
||||
/>
|
||||
<el-table-column
|
||||
label="处理结果"
|
||||
align="left"
|
||||
width="150px"
|
||||
prop="processResult"
|
||||
/>
|
||||
<el-table-column
|
||||
label="处理时间"
|
||||
align="center"
|
||||
label="处理状态"
|
||||
prop="processState"
|
||||
width="100px"
|
||||
/>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="处理结果"
|
||||
prop="processResult"
|
||||
width="150px"
|
||||
/>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="处理时间"
|
||||
prop="processTime"
|
||||
sortable="custom"
|
||||
width="150"
|
||||
|
|
@ -117,30 +128,30 @@
|
|||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="告警类型"
|
||||
align="left"
|
||||
width="150px"
|
||||
label="告警类型"
|
||||
prop="typeName"
|
||||
width="150px"
|
||||
/>
|
||||
<!-- <el-table-column label="类型编码" align="left" width="150px" prop="typeCode" /> -->
|
||||
<el-table-column
|
||||
label="操作"
|
||||
width="150"
|
||||
align="center"
|
||||
class-name="small-padding fixed-width"
|
||||
label="操作"
|
||||
width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-show="scope.row.processStatus === '0'"
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
v-show="scope.row.processStatus === '0'"
|
||||
@click="handleUpdate(scope.row)"
|
||||
>处理</el-button>
|
||||
<el-button
|
||||
icon="el-icon-document-add"
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-document-add"
|
||||
@click="handleWork(scope.row)"
|
||||
>创建工单</el-button
|
||||
>
|
||||
|
|
@ -150,28 +161,28 @@
|
|||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
<dialog-template :title="title" :visible="open" @close="open = false"
|
||||
class="eldialog-wrap"
|
||||
<dialog-template :title="title" :visible="open" class="eldialog-wrap"
|
||||
width="600px"
|
||||
@close="open = false"
|
||||
>
|
||||
<el-form
|
||||
ref="dialogForm"
|
||||
:model="form"
|
||||
slot="dialog-center"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="处理结果:" prop="processResult">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="2"
|
||||
v-model="form.processResult"
|
||||
:rows="2"
|
||||
placeholder="请输入处理结果"
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
|
@ -189,6 +200,7 @@
|
|||
import { listRecord, getRecord, exportRecord, addAlarmRecord, updateRecord, handlerRecord } from "@/api/alarm/record";
|
||||
import DialogTemplate from "@/components/DialogTemplate";
|
||||
import Editor from "@/components/Editor";
|
||||
import { listProject } from "@/api/tenant/project";
|
||||
|
||||
export default {
|
||||
name: "Record",
|
||||
|
|
@ -222,6 +234,7 @@ export default {
|
|||
pageSize: 10,
|
||||
typeName: null,
|
||||
typeCode: null,
|
||||
inProject: null,
|
||||
beginTime: null,
|
||||
endTime: null,
|
||||
alarmDivide: "ALARM",
|
||||
|
|
@ -233,12 +246,25 @@ export default {
|
|||
// 表单校验
|
||||
rules: {},
|
||||
time: [],
|
||||
inProjectList:[],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.getInProjectList();
|
||||
},
|
||||
methods: {
|
||||
// 查询所属项目列表
|
||||
getInProjectList() {
|
||||
listProject({
|
||||
pageNum: 1,
|
||||
pageSize: 100,
|
||||
orderByColumn: 'createTime',
|
||||
isAsc: 'desc'
|
||||
}).then(response => {
|
||||
this.inProjectList = response.rows;
|
||||
});
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs["dialogForm"].validate((v) => {
|
||||
if (v) {
|
||||
|
|
|
|||
|
|
@ -8,17 +8,17 @@
|
|||
|
||||
<div v-show="componectVal === ''">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
v-show="showSearch"
|
||||
ref="queryForm"
|
||||
:inline="true"
|
||||
v-show="showSearch"
|
||||
:model="queryParams"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="项目名称" prop="projectName">
|
||||
<el-input
|
||||
v-model="queryParams.projectName"
|
||||
placeholder="请输入项目名称"
|
||||
clearable
|
||||
placeholder="请输入项目名称"
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
|
|
@ -26,8 +26,8 @@
|
|||
<el-form-item label="项目类型" prop="industry">
|
||||
<el-select
|
||||
v-model="queryParams.industry"
|
||||
placeholder="请选择项目类型"
|
||||
clearable
|
||||
placeholder="请选择项目类型"
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
|
|
@ -40,9 +40,9 @@
|
|||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
size="mini"
|
||||
type="primary"
|
||||
@click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
|
|
@ -55,106 +55,150 @@
|
|||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['iot:project:add']"
|
||||
icon="el-icon-plus"
|
||||
plain
|
||||
size="mini"
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
>新增</el-button
|
||||
>
|
||||
</el-col>
|
||||
<right-toolbar
|
||||
:showSearch.sync="showSearch"
|
||||
:view-type="viewType"
|
||||
@changeViewType="changeViewType"
|
||||
@queryTable="getList"
|
||||
></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
v-if="viewType!='card'"
|
||||
v-loading="loading"
|
||||
:data="projectList"
|
||||
:default-sort="{ prop: 'createTime', order: 'descending' }"
|
||||
@sort-change="sortChange"
|
||||
>
|
||||
<el-table-column
|
||||
type="index"
|
||||
label="序号"
|
||||
align="center"
|
||||
:index="indexFormatter"
|
||||
width="80px"
|
||||
align="center"
|
||||
label="序号"
|
||||
type="index"
|
||||
width="60px"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="项目名称"
|
||||
width="200px"
|
||||
align="left"
|
||||
prop="projectName"
|
||||
/>
|
||||
<el-table-column
|
||||
label="项目类型"
|
||||
align="center"
|
||||
width="150"
|
||||
:formatter="statusFormat"
|
||||
align="center"
|
||||
label="项目类型"
|
||||
prop="industry"
|
||||
width="80"
|
||||
/>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="行政区划"
|
||||
align="left"
|
||||
width="250"
|
||||
prop="regionalismFullName"
|
||||
width="160"
|
||||
/>
|
||||
<el-table-column label="项目地址" align="left" prop="projectAddress">
|
||||
<el-table-column align="center" label="项目地址" prop="projectAddress">
|
||||
<template slot-scope="scope">
|
||||
<span class="lay-table-textarea" :title="scope.row.projectAddress">
|
||||
{{ scope.row.projectAddress }}
|
||||
</span>
|
||||
<el-tooltip :content="scope.row.projectAddress" effect="dark" placement="top">
|
||||
<span class="lay-table-textarea">{{ scope.row.projectAddress }}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
sortable="custom"
|
||||
align="center"
|
||||
width="160"
|
||||
label="创建时间"
|
||||
prop="createTime"
|
||||
sortable="custom"
|
||||
width="160"
|
||||
/>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
width="200"
|
||||
class-name="small-padding fixed-width"
|
||||
label="操作"
|
||||
width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
icon="el-icon-search"
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-search"
|
||||
@click="handleDetails(scope.row)"
|
||||
>详情</el-button
|
||||
>
|
||||
<el-button
|
||||
v-hasPermi="['iot:project:edit']"
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['iot:project:edit']"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button
|
||||
v-hasPermi="['iot:project:remove']"
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['iot:project:remove']"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div v-else class="card-list-box">
|
||||
<el-row :gutter="20">
|
||||
<el-col v-for="(item, index) in projectList" :key="index" :lg="8" :md="12" :sm="12" :xs="24" class="card-item-col">
|
||||
<div class="card-item">
|
||||
<div class="card-header">
|
||||
<div class="card-header-top">
|
||||
<div class="device-img-box">
|
||||
<el-image
|
||||
:preview-src-list="['http://static.drgyen.com/pc/smart-power-ui/device/device-number.png']"
|
||||
:src="'http://static.drgyen.com/pc/smart-power-ui/device/device-number.png'"
|
||||
style="width: 100%; height: 100%">
|
||||
</el-image>
|
||||
</div>
|
||||
<div class="card-item-name">{{ item.projectName }}</div>
|
||||
</div>
|
||||
<div class="card-item-address">项目地址:{{ item.projectAddress }}</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="info-item">
|
||||
<span class="label">类型：</span>
|
||||
<span class="value">{{ statusFormat(item) }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">创建时间：</span>
|
||||
<el-tooltip :content="item.createTime" effect="dark" placement="top">
|
||||
<span class="value">{{ item.createTime }}</span>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<el-button icon="el-icon-search" type="text" @click="handleDetails(item)">查看详情</el-button>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<el-button v-hasPermi="['iot:project:edit']" icon="el-icon-edit" type="text" @click="handleUpdate(item)">修改</el-button>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<el-button v-hasPermi="['iot:project:remove']" icon="el-icon-delete" type="text" @click="handleDelete(item)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
:page-sizes="[12, 24, 36, 60]"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
|
|
@ -162,16 +206,16 @@
|
|||
<dialog-template
|
||||
:title="title"
|
||||
:visible="open"
|
||||
@close="open = false"
|
||||
class="eldialog-wrap"
|
||||
width="720px"
|
||||
@close="open = false"
|
||||
>
|
||||
<el-form
|
||||
ref="form"
|
||||
slot="dialog-center"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
slot="dialog-center"
|
||||
>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
|
|
@ -187,8 +231,8 @@
|
|||
<el-form-item label="项目类型:" prop="industry">
|
||||
<el-select
|
||||
v-model="form.industry"
|
||||
style="width: 100%"
|
||||
placeholder="请选择项目类型"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in projectTypeOptions"
|
||||
|
|
@ -203,13 +247,13 @@
|
|||
|
||||
<el-form-item label="电价合同:">
|
||||
<e-dialog-table-input
|
||||
:table="selectPriceTable"
|
||||
:refurbishFun="listContract"
|
||||
showFileName="contractName"
|
||||
fileName="contractId,contractName"
|
||||
v-model="form.contractName"
|
||||
title="合同"
|
||||
:refurbishFun="listContract"
|
||||
:table="selectPriceTable"
|
||||
fileName="contractId,contractName"
|
||||
psize="small"
|
||||
showFileName="contractName"
|
||||
title="合同"
|
||||
@change="handleProiceDialogEvent"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
|
@ -217,12 +261,12 @@
|
|||
<el-form-item label="行政区划" prop="regionalismId">
|
||||
<!-- <el-input v-model="form.regionalismId" placeholder="请输入行政区划代码" /> -->
|
||||
<treeselect
|
||||
@select="regionalismChange"
|
||||
:disable-branch-nodes="true"
|
||||
v-model="form.regionalismId"
|
||||
:options="regionalismOption"
|
||||
:disable-branch-nodes="true"
|
||||
:normalizer="normalizer"
|
||||
:options="regionalismOption"
|
||||
placeholder="请选择上级行政区划"
|
||||
@select="regionalismChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
|
|
@ -253,16 +297,16 @@
|
|||
<el-form-item label="项目地址" prop="projectAddress">
|
||||
<el-input
|
||||
v-model="form.projectAddress"
|
||||
@blur="mapAddressFromPoint"
|
||||
placeholder="请输入项目地址"
|
||||
@blur="mapAddressFromPoint"
|
||||
>
|
||||
<el-popover
|
||||
slot="suffix"
|
||||
v-model="visible"
|
||||
placement="left-start"
|
||||
title="地图选择坐标"
|
||||
width="730"
|
||||
trigger="manual"
|
||||
v-model="visible"
|
||||
width="730"
|
||||
>
|
||||
<i
|
||||
slot="reference"
|
||||
|
|
@ -285,11 +329,11 @@
|
|||
|
||||
<shop-location
|
||||
v-if="visible === true"
|
||||
style="height: 300px"
|
||||
:mapCenter="mapCenter"
|
||||
:draggable="true"
|
||||
@mapEvent="mapEvent"
|
||||
:mapCenter="mapCenter"
|
||||
:zoom="zoom"
|
||||
style="height: 300px"
|
||||
@mapEvent="mapEvent"
|
||||
/>
|
||||
|
||||
<div
|
||||
|
|
@ -345,13 +389,13 @@
|
|||
|
||||
<el-form-item label="总路设备:">
|
||||
<e-dialog-table-input
|
||||
:table="selectDeviceTable"
|
||||
:refurbishFun="listDevice"
|
||||
showFileName="deviceName"
|
||||
fileName="deviceId,deviceName"
|
||||
v-model="form.projectDeviceName"
|
||||
title="设备"
|
||||
:refurbishFun="listDevice"
|
||||
:table="selectDeviceTable"
|
||||
fileName="deviceId,deviceName"
|
||||
psize="small"
|
||||
showFileName="deviceName"
|
||||
title="设备"
|
||||
@change="handleDeviceDialogEvent"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
|
@ -557,6 +601,8 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
//列表显示视图
|
||||
viewType: "card",
|
||||
selectPriceTable,
|
||||
selectDeviceTable,
|
||||
selectTableShow: false,
|
||||
|
|
@ -583,7 +629,7 @@ export default {
|
|||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
pageSize: 12,
|
||||
projectName: null,
|
||||
industry: null,
|
||||
regionalismId: null,
|
||||
|
|
@ -656,6 +702,9 @@ export default {
|
|||
this.form.projectDeviceName = e.deviceName;
|
||||
this.$forceUpdate();
|
||||
},
|
||||
changeViewType(type) {
|
||||
this.viewType=type;
|
||||
},
|
||||
sortChange(column) {
|
||||
const sort = {
|
||||
isAsc: column.order === "descending" ? "desc" : "asc",
|
||||
|
|
@ -946,4 +995,109 @@ export default {
|
|||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
// 卡片视图样式
|
||||
.card-list-box {
|
||||
.card-item-col {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.card-item {
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #ebeef5;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
color: #303133;
|
||||
transition: 0.3s;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
|
||||
//border: 1px solid #409EFF;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 10px 20px 0px 20px;
|
||||
.card-header-top{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.device-img-box{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.card-item-name {
|
||||
margin-left: 10px;
|
||||
font-size: 18px;
|
||||
line-height: 18px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: calc(100% - 110px);
|
||||
}
|
||||
}
|
||||
|
||||
.card-item-address{
|
||||
height: 32px;
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
line-height: 16px;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2; /* 限制显示的行数 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.card-content {
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
font-size: 11px;
|
||||
width: 50%;
|
||||
.label {
|
||||
color: #909399;
|
||||
width: 35px;
|
||||
}
|
||||
.value {
|
||||
width: calc(100% - 35px);
|
||||
color: #606266;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
&:nth-child(2n){
|
||||
width: 50%;
|
||||
.label {
|
||||
width: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding: 10px 15px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
|
||||
.el-button {
|
||||
padding: 5px 8px;
|
||||
|
||||
&:hover {
|
||||
color: #409EFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,23 +4,23 @@
|
|||
|
||||
<div v-show="componectVal === ''">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
v-show="showSearch"
|
||||
ref="queryForm"
|
||||
:inline="true"
|
||||
v-show="showSearch"
|
||||
:model="queryParams"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="项目名称" prop="projectName">
|
||||
<el-input
|
||||
v-model="queryParams.projectName"
|
||||
placeholder="请输入项目名称"
|
||||
clearable
|
||||
placeholder="请输入项目名称"
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="项目类型" prop="industry">
|
||||
<el-select v-model="queryParams.industry" placeholder="请选择项目类型" clearable size="small">
|
||||
<el-select v-model="queryParams.industry" clearable placeholder="请选择项目类型" size="small">
|
||||
<el-option
|
||||
v-for="dict in projectTypeOptions"
|
||||
:key="dict.dictValue"
|
||||
|
|
@ -30,63 +30,131 @@
|
|||
</el-select>
|
||||
</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-search" size="mini" type="primary" @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
|
||||
v-hasPermi="['iot:project:add']"
|
||||
icon="el-icon-plus"
|
||||
plain
|
||||
size="mini"
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
>新增</el-button
|
||||
>
|
||||
</el-col>
|
||||
<right-toolbar
|
||||
:showSearch.sync="showSearch"
|
||||
:view-type="viewType"
|
||||
@changeViewType="changeViewType"
|
||||
@queryTable="getList"
|
||||
></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
v-if="viewType!='card'"
|
||||
v-loading="loading"
|
||||
:data="projectList"
|
||||
:default-sort="{prop: 'createTime', order: 'descending'}"
|
||||
@sort-change="sortChange"
|
||||
>
|
||||
<el-table-column
|
||||
type="index"
|
||||
label="序号"
|
||||
align="center"
|
||||
:index="indexFormatter"
|
||||
width="80px"
|
||||
align="center"
|
||||
label="序号"
|
||||
type="index"
|
||||
width="60px"
|
||||
></el-table-column>
|
||||
<el-table-column label="项目名称" width="200px" align="left" prop="projectName" />
|
||||
<el-table-column align="center" label="项目名称" prop="projectName" />
|
||||
<el-table-column
|
||||
label="项目类型"
|
||||
align="center"
|
||||
width="150"
|
||||
:formatter="statusFormat"
|
||||
align="center"
|
||||
label="项目类型"
|
||||
prop="industry"
|
||||
width="80"
|
||||
/>
|
||||
<el-table-column label="行政区划" align="left" width="250" prop="regionalismFullName" />
|
||||
<el-table-column label="项目地址" align="left" prop="projectAddress" />
|
||||
<el-table-column align="center" label="行政区划" prop="regionalismFullName" width="160" />
|
||||
<el-table-column align="center" label="项目地址" prop="projectAddress">
|
||||
<template slot-scope="scope">
|
||||
<el-tooltip :content="scope.row.projectAddress" effect="dark" placement="top">
|
||||
<span class="lay-table-textarea">{{ scope.row.projectAddress }}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="创建时间"
|
||||
sortable="custom"
|
||||
align="center"
|
||||
width="160"
|
||||
prop="createTime"
|
||||
sortable="custom"
|
||||
width="160"
|
||||
/>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
width="200"
|
||||
class-name="small-padding fixed-width"
|
||||
label="操作"
|
||||
width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
icon="el-icon-search"
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-search"
|
||||
@click="handleDetails(scope.row)"
|
||||
>详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div v-else class="card-list-box">
|
||||
<el-row :gutter="20">
|
||||
<el-col v-for="(item, index) in projectList" :key="index" :lg="8" :md="12" :sm="12" :xs="24" class="card-item-col">
|
||||
<div class="card-item">
|
||||
<div class="card-header">
|
||||
<div class="card-header-top">
|
||||
<div class="device-img-box">
|
||||
<el-image
|
||||
:src="'http://static.drgyen.com/pc/smart-power-ui/device/device-number.png'"
|
||||
style="width: 100%; height: 100%">
|
||||
</el-image>
|
||||
</div>
|
||||
<div class="card-item-name">{{ item.projectName }}</div>
|
||||
</div>
|
||||
<div class="card-item-address">项目地址:{{ item.projectAddress }}</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="info-item">
|
||||
<span class="label">类型：</span>
|
||||
<span class="value">{{ statusFormat(item) }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">创建时间：</span>
|
||||
<el-tooltip :content="item.createTime" effect="dark" placement="top">
|
||||
<span class="value">{{ item.createTime }}</span>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<el-button icon="el-icon-search" type="text" @click="handleDetails(item)">查看详情</el-button>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<el-button v-hasPermi="['iot:project:edit']" icon="el-icon-edit" type="text" @click="handleUpdate(item)">修改</el-button>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<el-button v-hasPermi="['iot:project:remove']" icon="el-icon-delete" type="text" @click="handleDelete(item)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
:page-sizes="[12, 24, 36, 60]"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
|
|
@ -116,6 +184,8 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
//列表显示视图
|
||||
viewType: "card",
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
|
|
@ -137,7 +207,7 @@ export default {
|
|||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
pageSize: 12,
|
||||
projectName: null,
|
||||
industry: null,
|
||||
regionalismId: null,
|
||||
|
|
@ -171,6 +241,9 @@ export default {
|
|||
this.queryParams = Object.assign(this.queryParams, sort);
|
||||
this.handleQuery();
|
||||
},
|
||||
changeViewType(type) {
|
||||
this.viewType=type;
|
||||
},
|
||||
indexFormatter(val) {
|
||||
return (
|
||||
val + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
|
||||
|
|
@ -293,4 +366,109 @@ export default {
|
|||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
// 卡片视图样式
|
||||
.card-list-box {
|
||||
.card-item-col {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.card-item {
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #ebeef5;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
color: #303133;
|
||||
transition: 0.3s;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
|
||||
//border: 1px solid #409EFF;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 10px 20px 0px 20px;
|
||||
.card-header-top{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.device-img-box{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.card-item-name {
|
||||
margin-left: 10px;
|
||||
font-size: 18px;
|
||||
line-height: 18px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: calc(100% - 110px);
|
||||
}
|
||||
}
|
||||
|
||||
.card-item-address{
|
||||
height: 32px;
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
line-height: 16px;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2; /* 限制显示的行数 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.card-content {
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
font-size: 11px;
|
||||
width: 50%;
|
||||
.label {
|
||||
color: #909399;
|
||||
width: 35px;
|
||||
}
|
||||
.value {
|
||||
width: calc(100% - 35px);
|
||||
color: #606266;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
&:nth-child(2n){
|
||||
width: 50%;
|
||||
.label {
|
||||
width: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding: 10px 15px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
|
||||
.el-button {
|
||||
padding: 5px 8px;
|
||||
|
||||
&:hover {
|
||||
color: #409EFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue