Skip to content

V
video-monitoring
Commit 7c538afe authored by 69237's avatar 69237
Browse files
Options

sunyu 修改全局样式以符合边距要求,修改历史记录页面

parent c50a04de
Hide whitespace changes
Inline Side-by-side
Showing with 132 additions and 115 deletions
src/assets/styles/index.scss
View file @ 7c538afe
......@@ -127,9 +127,9 @@ aside {
margin: 0;
//padding: 0;
overflow: hidden; /* 防止内容溢出 */
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-left: 40px;
padding-right: 40px;
padding-top: 20px;
background-color: #D4D9E5;
}
......
src/views/history/index.vue
View file @ 7c538afe
<template>
<div class="app-container">
<div style="background-color: white;height: 95vh;padding-left: 30px;padding-right: 30px" >
<div style="background-color: white;height: 95vh;padding-left: 30px;padding-right: 30px">
<div>
<span style="display: flex;justify-content: flex-start;align-items: center;"><div style="border: 1px solid #116FBB;width: 2px;height: 20px;margin-right: 5px"></div><h5 style="color: #116FBB;font-weight: bolder">历史记录</h5></span>
<span style="display: flex;justify-content: flex-start;align-items: center;"><div
style="border: 1px solid #116FBB;width: 2px;height: 20px;margin-right: 5px"></div><h5
style="color: #116FBB;font-weight: bolder">历史记录</h5></span>
</div>
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
<el-form-item label="监控点名称：" prop="monitoringName">
<el-input
v-model.trim="queryParams.monitoringName"
placeholder="请输入监控点名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="监控时间：" prop="monitorTime">
<el-date-picker
placeholder="请选择监控时间"
value-format="yyyy-MM-dd"
v-model="queryParams.monitorTime"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
<!-- <el-date-picker clearable-->
<!-- v-model="queryParams.monitorTime"-->
<!-- type="date"-->
<!-- value-format="yyyy-MM-dd"-->
<!-- placeholder="请选择监控时间">-->
<!-- </el-date-picker>-->
</el-form-item>
<!-- <el-form-item label="监控状态" prop="monitorState">-->
<!-- <el-input-->
<!-- v-model="queryParams.monitorState"-->
<!-- placeholder="请输入监控状态"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<el-form-item label="监控状态：" prop="monitorState">
<el-select v-model="queryParams.monitorState" placeholder="请选择监控状态" clearable>
<el-option value="0">进行中</el-option>
<el-option value="1">已完成</el-option>
</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-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
<el-form-item prop="monitoringName">
<el-input
v-model.trim="queryParams.monitoringName"
placeholder="请输入监控点名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item prop="monitorState">
<el-select v-model="queryParams.monitorState" placeholder="请选择监控状态" clearable>
<el-option value="0">进行中</el-option>
<el-option value="1">已完成</el-option>
</el-select>
</el-form-item>
<!-- <el-table v-loading="loading" :data="histableList" @selection-change="handleSelectionChange">-->
<el-table :data="histableList" @selection-change="handleSelectionChange" style="min-height: 650px" >
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" align="center" width="100"/>
<!-- <template slot-scope="scope">-->
<!-- <span>{{ (scope.$index+1)+(queryParams.pageNum-1)*queryParams.pageSize }}</span>-->
<!-- </template>-->
<el-table-column label="监控点名称" align="center" prop="monitoringName" />
<el-table-column label="监控开始时间" align="center" prop="monitoringStarttime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.monitoringStarttime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="监控结束时间" align="center" prop="monitoringFinallytime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.monitoringFinallytime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="监控时间" align="center" prop="monitorTime" width="180">
<template slot-scope="scope">
<span>{{ formatHoursAsHMS(scope.row.monitorTime) }}</span>
</template>
</el-table-column>
<el-table-column label="监控状态" align="center" prop="monitorState">
<template slot-scope="scope">
<span :class="scope.row.monitorState === '0' ? 'green-text' : 'black-text'">{{ scope.row.monitorState === '0' ? '·进行中' : '·已完成' }}</span>
<!-- <dict-tag :options="dict.type.history_state" :value="scope.row.monitorState"/>-->
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
style="border: transparent;background-color: transparent"
size="mini"
plain
icon="el-icon-view"
class="green-icon"
@click="handleUpdate(scope.row)"
></el-button>
</template>
</el-table-column>
</el-table>
<el-form-item prop="monitorTime">
<el-date-picker
placeholder="请选择监控时间"
value-format="yyyy-MM-dd"
v-model="queryParams.monitorTime"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
<!-- <el-date-picker clearable-->
<!-- v-model="queryParams.monitorTime"-->
<!-- type="date"-->
<!-- value-format="yyyy-MM-dd"-->
<!-- placeholder="请选择监控时间">-->
<!-- </el-date-picker>-->
</el-form-item>
<!-- <el-form-item label="监控状态" prop="monitorState">-->
<!-- <el-input-->
<!-- v-model="queryParams.monitorState"-->
<!-- placeholder="请输入监控状态"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<div style="margin-left: 92%">
<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>
<pagination
style="display: flex;align-items: center;justify-content: center;"
</div>
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改history对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- <el-table v-loading="loading" :data="histableList" @selection-change="handleSelectionChange">-->
<el-table :data="histableList" @selection-change="handleSelectionChange" style="min-height: 650px">
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="序号" align="center" width="100" prop="id"/>
<!-- <template slot-scope="scope">-->
<!-- <span>{{ (scope.$index+1)+(queryParams.pageNum-1)*queryParams.pageSize }}</span>-->
<!-- </template>-->
<el-table-column label="监控点名称" align="center" prop="monitoringName"/>
<el-table-column label="监控开始时间" align="center" prop="monitoringStarttime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.monitoringStarttime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="监控结束时间" align="center" prop="monitoringFinallytime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.monitoringFinallytime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="监控时间" align="center" prop="monitorTime" width="180">
<template slot-scope="scope">
<span>{{ formatHoursAsHMS(scope.row.monitorTime) }}</span>
</template>
</el-table-column>
<el-table-column label="监控状态" align="center" prop="monitorState">
<template slot-scope="scope">
<span :class="scope.row.monitorState === '0' ? 'green-text' : 'black-text'">{{
scope.row.monitorState === '0' ? '·进行中' : '·已完成'
}}</span>
<!-- <dict-tag :options="dict.type.history_state" :value="scope.row.monitorState"/>-->
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
style="border: transparent;background-color: transparent;color: green;font-size: 20px"
size="mini"
plain
icon="el-icon-view"
class="green-icon"
@click="handleUpdate(scope.row)"
></el-button>
</template>
</el-table-column>
</el-table>
<pagination
style="display: flex;align-items: center;justify-content: center;"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改history对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import { listHistable, getHistable, delHistable, addHistable, updateHistable } from "@/api/system/histable";
import {listHistable, getHistable, delHistable, addHistable, updateHistable} from "@/api/system/histable";
import {parseTime} from "../../utils/ruoyi";
export default {
......@@ -151,12 +165,12 @@ export default {
monitoringName: null,
monitorTime: null,
monitorState: null,
id:null,
},
// 表单参数
form: {},
// 表单校验
rules: {
}
rules: {}
};
},
created() {
......@@ -219,7 +233,7 @@ export default {
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.ID)
this.single = selection.length!==1
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
......@@ -231,7 +245,7 @@ export default {
/** 修改按钮操作 */
handleUpdate(row) {
// 查看详情页面(把id换成code)
this.$router.push({ path: '/monitoringPlayback/playback', query: { code: row.ID } })
this.$router.push({path: '/monitoringPlayback/playback', query: {code: row.ID}})
},
/** 提交按钮 */
submitForm() {
......@@ -256,12 +270,13 @@ export default {
/** 删除按钮操作 */
handleDelete(row) {
const IDs = row.ID || this.ids;
this.$modal.confirm('是否确认删除history编号为"' + IDs + '"的数据项？').then(function() {
this.$modal.confirm('是否确认删除history编号为"' + IDs + '"的数据项？').then(function () {
return delHistable(IDs);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
}).catch(() => {
});
},
/** 导出按钮操作 */
handleExport() {
......@@ -276,9 +291,11 @@ export default {
.green-text {
color: #51ad51;
}
.black-text {
color: black;
}
.green-icon .el-icon-view {
color: #51ad51;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment