Tony/god-ytr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 山林安全登录页与首页

Browse Source
This commit is contained in:
Tony 2023-10-25 11:31:28 +08:00
parent 85c884832d
commit ba4fa74b93
11 changed files with 413 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
god-ui/public/images/forest-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 MiB

23
god-ui/src/views/login.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="login">
<div class="login" id="loginDom">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
<!-- <h3 class="title">智慧车间安防监控和管理系统系统</h3>-->
<el-form-item prop="username">
@ -107,7 +107,28 @@ export default {
this.getCode();
this.getCookie();
},
mounted() {
this.handlePort();
},
methods: {
handlePort() {
// 根据端口号动态修改登录页样式
let port = window.location.port;
const loginDom = document.getElementById('loginDom');
switch (port) {
case '130':
document.title = '智慧车间安防监控与管理'
break;
case '140':
document.title = '山林生态安全综合监测管理平台'
loginDom.style.backgroundImage = 'url(/images/forest-bg.png)'
break;
default:
document.title = '山林生态安全综合监测管理平台'
loginDom.style.backgroundImage = 'url(/images/forest-bg.png)'
break;
}
},
getCode() {
getCodeImg().then(res => {
this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;

BIN
god-ui/src/views/species/home/assets/circle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
god-ui/src/views/species/home/assets/top1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

BIN
god-ui/src/views/species/home/assets/top2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 90 KiB

BIN
god-ui/src/views/species/home/assets/top3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

BIN
god-ui/src/views/species/home/assets/top4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB

BIN
god-ui/src/views/species/home/assets/top5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 98 KiB

BIN
god-ui/src/views/species/home/assets/top6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 83 KiB

323
god-ui/src/views/species/home/index.vue Normal file
View File

@ -0,0 +1,323 @@
<template>
<div class="app-container main-outer-wrapper">
<div class="grid-main-wrapper">
<div class="grid-item-wrapper card-item-wrapper">
<div class="card-item-title">野生动物疫源疫病监测预报系统</div>
<div class="card-item-content">
<div class="card-value-wrapper">
<span>对接数据量</span>
<span>46</span>
</div>
<div class="card-value-wrapper">
<span>今日预警</span>
<span>0</span>
</div>
</div>
</div>
<div class="grid-item-wrapper card-item-wrapper">
<div class="card-item-title">市级林草植物检疫信息化管理</div>
<div class="card-item-content">
<div class="card-value-wrapper">
<span>对接数据量</span>
<span>39</span>
</div>
<div class="card-value-wrapper">
<span>今日预警</span>
<span>0</span>
</div>
</div>
</div>
<div class="grid-item-wrapper card-item-wrapper">
<div class="card-item-title">生物多样性综合监管平台</div>
<div class="card-item-content">
<div class="card-value-wrapper">
<span>对接数据量</span>
<span>67</span>
</div>
<div class="card-value-wrapper">
<span>今日预警</span>
<span>0</span>
</div>
</div>
</div>
<div
class="grid-item-wrapper"
style="grid-row: span 2;grid-column: span 2;"
id="badArea"
></div>
<div class="grid-item-wrapper card-item-wrapper">
<div class="card-item-title">山林安全巡查监测系统</div>
<div class="card-item-content">
<div class="card-value-wrapper">
<span>对接数量</span>
<span>68</span>
</div>
<div class="card-value-wrapper">
<span>今日采集数量</span>
<span>12</span>
</div>
<div class="card-value-wrapper">
<span>今日预警</span>
<span>1</span>
</div>
</div>
</div>
<div class="grid-item-wrapper card-item-wrapper">
<div class="card-item-title">森林防火监测平台</div>
<div class="card-item-content">
<div class="card-value-wrapper">
<span>对接数量</span>
<span>58</span>
</div>
<div class="card-value-wrapper">
<span>今日采集数量</span>
<span>9</span>
</div>
<div class="card-value-wrapper">
<span>今日预警</span>
<span>1</span>
</div>
</div>
</div>
<div class="grid-item-wrapper card-item-wrapper">
<div class="card-item-title">地质灾害综合管理平台</div>
<div class="card-item-content">
<div class="card-value-wrapper">
<span>对接数量</span>
<span>58</span>
</div>
<div class="card-value-wrapper">
<span>今日预警</span>
<span>0</span>
</div>
</div>
</div>
<div
class="grid-item-wrapper"
style="grid-column: span 3;"
>
<div class="grid-item-title">预警信息</div>
<div class="grid-item-content">
<el-table :data="preWarnInfo" stripe height="100%">
<el-table-column label="预警信息" align="left" prop="info" />
<el-table-column label="预警时间" align="center" prop="time" width="150" />
<el-table-column label="值班人" align="center" prop="person" width="120" />
<el-table-column label="联系方式" align="center" prop="phone" width="180" />
</el-table>
</div>
</div>
<div
class="grid-item-wrapper"
style="grid-column: span 2;"
>
<div class="grid-item-title">待办工单</div>
<div class="grid-item-content wait-list-wrapper">
<div class="wait-list-item" v-for="item in waitList">
<span>{{ item }}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
data() {
return {
preWarnInfo: [
{
info: '有人携带工具进入防护山林，请重点关注是否有砍伐树木的行为',
time: '2023/10/24 16:29',
person: '王建梦',
phone: '18553108805',
},
{
info: 'YW03H05设备烟雾预警，疑似有人焚烧草木，请抓紧确认，解除隐患',
time: '2023/10/24 16:22',
person: '牛雨阳',
phone: '15262752114',
},
{
info: '仓库有陌生人闯入',
time: '2023/10/24 16:17',
person: '何臻尧',
phone: '13988887963',
},
{
info: 'YW03H06设备烟雾预警，疑似有人焚烧草木，请抓紧确认，解除隐患',
time: '2023/10/24 16:45',
person: '谭昊',
phone: '13966660052',
},
],
waitList: [
'山林监测系统设备维修检测周期已到，请合理安排人员检测及上传巡检结果。',
'2023年生物多样性普查工作已经开展，请及时普查并登记物种信息。',
'森林防火监测平台，检测设备EH90701数据连接异常，请及时查看设备故障情况。',
'松材线虫病秋季普查一开始，各县各村做好普查开展工作，并及时上报普查结果。',
'茶袋蛾病秋季普查开始，各县各村做好普查开展工作，并及时上报普查结果。',
]
}
},
mounted() {
this.initPieChart();
},
methods: {
initPieChart() {
const chart = document.getElementById("badArea");
const chartInstance = echarts.init(chart, 'default');
chartInstance.setOption({
title: {
text: '病虫害类危害面积计统计'
},
textStyle: {
color: '#7a8898'
},
color: [
'#37A2DA',
'#9FE6B8',
'#FFDB5C',
'#ff9f7f',
'#fb7293',
'#E062AE',
'#32C5E9',
'#67E0E3',
'#E690D1',
'#e7bcf3',
'#9d96f5',
'#8378EA',
'#96BFFF'
],
tooltip: {
trigger: 'item'
},
legend: {
// 图例配置
orient: "vertical",
right: 50,
itemGap: 20,
top: 'center',
textStyle: {
color: '#7a8898'
},
},
series: [
{
name: "",
type: "pie",
radius: ["40%", "70%"],
center: ["37%", "55%"],
data: [
{ name: '松线虫病', value: 80 },
{ name: '美国白蛾', value: 79 },
{ name: '松墨天牛', value: 84 },
{ name: '松赤枯病', value: 46 },
{ name: '桃缩叶病', value: 45 },
{ name: '松斑蛾', value: 40 },
{ name: '茶袋蛾', value: 25 },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
label: {
show: true,
formatter: "{d}%"
}
}
],
grid: {
x: 80,
x2: 80,
y: 80,
y2: 60,
// 网格
backgroundColor: "rgba(0,0,0,0)",
borderWidth: 2,
borderColor: "#fff232",
},
polor: {
center: ["30%", "50%"],
},
}, true, true);
window.addEventListener("resize", () => {
this.$nextTick(() => {
chartInstance && chartInstance.resize();
})
})
}
}
}
</script>
<style scoped lang="scss">
@import url(./mainPage.scss);
.card-item-wrapper {
background-size: 100% 100%;
padding: 10px 26px !important;
display: flex;
flex-direction: column;
justify-content: center;
color: white;
.card-item-title {
height: 30px;
font-weight: bold;
}
.card-item-content {
height: calc(100% - 80px);
display: flex;
flex-direction: column;
justify-content: space-around;
.card-value-wrapper {
display: flex;
padding: 4px 8px;
justify-content: space-between;
align-items: center;
span:nth-child(1) {
color: #ffffffc7;
}
span:nth-child(2) {
font-size: 20px;
font-weight: bold;
}
}
}
}
.card-item-wrapper:nth-child(1) {
background-image: url(./assets/top1.png);
}
.card-item-wrapper:nth-child(2) {
background-image: url(./assets/top2.png);
}
.card-item-wrapper:nth-child(3) {
background-image: url(./assets/top3.png);
}
.card-item-wrapper:nth-child(5) {
background-image: url(./assets/top4.png);
}
.card-item-wrapper:nth-child(6) {
background-image: url(./assets/top5.png);
}
.card-item-wrapper:nth-child(7) {
background-image: url(./assets/top6.png);
}
/** 待办工单*/
.wait-list-wrapper {
.wait-list-item {
background-image: url(./assets/circle.png);
background-position: left 12px;
background-size: 20px 20px;
background-repeat: no-repeat;
padding: 12px 14px;
padding-left: 28px;
color: #252525;
}
}
</style>

68
god-ui/src/views/species/home/mainPage.scss Normal file
View File

@ -0,0 +1,68 @@
.main-outer-wrapper {
width: 100%;
background-color: #f1f1f1;
.grid-main-wrapper {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 180px 180px 360px;
gap: 10px;
.grid-item-wrapper {
padding: 8px 12px;
min-height: 34px;
background-color: white;
.grid-item-title {
color: #000;
padding: 2px 8px;
font-size: 18px;
font-weight: bold;
}
.grid-item-content {
height: calc(100% - 34px);
padding: 10px;
}
}
}
}
.background-frame {
background-position: center center;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.table-wrapper {
position: relative;
width: 100%;
height: 100%;
.table-header-row {
width: 100%;
display: flex;
position: sticky;
background-color: #d4e4f9;
padding: 5px 0;
top: 0;
.table-header-cell {
padding: 4px 0;
text-align: center;
font-size: 14px;
color: #2c313a;
}
}
.table-data-row {
display: flex;
width: 100%;
.table-data-cell {
padding: 8px 0;
font-size: 14px;
color: #2c313a;
text-align: center;
}
}
.table-data-row:nth-child(odd) {
background-color: #e9f1fb;
}
.table-data-row:nth-child(even) {
background-color: white;
}
}