Skip to content

D
donkey
Commit b52f3ca6 authored by caicaicai's avatar caicaicai
Browse files
Options

左侧菜单栏修改以及人员定位系统表格编写

parent 2920f33f
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1168 additions and 170 deletions
package-lock.json
View file @ b52f3ca6
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
"mockjs": "^1.1.0", "mockjs": "^1.1.0",
"moment": "^2.29.1", "moment": "^2.29.1",
"qs": "^6.10.1", "qs": "^6.10.1",
"screenfull": "^5.1.0",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-router": "^3.2.0", "vue-router": "^3.2.0",
"vuex": "^3.4.0" "vuex": "^3.4.0"
...@@ -12896,6 +12897,17 @@ ...@@ -12896,6 +12897,17 @@
"url": "https://opencollective.com/webpack" "url": "https://opencollective.com/webpack"
} }
}, },
"node_modules/screenfull": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.1.0.tgz",
"integrity": "sha512-dYaNuOdzr+kc6J6CFcBrzkLCfyGcMg+gWkJ8us93IQ7y1cevhQAugFsaCdMHb6lw8KV3xPzSxzH7zM1dQap9mA==",
"engines": {
"node": ">=0.10.0"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/scss-tokenizer": { "node_modules/scss-tokenizer": {
"version": "0.2.3", "version": "0.2.3",
"resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz", "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
...@@ -26437,6 +26449,11 @@ ...@@ -26437,6 +26449,11 @@
"ajv-keywords": "^3.5.2" "ajv-keywords": "^3.5.2"
} }
}, },
"screenfull": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.1.0.tgz",
"integrity": "sha512-dYaNuOdzr+kc6J6CFcBrzkLCfyGcMg+gWkJ8us93IQ7y1cevhQAugFsaCdMHb6lw8KV3xPzSxzH7zM1dQap9mA=="
},
"scss-tokenizer": { "scss-tokenizer": {
"version": "0.2.3", "version": "0.2.3",
"resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz", "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
src/assets/icon/iconfont.css
View file @ b52f3ca6
@font-face { @font-face {
font-family: "iconfont"; /* Project id 2766225 */ font-family: "iconfont"; /* Project id 2782333 */
src: url('iconfont.woff2?t=1630403828082') format('woff2'), src: url('iconfont.woff2?t=1630478178623') format('woff2'),
url('iconfont.woff?t=1630403828082') format('woff'), url('iconfont.woff?t=1630478178623') format('woff'),
url('iconfont.ttf?t=1630403828082') format('truetype'); url('iconfont.ttf?t=1630478178623') format('truetype');
} }
.iconfont { .iconfont {
...@@ -13,59 +13,63 @@ ...@@ -13,59 +13,63 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-ren-pingbi:before { .icon-ren-jianshao:before {
content: "\e705"; content: "\e705";
} }
.icon-shezhi:before { .icon-xiajiantou:before {
content: "\e611"; content: "\e60a";
} }
.icon-dian:before { .icon-dian:before {
content: "\e605"; content: "\e601";
} }
.icon-solid-home:before { .icon-bianpo:before {
content: "\e641"; content: "\e794";
} }
.icon-dingwei:before { .icon-leaf:before {
content: "\e692"; content: "\e642";
} }
.icon-wenjian:before { .icon-suoxiao:before {
content: "\e60c"; content: "\e616";
} }
.icon-diannao:before { .icon-70BasicIcons-all-48:before {
content: "\e602"; content: "\e64a";
} }
.icon-IOTtubiao_huabanfuben:before { .icon-dingwei:before {
content: "\e61a"; content: "\e600";
} }
.icon-xiajiantou:before { .icon-wenjianjia:before {
content: "\e60a"; content: "\e66f";
} }
.icon-bianpo:before { .icon-zhuye:before {
content: "\e794"; content: "\e61d";
} }
.icon-yezi:before { .icon-diannao:before {
content: "\e7d8"; content: "\e649";
}
.icon-che:before {
content: "\e609";
} }
.icon-kuaizhuanggengduo:before { .icon-kuaizhuanggengduo:before {
content: "\e6b4"; content: "\e66c";
} }
.icon-wenjianjia:before { .icon-shezhi:before {
content: "\e813"; content: "\e696";
} }
.icon-car-fill:before { .icon-a-ziyuan50:before {
content: "\eb91"; content: "\e6f2";
} }
src/assets/icon/iconfont.js
View file @ b52f3ca6
This diff is collapsed.
src/assets/icon/iconfont.json
View file @ b52f3ca6
{ {
"id": "2766225", "id": "2782333",
"name": "鑫海", "name": "鑫海2",
"font_family": "iconfont", "font_family": "iconfont",
"css_prefix_text": "icon-", "css_prefix_text": "icon-",
"description": "", "description": "",
"glyphs": [ "glyphs": [
{ {
"icon_id": "9974426", "icon_id": "9974423",
"name": "人-屏蔽", "name": "人-减少",
"font_class": "ren-pingbi", "font_class": "ren-jianshao",
"unicode": "e705", "unicode": "e705",
"unicode_decimal": 59141 "unicode_decimal": 59141
}, },
{ {
"icon_id": "10262050", "icon_id": "13474459",
"name": "设 置", "name": "下箭头",
"font_class": "shezhi", "font_class": "xiajiantou",
"unicode": "e611", "unicode": "e60a",
"unicode_decimal": 58897 "unicode_decimal": 58890
}, },
{ {
"icon_id": "15162652", "icon_id": "14918649",
"name": "dian", "name": "dian",
"font_class": "dian", "font_class": "dian",
"unicode": "e605", "unicode": "e601",
"unicode_decimal": 58885 "unicode_decimal": 58881
}, },
{ {
"icon_id": "1221894", "icon_id": "15196692",
"name": "房子 实心", "name": "边坡",
"font_class": "solid-home", "font_class": "bianpo",
"unicode": "e641", "unicode": "e794",
"unicode_decimal": 58945 "unicode_decimal": 59284
}, },
{ {
"icon_id": "1507976", "icon_id": "18012926",
"name": "定位", "name": "叶子",
"font_class": "dingwei", "font_class": "leaf",
"unicode": "e692", "unicode": "e642",
"unicode_decimal": 59026 "unicode_decimal": 58946
}, },
{ {
"icon_id": "1972966", "icon_id": "579386",
"name": "文件", "name": "缩小",
"font_class": "wenjian", "font_class": "suoxiao",
"unicode": "e60c", "unicode": "e616",
"unicode_decimal": 58892 "unicode_decimal": 58902
}, },
{ {
"icon_id": "6027490", "icon_id": "18924792",
"name": "电脑", "name": "放大",
"font_class": "diannao", "font_class": "70BasicIcons-all-48",
"unicode": "e602", "unicode": "e64a",
"unicode_decimal": 58882 "unicode_decimal": 58954
}, },
{ {
"icon_id": "9572488", "icon_id": "1901667",
"name": "门", "name": "定位",
"font_class": "IOTtubiao_huabanfuben", "font_class": "dingwei",
"unicode": "e61a", "unicode": "e600",
"unicode_decimal": 58906 "unicode_decimal": 58880
}, },
{ {
"icon_id": "13474459", "icon_id": "5729042",
"name": "下箭头", "name": "文件夹",
"font_class": "xiajiantou", "font_class": "wenjianjia",
"unicode": "e60a", "unicode": "e66f",
"unicode_decimal": 58890 "unicode_decimal": 58991
}, },
{ {
"icon_id": "15196692", "icon_id": "6429564",
"name": "边坡", "name": "主页",
"font_class": "bianpo", "font_class": "zhuye",
"unicode": "e794", "unicode": "e61d",
"unicode_decimal": 59284 "unicode_decimal": 58909
}, },
{ {
"icon_id": "15905225", "icon_id": "9748109",
"name": "叶子", "name": "电脑",
"font_class": "yezi", "font_class": "diannao",
"unicode": "e7d8", "unicode": "e649",
"unicode_decimal": 59352 "unicode_decimal": 58953
},
{
"icon_id": "13581222",
"name": "车",
"font_class": "che",
"unicode": "e609",
"unicode_decimal": 58889
}, },
{ {
"icon_id": "16516751", "icon_id": "16384707",
"name": "块状更多", "name": "块状更多",
"font_class": "kuaizhuanggengduo", "font_class": "kuaizhuanggengduo",
"unicode": "e6b4", "unicode": "e66c",
"unicode_decimal": 59060 "unicode_decimal": 58988
}, },
{ {
"icon_id": "17710966", "icon_id": "18379488",
"name": "文件夹", "name": "设 置",
"font_class": "wenjianjia", "font_class": "shezhi",
"unicode": "e813", "unicode": "e696",
"unicode_decimal": 59411 "unicode_decimal": 59030
}, },
{ {
"icon_id": "19691553", "icon_id": "22861713",
"name": "车", "name": "门",
"font_class": "car-fill", "font_class": "a-ziyuan50",
"unicode": "eb91", "unicode": "e6f2",
"unicode_decimal": 60305 "unicode_decimal": 59122
} }
] ]
} }
src/main.js
View file @ b52f3ca6
...@@ -7,8 +7,8 @@ import 'element-ui/lib/theme-chalk/index.css'; ...@@ -7,8 +7,8 @@ import 'element-ui/lib/theme-chalk/index.css';
import '../plugins/jquery-2.1.1.min.js'; import '../plugins/jquery-2.1.1.min.js';
import $ from 'jquery' import $ from 'jquery'
import './assets/icon/iconfont.css' import './assets/icon/iconfont.css'
Vue.prototype.$ = $;
Vue.prototype.$ = $;
Vue.use(ElementUI); Vue.use(ElementUI);
......
src/views/homepage.vue
View file @ b52f3ca6
...@@ -4,14 +4,11 @@ ...@@ -4,14 +4,11 @@
<div class="topMenuBar"> <div class="topMenuBar">
<span>{{ $store.state.platformName }}</span> <span>{{ $store.state.platformName }}</span>
<div class="userInformationBar"> <div class="userInformationBar">
<div style="margin-right:10px;">
<span>用户权限</span>
<span class="iconfont icon-xiajiantou xiajiantou" style="font-size:18px;"></span>
</div>
<div style="margin-right:10px;"> <div style="margin-right:10px;">
<span>{{userName}}</span> <span>{{userName}}</span>
<span class="iconfont icon-xiajiantou xiajiantou" style="font-size:18px;"></span> <span class="iconfont icon-xiajiantou xiajiantou" style="font-size:18px;"></span>
</div> </div>
<el-button type="primary" circle @click="handleFullScreen()" size="small" style="margin-right:10px;"><span :class="quanping"></span></el-button>
<img src="../imgs/yonghu.png"> <img src="../imgs/yonghu.png">
</div> </div>
</div> </div>
...@@ -23,7 +20,7 @@ ...@@ -23,7 +20,7 @@
<el-menu class="el-menu-vertical-demo" background-color="rgb(9, 26, 69)" text-color="rgb(3,156,205)" active-text-color="white" :unique-opened="true" :router="true"> <el-menu class="el-menu-vertical-demo" background-color="rgb(9, 26, 69)" text-color="rgb(3,156,205)" active-text-color="white" :unique-opened="true" :router="true">
<el-menu-item index="/homepage/mineMonitoring"> <el-menu-item index="/homepage/mineMonitoring">
<i class="iconfont icon-solid-home" style="margin-right:10px;color:rgb(3,156,205);"></i> <i class="iconfont icon-zhuye" style="margin-right:10px;color:rgb(3,156,205);"></i>
<span slot="title">矿区监控</span> <span slot="title">矿区监控</span>
</el-menu-item> </el-menu-item>
<el-menu-item index="/homepage/videoSurveillance"> <el-menu-item index="/homepage/videoSurveillance">
...@@ -33,7 +30,7 @@ ...@@ -33,7 +30,7 @@
<el-submenu index="shengchanzidonghua"> <el-submenu index="shengchanzidonghua">
<template slot="title"> <template slot="title">
<i class="iconfont icon-wenjianjia" style="margin-right:10px;color:rgb(3,156,205);"></i> <i class="iconfont icon-wenjianjia" style="margin-right:10px;color:rgb(3,156,205);"></i>
<span>生产自动化系统</span> <span>生产系统</span>
</template> </template>
<el-menu-item index="/homepage/AutomationHomepage">系统首页</el-menu-item> <el-menu-item index="/homepage/AutomationHomepage">系统首页</el-menu-item>
<el-menu-item index="/homepage/AutomatedReport">生产报表</el-menu-item> <el-menu-item index="/homepage/AutomatedReport">生产报表</el-menu-item>
...@@ -41,7 +38,7 @@ ...@@ -41,7 +38,7 @@
<el-submenu index="people"> <el-submenu index="people">
<template slot="title"> <template slot="title">
<i class="iconfont icon-dingwei" style="margin-right:10px;color:rgb(3,156,205);"></i> <i class="iconfont icon-dingwei" style="margin-right:10px;color:rgb(3,156,205);"></i>
<span>人员定位系统</span> <span>人员定位</span>
</template> </template>
<el-menu-item index="/homepage/PersonnelPositioningHomePage">系统首页</el-menu-item> <el-menu-item index="/homepage/PersonnelPositioningHomePage">系统首页</el-menu-item>
<el-menu-item index="/homepage/PersonnelPositioningnowData">实时数据</el-menu-item> <el-menu-item index="/homepage/PersonnelPositioningnowData">实时数据</el-menu-item>
...@@ -49,12 +46,12 @@ ...@@ -49,12 +46,12 @@
<el-menu-item index="/homepage/PersonnelPositioningHistroyData">历史数据</el-menu-item> <el-menu-item index="/homepage/PersonnelPositioningHistroyData">历史数据</el-menu-item>
<el-menu-item index="/homepage/PersonnelPositioningAlarm">报警历史</el-menu-item> <el-menu-item index="/homepage/PersonnelPositioningAlarm">报警历史</el-menu-item>
<el-menu-item index="/homepage/PersonnelPositioningEnclosure">围栏设定</el-menu-item> <el-menu-item index="/homepage/PersonnelPositioningEnclosure">围栏设定</el-menu-item>
<el-menu-item index="/homepage/PersonnelPositioningRegister">人员等级</el-menu-item> <el-menu-item index="/homepage/PersonnelPositioningRegister">人员登记</el-menu-item>
</el-submenu> </el-submenu>
<el-submenu index="cars"> <el-submenu index="cars">
<template slot="title"> <template slot="title">
<i class="iconfont icon-car-fill" style="margin-right:10px;color:rgb(3,156,205);"></i> <i class="iconfont icon-che" style="margin-right:10px;color:rgb(3,156,205);"></i>
<span>车辆定位系统</span> <span>车辆定位</span>
</template> </template>
<el-menu-item index="/homepage/carPositioningHomePage">系统首页</el-menu-item> <el-menu-item index="/homepage/carPositioningHomePage">系统首页</el-menu-item>
<el-menu-item index="/homepage/carPositioningnowData">实时数据</el-menu-item> <el-menu-item index="/homepage/carPositioningnowData">实时数据</el-menu-item>
...@@ -62,12 +59,12 @@ ...@@ -62,12 +59,12 @@
<el-menu-item index="/homepage/carPositioningHistroyData">历史数据</el-menu-item> <el-menu-item index="/homepage/carPositioningHistroyData">历史数据</el-menu-item>
<el-menu-item index="/homepage/carPositioningAlarm">报警历史</el-menu-item> <el-menu-item index="/homepage/carPositioningAlarm">报警历史</el-menu-item>
<el-menu-item index="/homepage/carPositioningEnclosure">围栏设定</el-menu-item> <el-menu-item index="/homepage/carPositioningEnclosure">围栏设定</el-menu-item>
<el-menu-item index="/homepage/carPositioningRegister">人员等级</el-menu-item> <el-menu-item index="/homepage/carPositioningRegister">车辆登记</el-menu-item>
</el-submenu> </el-submenu>
<el-submenu index="bianpo"> <el-submenu index="bianpo">
<template slot="title"> <template slot="title">
<i class="iconfont icon-bianpo" style="margin-right:10px;color:rgb(3,156,205);"></i> <i class="iconfont icon-bianpo" style="margin-right:10px;color:rgb(3,156,205);"></i>
<span>边坡在线监测</span> <span>边坡监测</span>
</template> </template>
<el-menu-item index="/homepage/SlopeHomePage">系统首页</el-menu-item> <el-menu-item index="/homepage/SlopeHomePage">系统首页</el-menu-item>
<el-menu-item index="/homepage/SlopeHorizontal">坝体表面水平位移</el-menu-item> <el-menu-item index="/homepage/SlopeHorizontal">坝体表面水平位移</el-menu-item>
...@@ -79,8 +76,8 @@ ...@@ -79,8 +76,8 @@
</el-submenu> </el-submenu>
<el-submenu index="huanjign"> <el-submenu index="huanjign">
<template slot="title"> <template slot="title">
<i class="iconfont icon-yezi" style="margin-right:10px;color:rgb(3,156,205);"></i> <i class="iconfont icon-leaf" style="margin-right:10px;color:rgb(3,156,205);"></i>
<span>环境在线监测</span> <span>环境监测</span>
</template> </template>
<el-menu-item index="/homepage/EnvironmentHomepage">系统首页</el-menu-item> <el-menu-item index="/homepage/EnvironmentHomepage">系统首页</el-menu-item>
<el-menu-item index="/homepage/EnvironmentNowData">实时数据</el-menu-item> <el-menu-item index="/homepage/EnvironmentNowData">实时数据</el-menu-item>
...@@ -90,17 +87,17 @@ ...@@ -90,17 +87,17 @@
<el-submenu index="shuzihuachuliang"> <el-submenu index="shuzihuachuliang">
<template slot="title"> <template slot="title">
<i class="iconfont icon-kuaizhuanggengduo" style="margin-right:10px;color:rgb(3,156,205);"></i> <i class="iconfont icon-kuaizhuanggengduo" style="margin-right:10px;color:rgb(3,156,205);"></i>
<span>数字化储量管理</span> <span>储量管理</span>
</template> </template>
<el-menu-item index="/homepage/reservesHomepage">系统首页</el-menu-item> <el-menu-item index="/homepage/reservesHomepage">系统首页</el-menu-item>
<el-menu-item index="/homepage/reservesList">管理列表</el-menu-item> <el-menu-item index="/homepage/reservesList">管理列表</el-menu-item>
</el-submenu> </el-submenu>
<el-menu-item index="/homepage/AccessHomepage"> <el-menu-item index="/homepage/AccessHomepage">
<i class="iconfont icon-IOTtubiao_huabanfuben" style="margin-right:10px;color:rgb(3,156,205);"></i> <i class="iconfont icon-a-ziyuan50" style="margin-right:10px;color:rgb(3,156,205);"></i>
<span slot="title">门禁系统</span> <span slot="title">门禁系统</span>
</el-menu-item> </el-menu-item>
<el-menu-item index="/homepage/unman"> <el-menu-item index="/homepage/unman">
<i class="iconfont icon-ren-pingbi" style="margin-right:10px;color:rgb(3,156,205);"></i> <i class="iconfont icon-ren-jianshao" style="margin-right:10px;color:rgb(3,156,205);"></i>
<span slot="title">无人值守</span> <span slot="title">无人值守</span>
</el-menu-item> </el-menu-item>
<el-menu-item index="jiankongdaping"> <el-menu-item index="jiankongdaping">
...@@ -137,16 +134,43 @@ export default { ...@@ -137,16 +134,43 @@ export default {
data(){ data(){
return{ return{
userName:"qwqwqw", userName:"qwqwqw",
fullscreen: false,
quanping:"iconfont icon-70BasicIcons-all-48",
} }
}, },
methods: { methods: {
// handleOpen(key, keyPath) { handleFullScreen(){
// console.log(key, keyPath); let element = document.documentElement;
// }, if (this.fullscreen) {
// handleClose(key, keyPath) { if (document.exitFullscreen) {
// console.log(key, keyPath); document.exitFullscreen();
// }, } else if (document.webkitCancelFullScreen) {
}, document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen();
}
}
if(this.fullscreen){
this.quanping = "iconfont icon-70BasicIcons-all-48"
}else{
this.quanping = "iconfont icon-suoxiao"
}
this.fullscreen = !this.fullscreen;
}
}
}; };
</script> </script>
...@@ -156,9 +180,13 @@ export default { ...@@ -156,9 +180,13 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.viewBody{
height: 100vh;
overflow: hidden;
}
.topMenuBar { .topMenuBar {
width: 100%; width: 100%;
height: 70px; height: 7%;
background: -webkit-linear-gradient(rgb(14, 35, 94), rgb(9, 26, 69)); background: -webkit-linear-gradient(rgb(14, 35, 94), rgb(9, 26, 69));
padding: 0px 20px; padding: 0px 20px;
box-sizing: border-box; box-sizing: border-box;
...@@ -189,22 +217,32 @@ export default { ...@@ -189,22 +217,32 @@ export default {
height: 21px; height: 21px;
} }
.mainBody{ .mainBody{
min-height: 100vh; height: 93%;
display: flex; display: flex;
} }
.leftMenuBar{ .leftMenuBar{
width: 12%; width: 12.5%;
overflow: hidden; height: 100%;
overflow: auto;
background-color: rgb(9,26,69);
font-family: 'Tangerine', serif !important;
}
.leftMenuBar::-webkit-scrollbar{
display:none;
} }
.rightBody{ .rightBody{
width: 88%; width: 87.5%;
overflow: hidden; height: 100%;
overflow: auto;
background-color: rgb(0,20,78);
}
.rightBody::-webkit-scrollbar{
display:none;
} }
.leftMenuBar>.tac>.el-col>ul{ .leftMenuBar>.tac>.el-col>ul{
width: 240px; width: 240px;
min-height: 100vh; letter-spacing: 2px;
letter-spacing: 2px; font-weight: 600;
font-weight: 600;
} }
.el-menu .el-menu-item{ .el-menu .el-menu-item{
font-size: 17px; font-size: 17px;
...@@ -212,13 +250,22 @@ export default { ...@@ -212,13 +250,22 @@ export default {
.el-menu .el-submenu__title{ .el-menu .el-submenu__title{
font-size: 17px; font-size: 17px;
} }
.el-menu .iconfont{
margin-left: 20px !important;
}
.el-menu-item:hover{
background-color: rgb(7,36,118) !important;
}
.el-submenu__title:hover{
background-color: rgb(7,36,118) !important;
}
.xiajiantou{ .xiajiantou{
display: inline-block; display: inline-block;
width: 18px; width: 18px;
height: 18px; height: 18px;
} }
.el-submenu>.el-menu>.el-menu-item{ .el-submenu>.el-menu>.el-menu-item{
padding-left: 50px !important; padding-left: 70px !important;
box-sizing: border-box !important; box-sizing: border-box !important;
} }
.el-menu-item, .el-submenu__title { .el-menu-item, .el-submenu__title {
......
src/views/mineMonitoring.vue
View file @ b52f3ca6
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
</div> </div>
<div class="intelligentDispatchLeft_bottom"> <div class="intelligentDispatchLeft_bottom">
<div v-for="(item,index) in intelligentDispatchArray" :key="index"> <div v-for="(item,index) in intelligentDispatchArray" :key="index">
<span class="iconfont icon-dian" style="color:#28F7FF;font-size:30px;"></span> <span class="iconfont icon-dian" style="color:#28F7FF;font-size:16px;"></span>
<span style="color:white;">{{item.name}}：</span> <span style="color:white;">{{item.name}}：</span>
<span style="color:#28F7FF;">{{item.num}}</span> <span style="color:#28F7FF;">{{item.num}}</span>
</div> </div>
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
</div> </div>
<div class="environmentalMonitoringLeft_bottom"> <div class="environmentalMonitoringLeft_bottom">
<div v-for="(item,index) in environmentalMonitoringArray" :key="index"> <div v-for="(item,index) in environmentalMonitoringArray" :key="index">
<span class="iconfont icon-dian" style="color:#28F7FF;font-size:30px;" v-show="index % 2 == 0"></span> <span class="iconfont icon-dian" style="color:#28F7FF;font-size:16px;" v-show="index % 2 == 0"></span>
<span style="color:white;">{{item.name}}:</span> <span style="color:white;">{{item.name}}:</span>
<span style="color:#28F7FF;">{{item.num}}</span> <span style="color:#28F7FF;">{{item.num}}</span>
</div> </div>
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
</div> </div>
<div class="locationSystemLeft_bottom"> <div class="locationSystemLeft_bottom">
<div v-for="(item,index) in locationSystemArray" :key="index"> <div v-for="(item,index) in locationSystemArray" :key="index">
<span class="iconfont icon-dian" style="color:#28F7FF;font-size:30px;"></span> <span class="iconfont icon-dian" style="color:#28F7FF;font-size:16px;"></span>
<span style="color:white;">{{item.name}}：</span> <span style="color:white;">{{item.name}}：</span>
<span style="color:#28F7FF;">{{item.num}}</span> <span style="color:#28F7FF;">{{item.num}}</span>
</div> </div>
...@@ -77,7 +77,7 @@ ...@@ -77,7 +77,7 @@
</div> </div>
<div class="slopeMonitoringLeft_bottom"> <div class="slopeMonitoringLeft_bottom">
<div v-for="(item,index) in slopeMonitoringArray" :key="index"> <div v-for="(item,index) in slopeMonitoringArray" :key="index">
<span class="iconfont icon-dian" style="color:#28F7FF;font-size:30px;"></span> <span class="iconfont icon-dian" style="color:#28F7FF;font-size:16px;"></span>
<span style="color:white;">{{item.name}}：</span> <span style="color:white;">{{item.name}}：</span>
<span style="color:#28F7FF;">{{item.num}}</span> <span style="color:#28F7FF;">{{item.num}}</span>
</div> </div>
...@@ -88,7 +88,7 @@ ...@@ -88,7 +88,7 @@
<!-- 生产自动化 --> <!-- 生产自动化 -->
<div class="productionAutomation"> <div class="productionAutomation">
<div class="productionAutomationRight"> <div class="productionAutomationRight">
<img src="../imgs/zhinengpaidan.png" style="margin-left:33px;"> <img src="../imgs/shengchanzidonghua.png" style="margin-left:33px;">
<div style="color:#28F7FF;font-size:28px;text-align: center;">{{$store.state.a.productionAutomation.name}}</div> <div style="color:#28F7FF;font-size:28px;text-align: center;">{{$store.state.a.productionAutomation.name}}</div>
<img src="../imgs/juxing2.png" style="margin:10px 0px 0px 80px;"> <img src="../imgs/juxing2.png" style="margin:10px 0px 0px 80px;">
</div> </div>
...@@ -98,7 +98,7 @@ ...@@ -98,7 +98,7 @@
</div> </div>
<div class="productionAutomationLeft_bottom"> <div class="productionAutomationLeft_bottom">
<div v-for="(item,index) in productionAutomationArray" :key="index"> <div v-for="(item,index) in productionAutomationArray" :key="index">
<span class="iconfont icon-dian" style="color:#28F7FF;font-size:30px;"></span> <span class="iconfont icon-dian" style="color:#28F7FF;font-size:16px;"></span>
<span style="color:white;">{{item.name}}：</span> <span style="color:white;">{{item.name}}：</span>
<span style="color:#28F7FF;">{{item.num}}</span> <span style="color:#28F7FF;">{{item.num}}</span>
</div> </div>
...@@ -133,7 +133,7 @@ export default { ...@@ -133,7 +133,7 @@ export default {
.allBox{ .allBox{
background-image: url("../imgs/5dd5481bb9102.png"); background-image: url("../imgs/5dd5481bb9102.png");
width: 100%; width: 100%;
height: 100vh; height: 100%;
position: relative; position: relative;
} }
/* 智能派单系统 */ /* 智能派单系统 */
...@@ -156,7 +156,7 @@ export default { ...@@ -156,7 +156,7 @@ export default {
justify-content: space-between; justify-content: space-between;
} }
.intelligentDispatchLeft_bottom{ .intelligentDispatchLeft_bottom{
padding: 5px 15px 0px; padding: 5px 22px 0px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
...@@ -191,7 +191,7 @@ export default { ...@@ -191,7 +191,7 @@ export default {
} }
.environmentalMonitoringLeft_bottom{ .environmentalMonitoringLeft_bottom{
width: 100%; width: 100%;
padding: 5px 17px 0px; padding: 5px 22px 0px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -211,7 +211,7 @@ export default { ...@@ -211,7 +211,7 @@ export default {
} }
/* 定位系统 */ /* 定位系统 */
.locationSystem{ .locationSystem{
top: 55%; top: 53%;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
position: absolute; position: absolute;
...@@ -230,7 +230,7 @@ export default { ...@@ -230,7 +230,7 @@ export default {
} }
.locationSystemLeft_bottom{ .locationSystemLeft_bottom{
width: 100%; width: 100%;
padding: 5px 17px 0px; padding: 5px 22px 0px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -267,7 +267,7 @@ export default { ...@@ -267,7 +267,7 @@ export default {
} }
.slopeMonitoringLeft_bottom{ .slopeMonitoringLeft_bottom{
width: 100%; width: 100%;
padding: 5px 18px 0px; padding: 5px 22px 0px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -302,7 +302,7 @@ export default { ...@@ -302,7 +302,7 @@ export default {
justify-content: space-between; justify-content: space-between;
} }
.productionAutomationLeft_bottom{ .productionAutomationLeft_bottom{
padding: 5px 15px 0px; padding: 5px 22px 0px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
......
src/views/personnelPositioning/alarm.vue
View file @ b52f3ca6
<template> <template>
<div> <div class="AuHiViewBody">
<span>
人员定位系统报警历史 <div class="AuHiTop">
</span> <div style="font-size:20px;font-weight:600;">查询搜索</div>
<div style="margin-top:10px;display:flex;">
<div>
<template>
<el-select v-model="feijishebei.value" placeholder="请选择风机设备">
<el-option
v-for="item in feijishebei.options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</div>
<div style="margin-left:20px;">
<template>
<el-select v-model="jiancexiang.value" placeholder="请选择监测项">
<el-option
v-for="item in jiancexiang.options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</div>
<div style="margin-left:20px;">
<template>
<el-date-picker
v-model="selectDate1.value"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</template>
</div>
<div style="margin:0px 20px;">
<template>
<el-date-picker
v-model="selectDate2.value"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</template>
</div>
<el-button type="primary" icon="el-icon-upload2" @click="daochu()">导出</el-button>
<el-button icon="el-icon-printer" @click="dayin()">打印</el-button>
</div>
</div>
<div class="AuHiBottom">
<template>
<el-table :data="automatedReportData" height="700" border style="width: 100%" :row-style="tableRowStyle">
<el-table-column prop="equipment" label="产品设备" align="center"></el-table-column>
<el-table-column prop="name" label="指标名称" align="center"></el-table-column>
<el-table-column prop="numerical" label="数值" align="center"></el-table-column>
<el-table-column prop="alarmLevel" label="报警级别" align="center"></el-table-column>
<el-table-column prop="time" label="时间" align="center"></el-table-column>
<el-table-column prop="status" label="处理状态" align="center"></el-table-column>
</el-table>
</template>
</div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data() {
return {
feijishebei:{
options: [{
value: '1号风机设备',
label: '1号风机设备'
}, {
value: '2号风机设备',
label: '2号风机设备'
}, {
value: '3号风机设备',
label: '3号风机设备'
}, {
value: '4号风机设备',
label: '4号风机设备'
}, {
value: '5号风机设备',
label: '5号风机设备'
}],
value: ''
},
jiancexiang:{
options: [{
value: '选项1',
label: '111'
}, {
value: '选项2',
label: '222'
}, {
value: '选项3',
label: '333'
}, {
value: '选项4',
label: '444'
}, {
value: '选项5',
label: '555'
}],
value: ''
},
selectDate1:{
value:""
},
selectDate2:{
value:""
},
automatedReportData:[{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
}],
}
},
methods:{
tableRowStyle({row, rowIndex}) {
// if (row.name == "王小虎") {
// return 'background: rgb(255,232,232);';
// }
},
daochu(){
//获取表格
var exportFileContent = document.querySelector(".el-table").outerHTML;
//设置格式为Excel，表格内容通过btoa转化为base64，此方法只在文件较小时使用(小于1M)
//exportFileContent=window.btoa(unescape(encodeURIComponent(exportFileContent)));
//var link = "data:"+MIMEType+";base64," + exportFileContent;
//使用Blob
var blob = new Blob([exportFileContent], {type: "text/plain;charset=utf-8"}); //解决中文乱码问题
blob = new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});
//设置链接
var link = window.URL.createObjectURL(blob);
var a = document.createElement("a"); //创建a标签
a.download = "生产自动化系统实时数据表.xls"; //设置被下载的超链接目标（文件名）
a.href = link; //设置a标签的链接
document.body.appendChild(a); //a标签添加到页面
a.click(); //设置a标签触发单击事件
document.body.removeChild(a); //移除a标签
},
dayin(){
var tableToPrint = document.querySelector(".el-table");//将要被打印的表格
var newWin= window.open("");//新打开一个空窗口
newWin.document.write(tableToPrint.outerHTML);//将表格添加进新的窗口
newWin.document.close();//在IE浏览器中使用必须添加这一句
newWin.focus();//在IE浏览器中使用必须添加这一句
newWin.print();//打印
newWin.close();//关闭窗口
},
}
} }
</script> </script>
<style> <style scoped>
.AuHiViewBody{
width: 100%;
height: 100%;
background-color: rgb(245,246,251);
padding: 30px;
box-sizing: border-box;
}
.AuHiTop{
height: 110px;
background-color: white;
border-radius: 10px;
padding: 18px 20px 0px ;
box-sizing: border-box;
}
.AuHiBottom{
width: 100%;
background-color: white;
padding: 30px;
box-sizing: border-box;
height: 750px;
margin-top: 20px;
}
.el-table .warning{
background: red !important;
}
.el-table .success-row {
background: blue;
}
</style> </style>
\ No newline at end of file
src/views/personnelPositioning/histroyData.vue
View file @ b52f3ca6
<template> <template>
<div> <div class="AuHiViewBody">
<span>
人员定位系统历史数据 <div class="AuHiTop">
</span> <div style="font-size:20px;font-weight:600;">查询搜索</div>
<div style="margin-top:10px;display:flex;">
<div>
<template>
<el-select v-model="feijishebei.value" placeholder="请选择风机设备">
<el-option
v-for="item in feijishebei.options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</div>
<div style="margin-left:20px;">
<template>
<el-select v-model="jiancexiang.value" placeholder="请选择监测项">
<el-option
v-for="item in jiancexiang.options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</div>
<div style="margin-left:20px;">
<template>
<el-date-picker
v-model="selectDate1.value"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</template>
</div>
<div style="margin:0px 20px;">
<template>
<el-date-picker
v-model="selectDate2.value"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</template>
</div>
<el-button type="primary" icon="el-icon-upload2" @click="daochu()">导出</el-button>
<el-button icon="el-icon-printer" @click="dayin()">打印</el-button>
</div>
</div>
<div class="AuHiBottom">
<template>
<el-table :data="automatedReportData" height="700" border style="width: 100%" :row-style="tableRowStyle">
<el-table-column prop="equipment" label="产品设备" align="center"></el-table-column>
<el-table-column prop="name" label="指标名称" align="center"></el-table-column>
<el-table-column prop="numerical" label="数值" align="center"></el-table-column>
<el-table-column prop="alarmLevel" label="报警级别" align="center"></el-table-column>
<el-table-column prop="time" label="时间" align="center"></el-table-column>
<el-table-column prop="status" label="处理状态" align="center"></el-table-column>
</el-table>
</template>
</div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data() {
return {
feijishebei:{
options: [{
value: '1号风机设备',
label: '1号风机设备'
}, {
value: '2号风机设备',
label: '2号风机设备'
}, {
value: '3号风机设备',
label: '3号风机设备'
}, {
value: '4号风机设备',
label: '4号风机设备'
}, {
value: '5号风机设备',
label: '5号风机设备'
}],
value: ''
},
jiancexiang:{
options: [{
value: '选项1',
label: '111'
}, {
value: '选项2',
label: '222'
}, {
value: '选项3',
label: '333'
}, {
value: '选项4',
label: '444'
}, {
value: '选项5',
label: '555'
}],
value: ''
},
selectDate1:{
value:""
},
selectDate2:{
value:""
},
automatedReportData:[{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
}],
}
},
methods:{
tableRowStyle({row, rowIndex}) {
// if (row.name == "王小虎") {
// return 'background: rgb(255,232,232);';
// }
},
daochu(){
//获取表格
var exportFileContent = document.querySelector(".el-table").outerHTML;
//设置格式为Excel，表格内容通过btoa转化为base64，此方法只在文件较小时使用(小于1M)
//exportFileContent=window.btoa(unescape(encodeURIComponent(exportFileContent)));
//var link = "data:"+MIMEType+";base64," + exportFileContent;
//使用Blob
var blob = new Blob([exportFileContent], {type: "text/plain;charset=utf-8"}); //解决中文乱码问题
blob = new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});
//设置链接
var link = window.URL.createObjectURL(blob);
var a = document.createElement("a"); //创建a标签
a.download = "生产自动化系统实时数据表.xls"; //设置被下载的超链接目标（文件名）
a.href = link; //设置a标签的链接
document.body.appendChild(a); //a标签添加到页面
a.click(); //设置a标签触发单击事件
document.body.removeChild(a); //移除a标签
},
dayin(){
var tableToPrint = document.querySelector(".el-table");//将要被打印的表格
var newWin= window.open("");//新打开一个空窗口
newWin.document.write(tableToPrint.outerHTML);//将表格添加进新的窗口
newWin.document.close();//在IE浏览器中使用必须添加这一句
newWin.focus();//在IE浏览器中使用必须添加这一句
newWin.print();//打印
newWin.close();//关闭窗口
},
}
} }
</script> </script>
<style> <style scoped>
.AuHiViewBody{
width: 100%;
height: 100%;
background-color: rgb(245,246,251);
padding: 30px;
box-sizing: border-box;
}
.AuHiTop{
height: 110px;
background-color: white;
border-radius: 10px;
padding: 18px 20px 0px ;
box-sizing: border-box;
}
.AuHiBottom{
width: 100%;
background-color: white;
padding: 30px;
box-sizing: border-box;
height: 750px;
margin-top: 20px;
}
.el-table .warning{
background: red !important;
}
.el-table .success-row {
background: blue;
}
</style> </style>
\ No newline at end of file
src/views/personnelPositioning/nowData.vue
View file @ b52f3ca6
<template> <template>
<div> <div class="AuHiViewBody">
<span>
人员定位系统实时数据 <div class="AuHiTop">
</span> <div style="font-size:20px;font-weight:600;">查询搜索</div>
<div style="margin-top:10px;display:flex;">
<div>
<template>
<el-select v-model="feijishebei.value" placeholder="请选择风机设备">
<el-option
v-for="item in feijishebei.options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</div>
<div style="margin-left:20px;">
<template>
<el-select v-model="jiancexiang.value" placeholder="请选择监测项">
<el-option
v-for="item in jiancexiang.options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</div>
<div style="margin-left:20px;">
<template>
<el-date-picker
v-model="selectDate1.value"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</template>
</div>
<div style="margin:0px 20px;">
<template>
<el-date-picker
v-model="selectDate2.value"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</template>
</div>
<el-button type="primary" icon="el-icon-upload2" @click="daochu()">导出</el-button>
<el-button icon="el-icon-printer" @click="dayin()">打印</el-button>
</div>
</div>
<div class="AuHiBottom">
<template>
<el-table :data="automatedReportData" height="700" border style="width: 100%" :row-style="tableRowStyle">
<el-table-column prop="equipment" label="产品设备" align="center"></el-table-column>
<el-table-column prop="name" label="指标名称" align="center"></el-table-column>
<el-table-column prop="numerical" label="数值" align="center"></el-table-column>
<el-table-column prop="alarmLevel" label="报警级别" align="center"></el-table-column>
<el-table-column prop="time" label="时间" align="center"></el-table-column>
<el-table-column prop="status" label="处理状态" align="center"></el-table-column>
</el-table>
</template>
</div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data() {
return {
feijishebei:{
options: [{
value: '1号风机设备',
label: '1号风机设备'
}, {
value: '2号风机设备',
label: '2号风机设备'
}, {
value: '3号风机设备',
label: '3号风机设备'
}, {
value: '4号风机设备',
label: '4号风机设备'
}, {
value: '5号风机设备',
label: '5号风机设备'
}],
value: ''
},
jiancexiang:{
options: [{
value: '选项1',
label: '111'
}, {
value: '选项2',
label: '222'
}, {
value: '选项3',
label: '333'
}, {
value: '选项4',
label: '444'
}, {
value: '选项5',
label: '555'
}],
value: ''
},
selectDate1:{
value:""
},
selectDate2:{
value:""
},
automatedReportData:[{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
},{
equipment: '2016-05-02',
name: '王小虎',
numerical: '上海市普陀区金沙江路 1518 弄',
alarmLevel: '2016-05-02',
time: '王小虎',
status: '上海市普陀区金沙江路 1518 弄'
}],
}
},
methods:{
tableRowStyle({row, rowIndex}) {
// if (row.name == "王小虎") {
// return 'background: rgb(255,232,232);';
// }
},
daochu(){
//获取表格
var exportFileContent = document.querySelector(".el-table").outerHTML;
//设置格式为Excel，表格内容通过btoa转化为base64，此方法只在文件较小时使用(小于1M)
//exportFileContent=window.btoa(unescape(encodeURIComponent(exportFileContent)));
//var link = "data:"+MIMEType+";base64," + exportFileContent;
//使用Blob
var blob = new Blob([exportFileContent], {type: "text/plain;charset=utf-8"}); //解决中文乱码问题
blob = new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});
//设置链接
var link = window.URL.createObjectURL(blob);
var a = document.createElement("a"); //创建a标签
a.download = "生产自动化系统实时数据表.xls"; //设置被下载的超链接目标（文件名）
a.href = link; //设置a标签的链接
document.body.appendChild(a); //a标签添加到页面
a.click(); //设置a标签触发单击事件
document.body.removeChild(a); //移除a标签
},
dayin(){
var tableToPrint = document.querySelector(".el-table");//将要被打印的表格
var newWin= window.open("");//新打开一个空窗口
newWin.document.write(tableToPrint.outerHTML);//将表格添加进新的窗口
newWin.document.close();//在IE浏览器中使用必须添加这一句
newWin.focus();//在IE浏览器中使用必须添加这一句
newWin.print();//打印
newWin.close();//关闭窗口
},
}
} }
</script> </script>
<style> <style scoped>
.AuHiViewBody{
width: 100%;
height:100%;
background-color: rgb(245,246,251);
padding: 30px;
box-sizing: border-box;
}
.AuHiTop{
height: 110px;
background-color: white;
border-radius: 10px;
padding: 18px 20px 0px ;
box-sizing: border-box;
}
.AuHiBottom{
width: 100%;
background-color: white;
padding: 30px;
box-sizing: border-box;
height: 750px;
margin-top: 20px;
}
.el-table .warning{
background: red !important;
}
.el-table .success-row {
background: blue;
}
</style> </style>
\ No newline at end of file
src/views/personnelPositioning/register.vue
View file @ b52f3ca6
<template> <template>
<div> <div class="AuHiViewBody">
<span>人员定位系统人员等级</span>
<el-button type="primary" @click="formOpen('add')">增加人员</el-button>
<div class="AuHiBottom">
<template>
<el-table :data="PersonRegistrationData" height="700" border style="width: 100%">
<el-table-column prop="employee_id" label="员工编号" align="center"></el-table-column>
<el-table-column prop="name" label="员工名" align="center"></el-table-column>
<el-table-column prop="sex" label="性别" align="center"></el-table-column>
<el-table-column prop="age" label="年龄" align="center"></el-table-column>
<el-table-column prop="phone" label="电话" align="center"></el-table-column>
<el-table-column prop="dept" label="部门" align="center"></el-table-column>
<el-table-column prop="hat_number" label="帽子编号" align="center"></el-table-column>
<el-table-column label="操作" width="150" align="center">
<template slot-scope="scope">
<el-button @click="formOpen('change',scope.row)" type="text">编辑</el-button>
<el-button type="text" @click="deleteFormOpen(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
</div>
<el-dialog :title="formTitle" :visible.sync="formVisible" width="30%">
<el-form ref="form" :model="formData" label-width="80px">
<el-form-item label="员工编号">
<el-input v-model="formData.employee_id"></el-input>
</el-form-item>
<el-form-item label="员工名">
<el-input v-model="formData.name" :disabled="inpDisable"></el-input>
</el-form-item>
<el-form-item label="性别">
<template>
<el-radio v-model="formData.sex" label="男">男</el-radio>
<el-radio v-model="formData.sex" label="女">女</el-radio>
</template>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="formData.age"></el-input>
</el-form-item>
<el-form-item label="电话">
<el-input v-model="formData.phone"></el-input>
</el-form-item>
<el-form-item label="部门">
<el-input v-model="formData.dept"></el-input>
</el-form-item>
<el-form-item label="帽子编号">
<el-input v-model="formData.hat_number"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="formSave()">确 定</el-button>
<el-button @click="formcancel()">取 消</el-button>
</span>
</el-dialog>
<el-dialog title="你确定删除吗？" :visible.sync="deleteVisible" width="30%">
<el-button type="danger" @click="agreeDelete()">删除</el-button>
<el-button @click="cancelDelete()">取消</el-button>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data() {
return {
formTitle:"",
formType:"",
PersonRegistrationData:[{
employee_id: '20210901',
name: '王一',
sex: '男',
age: '22',
phone: '19919191919',
dept: '开发',
hat_number: '01110'
},{
employee_id: '20210901',
name: '王二',
sex: '女',
age: '22',
phone: '19919191919',
dept: '开发',
hat_number: '01110'
},{
employee_id: '20210901',
name: '王三',
sex: '男',
age: '22',
phone: '19919191919',
dept: '开发',
hat_number: '01110'
},{
employee_id: '20210901',
name: '王四',
sex: '女',
age: '22',
phone: '19919191919',
dept: '开发',
hat_number: '01110'
},{
employee_id: '20210901',
name: '王五',
sex: '女',
age: '22',
phone: '19919191919',
dept: '开发',
hat_number: '01110'
},{
employee_id: '20210901',
name: '王六',
sex: '男',
age: '22',
phone: '19919191919',
dept: '开发',
hat_number: '01110'
},{
employee_id: '20210901',
name: '王七',
sex: '男',
age: '22',
phone: '19919191919',
dept: '开发',
hat_number: '01110'
},{
employee_id: '20210901',
name: '王八',
sex: '女',
age: '22',
phone: '19919191919',
dept: '开发',
hat_number: '01110'
}],
formVisible:false,
formData: {
employee_id: '',
name: '',
sex: '男',
age: '',
phone: '',
dept: '',
hat_number: ''
},
inpDisable:false,
deleteVisible:false,
}
},
methods:{
formOpen(type,row){
this.formVisible = true;
this.formType = type;
if(this.formType === "add"){
this.formTitle = "增加人员";
this.inpDisable = false;
}else if(this.formType === "change"){
this.formTitle = "修改人员";
this.inpDisable = true;
this.formData = {...row};
}
},
formSave(){
if(this.formType === "add"){
if(this.formData.name === ""){
alert("员工名不得为空！");
return;
}
this.PersonRegistrationData.unshift(this.formData);
this.formVisible = false;
this.formData = {employee_id: '',name: '',sex: '男',age: '',phone: '',dept: '',hat_number: ''};
}else if(this.formType === "change"){
const that = this;
const newData = [];
this.PersonRegistrationData.forEach(function(item){
if(item.name === that.formData.name){
newData.push(that.formData);
}else{
newData.push(item);
}
})
this.PersonRegistrationData = newData;
this.formVisible = false;
this.formData = {employee_id: '',name: '',sex: '男',age: '',phone: '',dept: '',hat_number: ''};
}
},
formcancel(){
this.formVisible = false;
this.formData = {employee_id: '',name: '',sex: '男',age: '',phone: '',dept: '',hat_number: ''};
},
deleteFormOpen(row){
console.log(row);
this.deleteVisible = true;
this.formData = {...row};
},
agreeDelete(){
const that = this;
const newData = [];
this.PersonRegistrationData = that.PersonRegistrationData.forEach(function(item){
if(item.name === that.formData.name){
return;
}else{
newData.push(item);
}
})
this.PersonRegistrationData = newData;
this.deleteVisible = false;
this.formData = {employee_id: '',name: '',sex: '男',age: '',phone: '',dept: '',hat_number: ''};
},
cancelDelete(){
this.deleteVisible = false;
this.formData = {employee_id: '',name: '',sex: '男',age: '',phone: '',dept: '',hat_number: ''};
}
}
} }
</script> </script>
<style> <style scoped>
.AuHiViewBody{
width: 100%;
height: 100%;
background-color: rgb(245,246,251);
padding: 30px;
box-sizing: border-box;
}
.AuHiTop{
background-color: white;
border-radius: 10px;
padding: 18px 20px;
box-sizing: border-box;
}
.AuHiBottom{
width: 100%;
background-color: white;
padding: 30px;
box-sizing: border-box;
height: 750px;
margin-top: 20px;
}
.el-input{
width: 80%;
}
</style> </style>
\ No newline at end of file
src/views/productionAutomation/AutomatedReport.vue
View file @ b52f3ca6
...@@ -219,7 +219,7 @@ export default { ...@@ -219,7 +219,7 @@ export default {
<style scoped> <style scoped>
.AuHiViewBody{ .AuHiViewBody{
width: 100%; width: 100%;
height: 100vh; height: 100%;
background-color: rgb(245,246,251); background-color: rgb(245,246,251);
padding: 30px; padding: 30px;
box-sizing: border-box; box-sizing: border-box;
......
src/views/productionAutomation/AutomationHomepage.vue
View file @ b52f3ca6
...@@ -36,7 +36,7 @@ export default { ...@@ -36,7 +36,7 @@ export default {
.AutomationHomepageViews{ .AutomationHomepageViews{
background-color: rgb(0,20,78); background-color: rgb(0,20,78);
width: 100%; width: 100%;
height: 100vh; height: 100%;
position: relative; position: relative;
} }
.AutomationBrieflyMenuBar{ .AutomationBrieflyMenuBar{
......
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