這是我使用Element-ui的布局，排布的一個界面，原本我是使用WinfowsForm來做的一個攝像頭注冊以及查詢的小工具，目前我關注前后端的開發，所以就想着能不能把這么個小工具，我用前后端的形式開發。發現是可以的，前端我使用Element-ui和vue,后端服務我使用.net core，這樣在生產車間部署起來也很快，將啟動這個工具使用批處理命令組合起來，啟動服務，隨后使用瀏覽器打開指定的訪問地址就可以了。也很方便，而且這個界面可以做的很炫酷，有大量的UI樣式可供修改，瞬間高大上。 以下是我界面前端界面排布部分示例。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入組件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<el-container>
<el-header style="background: grey; text-align: center; vertical-align: auto;" height="80px">
<h2>攝像頭數據查詢</h2>
</el-header>
<el-container>
<el-aside width="260px" >
<div>
<fieldset style="border-color: #E2ded6;border-width: 4px;border-style: solid;">
<legend style="color:#333333;font-size: 0.8em;font-weight: bold;">
<span>第一種方式：按時間區間查詢</span>
</legend>
<el-row>
<el-col :span="2">
<el-tag type="success">起始時間：</el-tag>
</el-col>
</el-row>
<el-row>
<el-col>
<div>
<el-date-picker
v-model="value1"
type="date"
placeholder="選擇日期">
</el-date-picker>
</div>
</el-col>
</el-row>
<el-row>
<el-tag type="success">終止時間：</el-tag>
</el-row>
<el-row>
<el-col>
<div>
<el-date-picker
v-model="value1"
type="date"
placeholder="選擇日期">
</el-date-picker>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-button style="width: 220px;" type="primary">立即查詢</el-button>
</el-col>
</el-row>
</fieldset>
</div>
<div>
<fieldset style="border-color: #E2ded6;border-width: 4px;border-style: solid;">
<legend style="color:#333333;font-size: 0.8em;font-weight: bold;">
<span>第二種方式:按序列號查詢</span>
</legend>
<el-row>
<el-col>
<span>序列號：</span>
</el-col>
</el-row>
<el-row>
<el-col>
<el-input style="width: 220px;"></el-input>
</el-col>
</el-row>
<el-row>
<el-col>
<el-button style="width: 220px;" type="primary">立即查詢</el-button>
</el-col>
</el-row>
</fieldset>
</div>
<div>
<fieldset style="border-color: #E2ded6;border-width: 4px;border-style: solid;">
<legend style="color:#333333;font-size: 0.8em;font-weight: bold;">
<span>第三種方式：多序列號查詢</span>
</legend>
<el-row>
<el-col>
<span>文件路徑：</span>
</el-col>
</el-row>
<el-row>
<el-col>
<el-upload
:file-list="fileList"
:limit="3"
action=“”
>
<el-button size="small" type="primary">選擇文件</el-button>
</el-upload>
</el-col>
</el-row>
<el-row>
<el-col>
<el-input style="width: 220px;"></el-input>
</el-col>
</el-row>
<el-row>
<el-col>
<el-button style="width: 220px" type="primary">選擇</el-button>
</el-col>
</el-row>
</fieldset>
</div>
<div>
<fieldset style="border-color: #E2ded6;border-width: 4px;border-style: solid;">
<legend style="color:#333333;font-size: 0.8em;font-weight: bold;">
<span>第四種方式：日報表</span>
</legend>
<el-row>
<el-col>
<div class="block">
<span class="demonstration">選擇日期</span>
<el-date-picker
v-model="value1"
type="date"
placeholder="選擇日期">
</el-date-picker>
</div>
</el-col>
</el-row>
<el-row>
<el-col>
<el-button style="width: 220px;" @click="dialogTableVisible=true" type="primary">立即查詢</el-button>
</el-col>
</el-row>
</fieldset>
<el-dialog title="收貨地址" :visible.sync="dialogTableVisible">
<el-table :data="gridData">
<el-table-column property="date" label="日期" width="150"></el-table-column>
<el-table-column property="name" label="姓名" width="200"></el-table-column>
<el-table-column property="address" label="地址"></el-table-column>
</el-table>
</el-dialog>
</div>
</el-aside>
<el-main>
<div>
<el-table height="627px"
:data="tableData3"
height="250"
border
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</div>
</el-main>
</el-container>
<el-footer height="50px" style="text-align: center; background-color: gray;">
<h3>時間：{{dateTime}}</span>
</el-footer>
</el-container>
</div>
<script>
var app = new Vue({
el: "#app",
created:function(){
//this.curTime();
},
data: {
fileList: [],
dialogTableVisible: false,
dateTime: '',
value1: '',
tableData3: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
},{
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
},{
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}]
,gridData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}],
},
methods: {
curTime: function(){
var date = new Date();
this.dateTime = date.toString();
setInterval(this.curTime, 1000);
},
}
})
</script>
</body>
</html>