Skip to content

1
1
Commit 357c657c by 岑松青
Options

dsada

parent 2875b3a8
Showing with 1022 additions and 824 deletions
src/views/AlarmRecord/AlarmRecord.vue
<template> <template>
<div v-loading="loading"> <div v-loading="loading">
<el-container> <el-container>
<el-header style="background:white"> <el-header style="background:white">
<div class="list-first" style="background:white"> <div class="list-first" style="background:white">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="6"> <el-col :span="6">
<div class="content">设备报警列表</div> <div class="content">设备报警列表</div>
</el-col> </el-col>
<el-col :span="6" :offset="12"> <el-col :span="6" :offset="12">
<div class="content"> <div class="content">
<el-input
<el-input placeholder="请输入内容/编号" suffix-icon="el-icon-search" v-model="search" ></el-input> placeholder="请输入内容/编号"
suffix-icon="el-icon-search"
</div> v-model="search"
</el-col> ></el-input>
</el-row>
</div>
</el-header>
<el-main>
<el-row style="margin-bottom:2%">
<el-col :span="8">
<div class="grid-content2">
选择日期：
<el-date-picker
size="mini"
v-model="value1"
type="daterange"
unlink-panels
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions">
</el-date-picker>
</div>
</el-col>
<el-col :span="5">
<div class="grid-content2">
设备型号：
<el-select size="mini" v-model="value2" multiple placeholder="请选择">
<el-option
v-for="item in models"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
</el-col>
<el-col :span="5">
<div class="grid-content2">
设备选择：
<el-select size="mini" v-model="value3" multiple placeholder="请选择">
<el-option
v-for="item in devices"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content2">
<el-button type="primary" class="bu" size="mini">搜索</el-button>
<el-button size="mini">重置</el-button>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<el-row> </div>
<el-table </el-header>
ref="multipleTable" <el-main>
:data="tableData.filter(data => !search || data.model.toLowerCase().includes(search.toLowerCase())||data.number.toLowerCase().includes(search.toLowerCase()))" <el-row style="margin-bottom:2%">
tooltip-effect="dark" <el-col :span="8">
style="width: 100% " <div class="grid-content2">
选择日期：
> <el-date-picker
size="mini"
<el-table-column align="center" label="设备编号" width="110"> v-model="value1"
<template slot-scope="scope">{{ scope.row.number }}</template> type="daterange"
</el-table-column> unlink-panels
<el-table-column align="center" label="设备型号" width="110"> range-separator="-"
<template slot-scope="scope">{{ scope.row.model }}</template> start-placeholder="开始日期"
</el-table-column> end-placeholder="结束日期"
<el-table-column align="center" label="报警编号" width="110"> :picker-options="pickerOptions"
<template slot-scope="scope">{{ scope.row.AlarmNum }}</template> >
</el-table-column> </el-date-picker>
<el-table-column align="center" label="报警类型" width="110"> </div>
<template slot-scope="scope"> </el-col>
<div v-if="scope.row.type==='一般'"> <el-col :span="5">
<div style="color:orange">{{scope.row.type}}</div> <div class="grid-content2">
</div> 设备型号：
<div v-else> <el-select
<div style="color:red">{{scope.row.type}}</div> size="mini"
</div> v-model="value2"
</template> multiple
</el-table-column> placeholder="请选择"
<el-table-column align="center" label="设备位置" width="110"> >
<template slot-scope="scope">{{ scope.row.location }}</template> <el-option
</el-table-column> v-for="item in models"
<el-table-column align="center" label="监测区域" width="110"> :key="item.value"
<template slot-scope="scope">{{ scope.row.area }}</template> :label="item.label"
</el-table-column> :value="item.value"
<el-table-column align="center" label="报警内容" width="110"> ></el-option>
<template slot-scope="scope">{{ scope.row.content }}</template> </el-select>
</el-table-column> </div>
<el-table-column align="center" label="处理状态" width="110"> </el-col>
<template slot-scope="scope"> <el-col :span="5">
<div v-if="scope.row.state==='已处理'"> <div class="grid-content2">
<el-tag :type="'success'">{{scope.row.state}}</el-tag> 设备选择：
</div> <el-select
<div v-else-if="scope.row.state==='待处理'"> size="mini"
<el-tag :type="'warning'">{{scope.row.state}}</el-tag> v-model="value3"
</div> multiple
<div v-else> placeholder="请选择"
<el-tag :type="'danger'" >{{scope.row.state}}</el-tag> >
</div> <el-option
</template> v-for="item in devices"
</el-table-column> :key="item.value"
<el-table-column align="center" label="巡检员" width="110"> :label="item.label"
<template slot-scope="scope">{{ scope.row.person }}</template> :value="item.value"
</el-table-column> ></el-option>
<el-table-column align="center" label="报警时间" width="150"> </el-select>
<template slot-scope="scope">{{ scope.row.time }}</template> </div>
</el-table-column> </el-col>
<el-col :span="6">
<el-table-column align="center" label="操作" width="110"> <div class="grid-content2">
<template slot-scope="scope"> <el-button type="primary" class="bu" size="mini">搜索</el-button>
<el-button @click="sure(scope.row)" type="text" size="small">设备参数快照</el-button> <el-button size="mini">重置</el-button>
</template> </div>
</el-table-column> </el-col>
</el-table> </el-row>
</el-row> <el-row>
</el-main> <el-table
<el-footer style="margin:0 auto"> ref="multipleTable"
<el-row > :data="
<el-pagination tableData.filter(
@size-change="handleSizeChange" data =>
@current-change="handleCurrentChange" !search ||
:current-page="currentPage1" data.model.toLowerCase().includes(search.toLowerCase()) ||
:page-sizes="[5, 10, 15, 20]" data.number.toLowerCase().includes(search.toLowerCase())
:page-size="5" )
:total="100" "
layout="prev, pager, next,sizes,jumper" tooltip-effect="dark"
> style="width: 100% "
</el-pagination> >
</el-row> <el-table-column align="center" label="设备编号" width="110">
</el-footer> <template slot-scope="scope">{{ scope.row.number }}</template>
</el-container> </el-table-column>
</div> <el-table-column align="center" label="设备型号" width="110">
<template slot-scope="scope">{{ scope.row.model }}</template>
</el-table-column>
<el-table-column align="center" label="报警编号" width="110">
<template slot-scope="scope">{{ scope.row.AlarmNum }}</template>
</el-table-column>
<el-table-column align="center" label="报警类型" width="110">
<template slot-scope="scope">
<div v-if="scope.row.type === '一般'">
<div style="color:orange">{{ scope.row.type }}</div>
</div>
<div v-else>
<div style="color:red">{{ scope.row.type }}</div>
</div>
</template>
</el-table-column>
<el-table-column align="center" label="设备位置" width="110">
<template slot-scope="scope">{{ scope.row.location }}</template>
</el-table-column>
<el-table-column align="center" label="监测区域" width="110">
<template slot-scope="scope">{{ scope.row.area }}</template>
</el-table-column>
<el-table-column align="center" label="报警内容" width="110">
<template slot-scope="scope">{{ scope.row.content }}</template>
</el-table-column>
<el-table-column align="center" label="处理状态" width="110">
<template slot-scope="scope">
<div v-if="scope.row.state === '已处理'">
<el-tag :type="'success'">{{ scope.row.state }}</el-tag>
</div>
<div v-else-if="scope.row.state === '待处理'">
<el-tag :type="'warning'">{{ scope.row.state }}</el-tag>
</div>
<div v-else>
<el-tag :type="'danger'">{{ scope.row.state }}</el-tag>
</div>
</template>
</el-table-column>
<el-table-column align="center" label="巡检员" width="110">
<template slot-scope="scope">{{ scope.row.person }}</template>
</el-table-column>
<el-table-column align="center" label="报警时间" width="150">
<template slot-scope="scope">{{ scope.row.time }}</template>
</el-table-column>
<el-table-column align="center" label="操作" width="110">
<template slot-scope="scope">
<el-button @click="sure(scope.row)" type="text" size="small"
>设备参数快照</el-button
>
</template>
</el-table-column>
</el-table>
</el-row>
</el-main>
<el-footer style="margin:0 auto">
<el-row>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage1"
:page-sizes="[5, 10, 15, 20]"
:page-size="5"
:total="100"
layout="prev, pager, next,sizes,jumper"
>
</el-pagination>
</el-row>
</el-footer>
</el-container>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { ref, onMounted } from '@vue/composition-api'; import { ref, onMounted } from "@vue/composition-api";
export default { export default {
setup() { setup() {
function handleCurrentChange(val) { function handleCurrentChange(val) {
console.log(`当前页: ${val}`); console.log(`当前页: ${val}`);
}
const value1 = ref<any>([]);
const value2 = ref<any>([]);
const value3 = ref<any>([]);
const multipleSelection = ref<any>([]);
const models = [
{
value: "选项1",
label: "型号1"
},
{
value: "选项2",
label: "型号2"
},
{
value: "选项3",
label: "型号3"
},
{
value: "选项4",
label: "型号4"
} }
const value1 = ref<any>([]); ];
const value2= ref<any>([]); const devices = [
const value3= ref<any>([]); {
const multipleSelection= ref<any>([]); value: "选项1",
const models=[ label: "断路器1"
{ },
value: "选项1", {
label: "型号1" value: "选项2",
}, label: "断路器2"
{ },
value: "选项2", {
label: "型号2" value: "选项3",
}, label: "断路器3"
{ },
value: "选项3", {
label: "型号3" value: "选项4",
}, label: "断路器4"
{ }
value: "选项4", ];
label: "型号4" const tableData = [
} {
] number: "LKT15456",
const devices=[ model: "DL01",
{ AlarmNum: "program",
value: "选项1", type: "一般",
label: "断路器1" location: "车间1",
}, area: "一楼办公室",
{ content: "电压不稳定",
value: "选项2", state: "待处理",
label: "断路器2" time: "2020/7/20 12:00:03",
}, person: "王邹"
{ },
value: "选项3", {
label: "断路器3" number: "LKT15456",
}, model: "DL01",
{ AlarmNum: "program",
value: "选项4", type: "重要",
label: "断路器4" location: "车间1",
} area: "一楼办公室",
] content: "电压不稳定",
const tableData=[ state: "待处理",
{ time: "2020/7/20 12:00:03",
number: "LKT15456", person: "王邹"
model: "DL01", },
AlarmNum:'program', {
type:'一般', number: "LKT15456",
location:'车间1', model: "DL01",
area:'一楼办公室', AlarmNum: "program",
content:'电压不稳定', type: "一般",
state:"待处理", location: "车间1",
time:'2020/7/20 12:00:03', area: "一楼办公室",
person:"王邹", content: "电压不稳定",
state: "已处理",
time: "2020/7/20 12:00:03",
}, person: "王邹"
{ },
number: "LKT15456", {
model: "DL01", number: "LKT15456",
AlarmNum:'program', model: "DL01",
type:'重要', AlarmNum: "program",
location:'车间1', type: "一般",
area:'一楼办公室', location: "车间1",
content:'电压不稳定', area: "一楼办公室",
state:"待处理", content: "电压不稳定",
time:'2020/7/20 12:00:03', state: "未处理",
person:"王邹", time: "2020/7/20 12:00:03",
person: "王邹"
}, },
{ {
number: "LKT15456", number: "LKT15456",
model: "DL01", model: "DL01",
AlarmNum:'program', AlarmNum: "program",
type:'一般', type: "一般",
location:'车间1', location: "车间1",
area:'一楼办公室', area: "一楼办公室",
content:'电压不稳定', content: "电压不稳定",
state:"已处理", state: "待处理",
time:'2020/7/20 12:00:03', time: "2020/7/20 12:00:03",
person:"王邹", person: "王邹"
},
}, {
{ number: "LKT15456",
number: "LKT15456", model: "DL01",
model: "DL01", AlarmNum: "program",
AlarmNum:'program', type: "一般",
type:'一般', location: "车间1",
location:'车间1', area: "一楼办公室",
area:'一楼办公室', content: "电压不稳定",
content:'电压不稳定', state: "待处理",
state:"未处理", time: "2020/7/20 12:00:03",
time:'2020/7/20 12:00:03', person: "王邹"
person:"王邹", },
{
number: "LKT15456",
model: "DL01",
AlarmNum: "program",
type: "一般",
location: "车间1",
area: "一楼办公室",
content: "电压不稳定",
state: "待处理",
time: "2020/7/20 12:00:03",
person: "王邹"
}
];
}, const loading = ref<boolean>(false);
const pickerOptions = {
shortcuts: [
{ {
number: "LKT15456", text: "最近一周",
model: "DL01", onClick(picker) {
AlarmNum:'program', const end = new Date();
type:'一般', const start = new Date();
location:'车间1', start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
area:'一楼办公室', picker.$emit("pick", [start, end]);
content:'电压不稳定', }
state:"待处理",
time:'2020/7/20 12:00:03',
person:"王邹",
}, },
{ {
number: "LKT15456", text: "最近一个月",
model: "DL01", onClick(picker) {
AlarmNum:'program', const end = new Date();
type:'一般', const start = new Date();
location:'车间1', start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
area:'一楼办公室', picker.$emit("pick", [start, end]);
content:'电压不稳定', }
state:"待处理",
time:'2020/7/20 12:00:03',
person:"王邹",
}, },
{ {
number: "LKT15456", text: "最近三个月",
model: "DL01", onClick(picker) {
AlarmNum:'program', const end = new Date();
type:'一般', const start = new Date();
location:'车间1', start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
area:'一楼办公室', picker.$emit("pick", [start, end]);
content:'电压不稳定', }
state:"待处理", }
time:'2020/7/20 12:00:03',
person:"王邹",
},
] ]
const loading = ref<boolean>(false);
const pickerOptions= {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
};
return{
loading,
search: '',
tableData,
currentPage1:1,
handleCurrentChange,
num:1,
devices,
models,
pickerOptions,
value2,
value1,
value3,
}; };
}, return {
loading,
search: "",
tableData,
currentPage1: 1,
handleCurrentChange,
num: 1,
devices,
models,
pickerOptions,
value2,
value1,
value3
};
}
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
......
src/views/MonitorState/MonitorState.vue
...@@ -31,22 +31,28 @@ ...@@ -31,22 +31,28 @@
<el-col :span="6"> <el-col :span="6">
<div class="grid-content1">设备列表</div> <div class="grid-content1">设备列表</div>
</el-col> </el-col>
<el-col :span="6" :offset="12"> <el-col :span="6" :offset="12">
<div class="grid-content1"> <div class="grid-content1">
<el-input
<el-input placeholder="请输入内容/编号" suffix-icon="el-icon-search" v-model="search" ></el-input> placeholder="请输入内容/编号"
suffix-icon="el-icon-search"
v-model="search"
></el-input>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="6"> <el-col :span="6">
<div class="grid-content2"> <div class="grid-content2">
设备状态： 设备状态：
<el-select size="mini" v-model="value1" multiple placeholder="请选择"> <el-select
size="mini"
v-model="value1"
multiple
placeholder="请选择"
>
<el-option <el-option
v-for="item in states" v-for="item in states"
:key="item.value" :key="item.value"
...@@ -59,7 +65,12 @@ ...@@ -59,7 +65,12 @@
<el-col :span="6"> <el-col :span="6">
<div class="grid-content2"> <div class="grid-content2">
设备型号： 设备型号：
<el-select size="mini" v-model="value2" multiple placeholder="请选择"> <el-select
size="mini"
v-model="value2"
multiple
placeholder="请选择"
>
<el-option <el-option
v-for="item in models" v-for="item in models"
:key="item.value" :key="item.value"
...@@ -72,7 +83,12 @@ ...@@ -72,7 +83,12 @@
<el-col :span="6"> <el-col :span="6">
<div class="grid-content2"> <div class="grid-content2">
设备选择： 设备选择：
<el-select size="mini" v-model="value3" multiple placeholder="请选择"> <el-select
size="mini"
v-model="value3"
multiple
placeholder="请选择"
>
<el-option <el-option
v-for="item in equipments" v-for="item in equipments"
:key="item.value" :key="item.value"
...@@ -84,7 +100,9 @@ ...@@ -84,7 +100,9 @@
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="grid-content2"> <div class="grid-content2">
<el-button type="primary" class="bu" size="mini">搜索</el-button> <el-button type="primary" class="bu" size="mini"
>搜索</el-button
>
<el-button size="mini">重置</el-button> <el-button size="mini">重置</el-button>
</div> </div>
</el-col> </el-col>
...@@ -92,25 +110,36 @@ ...@@ -92,25 +110,36 @@
<el-row> <el-row>
<el-table <el-table
ref="multipleTable" ref="multipleTable"
:data="tableData.filter(data => !search || data.state.toLowerCase().includes(search.toLowerCase())||data.number.toLowerCase().includes(search.toLowerCase()))" :data="
tableData.filter(
data =>
!search ||
data.state.toLowerCase().includes(search.toLowerCase()) ||
data.number.toLowerCase().includes(search.toLowerCase())
)
"
tooltip-effect="dark" tooltip-effect="dark"
style="width: 100% " style="width: 100% "
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
> >
<el-table-column align="center" type="selection" width="50"></el-table-column> <el-table-column
align="center"
type="selection"
width="50"
></el-table-column>
<el-table-column align="center" label="设备状态" width="200"> <el-table-column align="center" label="设备状态" width="200">
<template slot-scope="scope"> <template slot-scope="scope">
<div v-if="scope.row.state==='正常'"> <div v-if="scope.row.state === '正常'">
<el-tag :type="'success'">{{scope.row.state}}</el-tag> <el-tag :type="'success'">{{ scope.row.state }}</el-tag>
</div> </div>
<div v-else-if="scope.row.state=='报警'"> <div v-else-if="scope.row.state == '报警'">
<el-tag :type="'warning'">{{scope.row.state}}</el-tag> <el-tag :type="'warning'">{{ scope.row.state }}</el-tag>
</div> </div>
<div v-else-if="scope.row.state=='故障'"> <div v-else-if="scope.row.state == '故障'">
<el-tag :type="'danger'">{{scope.row.state}}</el-tag> <el-tag :type="'danger'">{{ scope.row.state }}</el-tag>
</div> </div>
<div v-else> <div v-else>
<el-tag :type="'info'">{{scope.row.state}}</el-tag> <el-tag :type="'info'">{{ scope.row.state }}</el-tag>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
...@@ -128,7 +157,9 @@ ...@@ -128,7 +157,9 @@
</el-table-column> </el-table-column>
<el-table-column align="center" label="操作" width="150"> <el-table-column align="center" label="操作" width="150">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button @click="detail(scope.row)" type="text" size="small">参数详情</el-button> <el-button @click="detail(scope.row)" type="text" size="small"
>参数详情</el-button
>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -143,141 +174,145 @@ import { ref, onMounted } from "@vue/composition-api"; ...@@ -143,141 +174,145 @@ import { ref, onMounted } from "@vue/composition-api";
import { router } from "../../main"; import { router } from "../../main";
export default { export default {
setup() { setup() {
const tableData=[ const tableData = [
{ {
state: "正常", state: "正常",
number: "DLQ423", number: "DLQ4323",
model: "LTY-1", model: "LTY-1",
location: "杭州市西湖区", location: "杭州市西湖区",
area: "杭州市西湖区古荡湾", area: "杭州市西湖区古荡湾",
collector: "LKT001" collector: "LKT001"
}, },
{ {
state: "正常", state: "正常",
number: "DLQ423", number: "DL3423",
model: "LTY-1", model: "LTY-1",
location: "杭州市西湖区", location: "杭州市西湖区",
area: "杭州市西湖区古荡湾", area: "杭州市西湖区古荡湾",
collector: "LKT001" collector: "LKT001"
}, },
{ {
state: "故障", state: "故障",
number: "DLQ423", number: "DLQ453",
model: "LTY-1", model: "LTY-1",
location: "杭州市西湖区", location: "杭州市西湖区",
area: "杭州市西湖区古荡湾", area: "杭州市西湖区古荡湾",
collector: "LKT001" collector: "LKT001"
}, },
{ {
state: "正常", state: "正常",
number: "DLQ423", number: "DL23",
model: "LTY-1", model: "LTY-1",
location: "杭州市西湖区", location: "杭州市西湖区",
area: "杭州市西湖区古荡湾", area: "杭州市西湖区古荡湾",
collector: "LKT001" collector: "LKT001"
}, },
{ {
state: "通讯中断", state: "通讯中断",
number: "DLQ423", number: "DLQ423",
model: "LTY-1", model: "LTY-1",
location: "杭州市西湖区", location: "杭州市西湖区",
area: "杭州市西湖区古荡湾", area: "杭州市西湖区古荡湾",
collector: "LKT001" collector: "LKT001"
}, },
{ {
state: "正常", state: "正常",
number: "DLQ423", number: "DLQ423",
model: "LTY-1", model: "LTY-1",
location: "杭州市西湖区", location: "杭州市西湖区",
area: "杭州市西湖区古荡湾", area: "杭州市西湖区古荡湾",
collector: "LKT001" collector: "LKT001"
}, },
{ {
state: "正常", state: "正常",
number: "DLQ423", number: "DLQ423",
model: "LTY-1", model: "LTY-1",
location: "杭州市西湖区", location: "杭州市西湖区",
area: "杭州市西湖区古荡湾", area: "杭州市西湖区古荡湾",
collector: "LKT001" collector: "LKT001"
}, },
{ {
state: "报警", state: "报警",
number: "DLQ423", number: "DLQ423",
model: "LTY-1", model: "LTY-1",
location: "杭州市西湖区", location: "杭州市西湖区",
area: "杭州市西湖区古荡湾", area: "杭州市西湖区古荡湾",
collector: "LKT001" collector: "LKT001"
} }
] ];
const equipments=[ const equipments = [
{ {
value: "选项1", value: "选项1",
label: "断路器1" label: "断路器1"
}, },
{ {
value: "选项2", value: "选项2",
label: "断路器2" label: "断路器2"
}, },
{ {
value: "选项3", value: "选项3",
label: "断路器3" label: "断路器3"
}, },
{ {
value: "选项4", value: "选项4",
label: "断路器4" label: "断路器4"
} }
] ];
const models= [ const models = [
{ {
value: "选项1", value: "选项1",
label: "型号1" label: "型号1"
}, },
{ {
value: "选项2", value: "选项2",
label: "型号2" label: "型号2"
}, },
{ {
value: "选项3", value: "选项3",
label: "型号3" label: "型号3"
}, },
{ {
value: "选项4", value: "选项4",
label: "型号4" label: "型号4"
} }
] ];
const states=[ const states = [
{ {
value: "选项1", value: "选项1",
label: "正常" label: "正常"
}, },
{ {
value: "选项2", value: "选项2",
label: "报警" label: "报警"
}, },
{ {
value: "选项3", value: "选项3",
label: "故障" label: "故障"
}, },
{ {
value: "选项4", value: "选项4",
label: "通讯中断" label: "通讯中断"
} }
] ];
function detail(row:any) {
function detail() { router.push({ name: "detail" ,
router.push({ name: "demo3" }); params: {
obj: row
}
});
} }
const loading = ref<boolean>(false); const loading = ref<boolean>(false);
const value1 = ref<any>([]); const value1 = ref<any>([]);
const value2= ref<any>([]); const value2 = ref<any>([]);
const value3= ref<any>([]); const value3 = ref<any>([]);
const multipleSelection= ref<any>([]); const multipleSelection = ref<any>([]);
return { return {
loading, loading,
search: "", search: "",
msg: 'test message',
tableData, tableData,
detail, detail,
states, states,
......
src/views/detail/detail.vue
<template> <template>
<div v-loading="loading"> <div v-loading="loading">
<el-row> <div><el-button type="primary" size="mini">返回</el-button></div>
<el-button type="primary" size="mini">返回</el-button> <div class="flex start " style="margin-top: 10px">
</el-row> <div class="aside" >
<el-container> <div>
<el-aside style="background:white; ;margin-right:15px;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"> <div style="text-align:center;margin-top:5%;margin-bottom:5% ;font-weight:bold" >{{dd.number}}</div>
<div style="margin-top:10px;margin-left:10px"> <div class="bg">
<el-row style="text-align:center;margin-bottom:5% ;font-weight:bold" >BOT0016</el-row> <div class="text">
<el-row > <div>设备型号：</div>
<el-col :span="10"><div ><img src="../../assets/device.png" alt="" class="device"></div></el-col> <div>12</div>
<el-col :span="7" :offset="3"><div>设备型号：</div><div>12</div><div style="margin-top:10px">采集器编号：</div><div>12</div></el-col> <div style="margin-top:10px">采集器编号：</div>
</el-row> <div>12</div>
<el-row style="background:white;margin-top:5% "> </div>
<el-col :span="10"><div>客户地址：</div></el-col> </div>
<el-col :span="10" :offset="2"><div>杭州市江干区</div></el-col> </div>
</el-row> <el-form ref="form" :model="form" label-width="100px" size="mini" >
<el-row style="background:white;margin-top:5% "> <el-form-item label="客户地址：">
<el-col :span="10"><div>联系人：</div></el-col> <div>杭州市江干区</div>
<el-col :span="10" :offset="2"><div>张三</div></el-col> </el-form-item>
</el-row> <el-form-item label="联系人：">
<el-row style="background:white;margin-top:5% "> <div>张三</div>
<el-col :span="10"><div>联系方式：</div></el-col> </el-form-item>
<el-col :span="10" :offset="2"><div>1283948933</div></el-col> <el-form-item label="联系方式：">
</el-row> <div>1283948933</div>
<el-row style="background:white;margin-top:5% "> </el-form-item>
<el-col :span="10"><div>设备位置：</div></el-col> <el-form-item label="设备位置：">
<el-col :span="10" :offset="2"><div>北楼一区</div></el-col> <div>北楼一区</div>
</el-row> </el-form-item>
<el-row style="background:white;margin-top:5% "> <el-form-item label="监测区域：">
<el-col :span="10"><div>监测区域：</div></el-col> <div>北楼一区</div>
<el-col :span="10" :offset="2"><div>北楼一区</div></el-col> </el-form-item>
</el-row> <el-form-item label="开机率：">
<el-row style="background:white;margin-top:5% "> <div style="width:80%;margin-top:8px"><el-progress
<el-col :span="10"><div>开机率：</div></el-col> :text-inside="true"
<el-col :span="10" :offset="2"><div><el-progress :text-inside="true" :stroke-width="24" :percentage="67" status="success"></el-progress></div></el-col> :stroke-width="20"
</el-row> :percentage="67"
<el-row style="background:white;margin-top:50px " justify="center"><el-col :span="3" :offset="7"><el-button type="primary" size="mini">运行参数查看</el-button></el-col></el-row> status="success"
<el-row style="background:white;margin-top:10px " justify="center"><el-col :span="3" :offset="7"><el-button type="primary" size="mini">运行时间统计</el-button></el-col></el-row> ></el-progress></div>
</el-form-item>
</el-form-item>
<el-form-item label="监测区域：">
<div>北楼一区</div>
</el-form-item>
</el-form-item>
<el-form-item >
<div><el-button type="primary" size="mini"
>运行参数查看</el-button
></div>
</el-form-item>
<el-form-item >
<div><el-button type="primary" size="mini"
>运行时间统计</el-button
></div>
</el-form-item>
</el-form>
</div> </div>
</el-aside> <div class="flex column " style="width:72%">
<el-container> <div class="header1" >运行时间：</div>
<el-header style="line-height:60px; height:60px; background:white;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"> <div class="main1" >
<el-row >运行时间：</el-row> <div class="butt">
</el-header> <el-form :inline="true">
<el-form-item>
<el-main style="background:white;margin-top:10px ;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"> <el-button type="primary" size="mini" style="margin-right:20px">实时参数列表</el-button>
<el-row style="background:white;margin-top:10px " justify="center"><el-col :span="3" :offset="8"><el-button type="primary" size="mini">实时参数列表</el-button></el-col><el-col :span="3" ><el-button size="mini">参数曲线监控</el-button></el-col></el-row> <el-button size="mini">参数曲线监控</el-button>
<el-row style="background:white;margin-top:5% "> </el-form-item>
<el-col :span="5"><div>电流：</div></el-col> </el-form>
<el-col :span="2" :offset="1"><div class="it">8.342342</div></el-col> </div>
<el-col :span="5"><div>温度：</div ></el-col> <el-form :inline="true" >
<el-col :span="2" :offset="1"><div class="it">8.342342</div></el-col> <el-form-item label="电流："style="margin-right:200px;width:150px">
<el-col :span="5"><div>断路器状态：</div></el-col> <div class="it">8.342342</div>
<el-col :span="2" :offset="1"><div class="it">8.342342</div></el-col> </el-form-item>
</el-row> <el-form-item label="温度："style="margin-right:200px;width:150px">
<el-row style="background:white;margin-top:5% "> <div class="it">8.342342</div>
<el-col :span="5"><div>A相电压：</div></el-col> </el-form-item>
<el-col :span="2" :offset="1"><div class="it">8.342342</div></el-col> <el-form-item label="断路器状态：">
<el-col :span="5"><div>B相电压：</div ></el-col> <div class="it">开</div>
<el-col :span="2" :offset="1"><div class="it">8.342342</div></el-col> </el-form-item>
<el-col :span="5"><div>AB相线电流：</div></el-col> </el-form>
<el-col :span="2" :offset="1"><div class="it">8.342342</div></el-col> <el-form :inline="true">
</el-row> <el-form-item label="A相电压："style="margin-right:200px;width:150px">
<el-row justify="center" style="margin-top:300px"><el-col :span="3" :offset="8"><el-button type="primary" size="mini">上一页</el-button></el-col><el-col :span="3" ><el-button size="mini">下一页</el-button></el-col></el-row> <div class="it">8.342342</div>
</el-main> </el-form-item>
</el-container> <el-form-item label="B相电压："style="margin-right:200px;width:150px">
</el-container> <div class="it">8.342342</div>
</div> </el-form-item>
<el-form-item label="AB相线电流：">
<div class="it">8.342342</div>
</el-form-item>
</el-form>
<div class="butt1">
<el-button type="primary" size="mini" style="margin-right:20px">上一页</el-button>
<el-button size="mini">下一页</el-button>
</div>
</div>
</div>
</div>
</div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { ref, onMounted } from '@vue/composition-api'; import { ref, onMounted } from "@vue/composition-api";
import { router } from '../../main';
export default { export default {
setup() { setup() {
const loading = ref<boolean>(false); const loading = ref<boolean>(false);
return{ const dd=ref<any>()
loading, onMounted(function () {
dd.value= router.currentRoute.params.obj
// console.log(aa)
})
return {
loading,dd
}; };
}, }
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.it{ .aside{border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);width:25%;background:white;margin-right:10px ;
color: blue; }
font-weight:bold; .main1{padding-left:10px;background:white;margin-top:10px ;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)}
text-size-adjust: medium; .header1{line-height:60px; padding-left:10px;height:60px; background:white;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)}
} .it {
.device { color: blue;
height: 60px; font-weight: bold;
text-align: center;
overflow: hidden; text-size-adjust: medium;
cursor:pointer; }
} .butt{margin-left:35%}
.butt1{margin-left:38%;margin-top:31%;margin-bottom: 2%;}
.bg{background-image: url(../../assets/device.png);
background-repeat: no-repeat;
}
.text{margin-left:60%}
.device {
height: 60px;
overflow: hidden;
cursor: pointer;
}
</style> </style>
src/views/home/home.vue
<template> <template>
<div v-loading="loading"> <div v-loading="loading">
<el-container> <el-container>
<el-aside style="background:white;width:75% ;margin-right:2%;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"> <el-aside
<div style="margin-top:10px;margin-left:10px"> style="background:white;width:75% ;margin-right:2%;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
<el-row style="text-align:left;margin-bottom:5% ;font-weight:bold;" >设备状态统计实时监测</el-row> >
<el-row class="row-bg" > <div style="margin-top:10px;margin-left:10px">
<el-col :span="4"> <el-row style="text-align:left;margin-bottom:5% ;font-weight:bold;"
<div class="grid-content bg-blue">设备总数</div> >设备状态统计实时监测</el-row
<div class="grid-content bg-blue big">4545台</div> >
</el-col> <el-row class="row-bg">
<el-col :span="4" :offset="1"> <el-col :span="4">
<div class="grid-content bg-green">正常</div> <div class="grid-content bg-blue">设备总数</div>
<div class="grid-content bg-green big">3621台</div> <div class="grid-content bg-blue big">4545台</div>
</el-col> </el-col>
<el-col :span="4" :offset="1"> <el-col :span="4" :offset="1">
<div class="grid-content bg-orange">报警</div> <div class="grid-content bg-green">正常</div>
<div class="grid-content bg-orange big">273台</div> <div class="grid-content bg-green big">3621台</div>
</el-col> </el-col>
<el-col :span="4" :offset="1"> <el-col :span="4" :offset="1">
<div class="grid-content bg-red">故障</div> <div class="grid-content bg-orange">报警</div>
<div class="grid-content bg-red big">432台</div> <div class="grid-content bg-orange big">273台</div>
</el-col> </el-col>
<el-col :span="4" :offset="1"> <el-col :span="4" :offset="1">
<div class="grid-content bg-grey">通讯中断</div> <div class="grid-content bg-red">故障</div>
<div class="grid-content bg-grey big">422台</div> <div class="grid-content bg-red big">432台</div>
</el-col> </el-col>
</el-row> <el-col :span="4" :offset="1">
<el-row > <div class="grid-content bg-grey">通讯中断</div>
<el-col ><div ><img src="../../assets/map.png" alt="" class="map"></div></el-col> <div class="grid-content bg-grey big">422台</div>
</el-row> </el-col>
</div> </el-row>
</el-aside> <el-row>
<el-container> <el-col
<el-header style=" height:280px; margin-bottom:5%;background:white;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"> ><div><img src="../../assets/map.png" alt="" class="map" /></div
<el-row style="text-align:left;margin-bottom:5% ;font-weight:bold;" >巡检通知</el-row> ></el-col>
<el-row ><div v-for="(item,i) in infos" class="info" ><el-col :span="1" style=" margin-top:12px;width: 25px;height: 25px;border: 1px solid #314659;color:white;background:#314659;border-radius:50%;text-align:center;line-height:25px">{{item.id}}</el-col> </el-row>
<el-col :span="0.3" class="infos">{{item.location}}</el-col> </div>
<el-col :span="0.3" class="infos"> <div ><el-button @click="detail(scope.row)" type="text" size="small"><div >{{item.operation}}</div></el-button></div></el-col> </el-aside>
</div></el-row> <el-container>
</el-header> <el-header
style=" height:280px; margin-bottom:5%;background:white;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
>
<el-row style="text-align:left;margin-bottom:5% ;font-weight:bold;"
>巡检通知</el-row
>
<el-row
><div v-for="(item, i) in infos" class="info">
<el-col
:span="1"
style=" margin-top:12px;width: 25px;height: 25px;border: 1px solid #314659;color:white;background:#314659;border-radius:50%;text-align:center;line-height:25px"
>{{ item.id }}</el-col
>
<el-col :span="0.3" class="infos">{{ item.location }}</el-col>
<el-col :span="0.3" class="infos">
<div>
<el-button @click="detail(scope.row)" type="text" size="small"
><div>{{ item.operation }}</div></el-button
>
</div></el-col
>
</div></el-row
>
</el-header>
<el-main style=" overflow: hidden;height:280px; background:white;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"> <el-main
<el-row style="text-align:left;margin-bottom:5% ;font-weight:bold;" >区域耗能统计</el-row> style=" overflow: hidden;height:280px; background:white;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
<el-row ><v-chart autoresize :options="option" style="width: 100%;"/></el-row> >
</el-main> <el-row style="text-align:left;margin-bottom:5% ;font-weight:bold;"
</el-container> >区域耗能统计</el-row
</el-container> >
<el-container style="margin-top:1%"> <el-row
<el-aside style="width:49% ;margin-right:2% ; overflow: hidden; background:white;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"> ><v-chart autoresize :options="option" style="width: 100%;"
<el-row style="text-align:left;margin-bottom:2% ;font-weight:bold;" >今日能耗实时统计</el-row> /></el-row>
<el-row ><v-chart autoresize :options="option1" style="width: 100%;"/></el-row> </el-main>
</el-aside> </el-container>
<el-main style="overflow: hidden; background:white;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"> </el-container>
<el-row style="text-align:left;margin-bottom:2% ;font-weight:bold;" >今日报警次数统计</el-row> <el-container style="margin-top:1%">
<el-row ><v-chart autoresize :options="option2" style="width: 100%;"/></el-row> <el-aside
</el-main> style="width:49% ;margin-right:2% ; overflow: hidden; background:white;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
</el-container> >
<el-row style="text-align:left;margin-bottom:2% ;font-weight:bold;"
>今日能耗实时统计</el-row
>
<el-row
><v-chart autoresize :options="option1" style="width: 100%;"
/></el-row>
</el-aside>
<el-main
style="overflow: hidden; background:white;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
>
<el-row style="text-align:left;margin-bottom:2% ;font-weight:bold;"
>今日报警次数统计</el-row
>
<el-row
><v-chart autoresize :options="option2" style="width: 100%;"
/></el-row>
</el-main>
</el-container>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { ref, onMounted } from '@vue/composition-api'; import { ref, onMounted } from "@vue/composition-api";
export default { export default {
setup() { setup() {
var labelRight = { var labelRight = {
position: 'right' position: "right"
}; };
const option = { const option = {
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
axisPointer: { // 坐标轴指示器，坐标轴触发有效 axisPointer: {
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' // 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
} }
}, },
grid: { grid: {
top: 5, top: 5,
bottom: 5 bottom: 5
}, },
xAxis: { xAxis: {
type: 'value', type: "value",
position: 'top', position: "top",
splitLine: { splitLine: {
lineStyle: { lineStyle: {
type: 'dashed' type: "dashed"
} }
} }
}, },
yAxis: { yAxis: {
type: 'category', type: "category",
axisLine: {show: false}, axisLine: { show: false },
axisLabel: {show: false}, axisLabel: { show: false },
axisTick: {show: false}, axisTick: { show: false },
splitLine: {show: false}, splitLine: { show: false },
max:5, max: 5,
data: [ '孵化器2幢', '孵化器2幢', '孵化器2幢', '孵化器2幢', '孵化器1幢'], data: ["孵化器2幢", "孵化器2幢", "孵化器2幢", "孵化器2幢", "孵化器1幢"]
},
}, series: [
series: [
{ {
name: '用电', name: "用电",
type: 'bar', type: "bar",
stack: '总量', stack: "总量",
label: { label: {
show: true, show: true,
formatter: '{b}' formatter: "{b}"
}, },
data: [ data: [
{value: -0.07, label: labelRight}, { value: -0.07, label: labelRight },
{value: -0.09, label: labelRight}, { value: -0.09, label: labelRight },
0.2, 0.44, 0.2,
{value: -0.23, label: labelRight}, 0.44,
0.08, { value: -0.23, label: labelRight },
{value: -0.17, label: labelRight}, 0.08,
0.47, { value: -0.17, label: labelRight },
{value: -0.36, label: labelRight}, 0.47,
0.18 { value: -0.36, label: labelRight },
] 0.18
]
} }
] ]
}; };
const option1={ const option1 = {
color: ['#3398DB'], color: ["#3398DB"],
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
axisPointer: { // 坐标轴指示器，坐标轴触发有效 axisPointer: {
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' // 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
} }
}, },
grid: { grid: {
left: '3%', left: "3%",
right: '4%', right: "4%",
bottom: '3%', bottom: "3%",
containLabel: true containLabel: true
}, },
xAxis: [ xAxis: [
{ {
type: 'category', type: "category",
data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14：00', '15：00','16:00', '17：00', '18：00'], data: [
axisTick: { "9:00",
alignWithLabel: true "10:00",
} "11:00",
"12:00",
"13:00",
"14：00",
"15：00",
"16:00",
"17：00",
"18：00"
],
axisTick: {
alignWithLabel: true
}
} }
], ],
yAxis: [ yAxis: [
{ {
type: 'value' type: "value"
} }
], ],
series: [ series: [
{ {
name: '能耗', name: "能耗",
type: 'bar', type: "bar",
barWidth: '60%', barWidth: "60%",
data: [10, 52, 200, 334, 390, 330, 220,435,656,232] data: [10, 52, 200, 334, 390, 330, 220, 435, 656, 232]
} }
] ]
}; };
const option2={ const option2 = {
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
axisPointer: { // 坐标轴指示器，坐标轴触发有效 axisPointer: {
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' // 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
} }
}, },
xAxis: { xAxis: {
type: 'category', type: "category",
boundaryGap: false, boundaryGap: false,
data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14：00', '15：00','16:00', '17：00', '18：00'] data: [
}, "9:00",
yAxis: { "10:00",
type: 'value' "11:00",
}, "12:00",
series: [{ "13:00",
name: '次数', "14：00",
data: [820, 932, 901, 934, 1290, 1330, 1320,2312,5435,2121], "15：00",
type: 'line', "16:00",
areaStyle: {} "17：00",
}] "18：00"
}; ]
const infos=[{id:'1', },
location:'孵化器2幢一层', yAxis: {
operation:'日常巡检'}, type: "value"
{id:'2', },
location:'孵化器2幢一层', series: [
operation:'日常巡检'}, {
{id:'3', name: "次数",
location:'孵化器2幢一层', data: [820, 932, 901, 934, 1290, 1330, 1320, 2312, 5435, 2121],
operation:'日常巡检'}, type: "line",
{id:'4', areaStyle: {}
location:'孵化器2幢一层', }
operation:'日常巡检'}, ]
{id:'5', };
location:'孵化器2幢一层', const infos = [
operation:'日常巡检'}, { id: "1", location: "孵化器2幢一层", operation: "日常巡检" },
] { id: "2", location: "孵化器2幢一层", operation: "日常巡检" },
{ id: "3", location: "孵化器2幢一层", operation: "日常巡检" },
{ id: "4", location: "孵化器2幢一层", operation: "日常巡检" },
{ id: "5", location: "孵化器2幢一层", operation: "日常巡检" }
];
const loading = ref<boolean>(false); const loading = ref<boolean>(false);
return{ return {
loading, loading,
infos, infos,
option, option,
option1, option1,
option2, option2,
labelRight, labelRight
}; };
}, }
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.map{ .map {
margin-left: 5%; margin-left: 5%;
width:90%; width: 90%;
overflow: hidden; overflow: hidden;
cursor:pointer; cursor: pointer;
} }
.grid-content { .grid-content {
text-align: center; text-align: center;
line-height: 30px; line-height: 30px;
} }
...@@ -244,6 +303,10 @@ const option1={ ...@@ -244,6 +303,10 @@ const option1={
padding: 10px 0; padding: 10px 0;
background-color: #f9fafc; background-color: #f9fafc;
} }
.info{line-height: 50px;} .info {
.infos{padding:0 25px;} line-height: 50px;
}
.infos {
padding: 0 25px;
}
</style> </style>
src/views/login.vue
...@@ -2,29 +2,48 @@ ...@@ -2,29 +2,48 @@
<div class="flex column center login" v-loading="loading"> <div class="flex column center login" v-loading="loading">
<div class="login-body vivify popIn flex center column"> <div class="login-body vivify popIn flex center column">
<div class="login-head flex column center align-center"> <div class="login-head flex column center align-center">
<div class="title1">{{loginTitle1}}</div> <div class="title1">{{ loginTitle1 }}</div>
<div v-if="loginTitle2" class="title2">{{loginTitle2}}</div> <div v-if="loginTitle2" class="title2">{{ loginTitle2 }}</div>
</div> </div>
<div class="inner flex center align-center around"> <div class="inner flex center align-center around">
<div class="left"> <div class="left">
<img src="../assets/u90.png"> <img src="../assets/u90.png" />
</div> </div>
<div class="flex column right"> <div class="flex column right">
<div class="flex center"> <div class="flex center">
<img :src="loginLogo"/> <img :src="loginLogo" />
</div> </div>
<el-form <el-form
label-position="left" label-width="70px" label-position="left"
class="flex column around" ref="formRef" :model="form" :rules="rule"> label-width="70px"
class="flex column around"
ref="formRef"
:model="form"
:rules="rule"
>
<el-form-item prop="username" label="账户："> <el-form-item prop="username" label="账户：">
<el-input v-model="form.username" autofocus autocomplete="off" placeholder="用户名" @keyup.enter.native="login($refs.formRef)" /> <el-input
v-model="form.username"
autofocus
autocomplete="off"
placeholder="用户名"
@keyup.enter.native="login($refs.formRef)"
/>
</el-form-item> </el-form-item>
<el-form-item prop="pwd" label="密码："> <el-form-item prop="pwd" label="密码：">
<el-input type="password" autocomplete="off" v-model="form.pwd" placeholder="密 码" @keyup.enter.native="login($refs.formRef)" /> <el-input
type="password"
autocomplete="off"
v-model="form.pwd"
placeholder="密 码"
@keyup.enter.native="login($refs.formRef)"
/>
</el-form-item> </el-form-item>
<kit-err-channel id="login" style="margin-bottom: 5px" /> <kit-err-channel id="login" style="margin-bottom: 5px" />
<el-form-item> <el-form-item>
<el-button type="primary" @click="login($refs.formRef)">登录</el-button> <el-button type="primary" @click="login($refs.formRef)"
>登录</el-button
>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
...@@ -34,58 +53,67 @@ ...@@ -34,58 +53,67 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { ref, Ref, onMounted } from '@vue/composition-api'; import { ref, Ref, onMounted } from "@vue/composition-api";
import { ElForm } from 'element-ui/types/form'; import { ElForm } from "element-ui/types/form";
import { useLoading } from 'web-toolkit/src/service'; import { useLoading } from "web-toolkit/src/service";
import { postService, storeUserInfo, updateStoreUserInfo, submitErrChanel, pushMsgErr } from 'web-toolkit/src/case-main'; import {
import {loginTitle1, loginTitle2, loginLogo, schema} from '@/main'; postService,
import {router} from '@/main'; storeUserInfo,
import { Route } from 'vue-router'; updateStoreUserInfo,
import {assert} from 'web-toolkit/src/utils/index'; submitErrChanel,
import {Login} from '@/dao/userDao'; pushMsgErr
} from "web-toolkit/src/case-main";
import { loginTitle1, loginTitle2, loginLogo, schema } from "@/main";
import { router } from "@/main";
import { Route } from "vue-router";
import { assert } from "web-toolkit/src/utils/index";
import { Login } from "@/dao/userDao";
export default { export default {
setup() { setup() {
const loading = ref(false); const loading = ref(false);
const form = ref({ username: '', pwd: '' }); const form = ref({ username: "", pwd: "" });
const formRef: Ref<ElForm|null> = ref(null); const formRef: Ref<ElForm | null> = ref(null);
const rule = { const rule = {
username: { username: {
required: true, required: true,
message: '请填写用户名', message: "请填写用户名",
trigger: 'none', trigger: "none"
}, },
pwd: [{ pwd: [
required: true, {
message: '请填写密码', required: true,
trigger: 'none', message: "请填写密码",
}, { trigger: "none"
type: 'string', },
min: 6, {
message: '密码长度不能小于6位', type: "string",
trigger: 'none', min: 6,
}], message: "密码长度不能小于6位",
trigger: "none"
}
]
}; };
async function login() { async function login() {
const valid = await (formRef.value as ElForm).validate(); const valid = await (formRef.value as ElForm).validate();
assert(valid); assert(valid);
submitErrChanel('login'); submitErrChanel("login");
const data = await Login({ const data = await Login({
...form.value, ...form.value,
schema, schema
}); });
updateStoreUserInfo(data as any); updateStoreUserInfo(data as any);
// 设置登录后回到登录前页面 // 设置登录后回到登录前页面
// @ts-ignore // @ts-ignore
const redirect: Route = { const redirect: Route = {
name: 'index', name: "index",
query: {}, query: {}
}; };
if ( if (
storeUserInfo.redirect && storeUserInfo.redirect &&
storeUserInfo.redirect.name && storeUserInfo.redirect.name &&
storeUserInfo.redirect.name !== 'notFound' && storeUserInfo.redirect.name !== "notFound" &&
storeUserInfo.redirect.name !== 'login' storeUserInfo.redirect.name !== "login"
) { ) {
redirect.name = storeUserInfo.redirect.name; redirect.name = storeUserInfo.redirect.name;
redirect.query = storeUserInfo.redirect.query; redirect.query = storeUserInfo.redirect.query;
...@@ -95,75 +123,80 @@ export default { ...@@ -95,75 +123,80 @@ export default {
router.push(redirect as any); router.push(redirect as any);
} }
return { return {
formRef, loginTitle1, loginTitle2, loginLogo, formRef,
loading, form, rule, login: useLoading(loading, login), loginTitle1,
loginTitle2,
loginLogo,
loading,
form,
rule,
login: useLoading(loading, login)
}; };
}, }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.login{ .login {
background: url("../assets/bg.jpg") no-repeat; background: url("../assets/bg.jpg") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
min-height: 600px; min-height: 600px;
}
.login-body {
width: 90vw;
height: 90vh;
min-height: 400px;
.login-head {
color: white;
.title1 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 10px;
}
.title2 {
font-size: 1.8rem;
margin-bottom: 2rem;
}
} }
.login-body { .inner {
width: 90vw; width: 100%;
height: 90vh; max-height: 600px;
min-height: 400px; max-width: 1000px;
.login-head{ background: white;
color: white; padding: 2rem 2rem;
.title1{ box-shadow: 3px 3px 10px rgba($color: #000, $alpha: 0.5);
font-size: 2.5rem; border-radius: 10px;
font-weight: 700; font-size: 1rem;
margin-bottom: 10px; .left {
} img {
.title2{ height: 40vh;
font-size: 1.8rem;
margin-bottom: 2rem;
} }
} }
.inner{ .right {
width: 100%; width: 300px;
max-height: 600px; img {
max-width: 1000px; height: 3.8rem;
background: white; width: auto;
padding: 2rem 2rem; margin-bottom: 3rem;
box-shadow: 3px 3px 10px rgba($color: #000, $alpha: .5);
border-radius: 10px;
font-size: 1rem;
.left{
img{
height: 40vh;
}
} }
.right{ .el-input {
width: 300px; width: 230px;
img{ }
height: 3.8rem; .el-button {
width: auto; width: 230px;
margin-bottom: 3rem; font-weight: 600;
} margin: 0 auto;
.el-input{
width: 230px;
}
.el-button{
width: 230px;
font-weight: 600;
margin: 0 auto;
}
} }
} }
} }
.login-support{ }
/*margin-top: 3vh;*/ .login-support {
color: #fff; /*margin-top: 3vh;*/
width: 100%; color: #fff;
font-weight: 700; width: 100%;
font-size: 1.1rem; font-weight: 700;
text-align: center; font-size: 1.1rem;
} text-align: center;
}
</style> </style>
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