video_surveillance
/
videoSurveillance
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

前端页面

Browse Source
dev
rosehan 3 years ago
parent 3efe08007d
commit 48864ca0b6
7 changed files with 240 additions and 82 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 121
      ruoyi-ui/src/assets/styles/picture-common.scss
  2. 6
      ruoyi-ui/src/views/components/p-flow/BaseFlow.vue
  3. 148
      ruoyi-ui/src/views/components/p-header/BaseHeader.vue
  4. 4
      ruoyi-ui/src/views/dashboard/MigrateMap.vue
  5. 2
      ruoyi-ui/src/views/picture/car-park/car-flow.vue
  6. 2
      ruoyi-ui/src/views/picture/complaint-evaluation/complaint-handle.vue
  7. 39
      ruoyi-ui/src/views/picture/scenic-monitor/index.vue

121
ruoyi-ui/src/assets/styles/picture-common.scss
Unescape View File

@ -24,7 +24,6 @@
*::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
@ -150,6 +149,82 @@ body {
}
}
.p-pages-filter {
position: fixed;
top: $p-header-height;
left: 50%;
z-index: 999;
transform: translate(-50%, 0);
background: #f60;
cursor: pointer;
}
.p-talarm-dialog{position: fixed!important; left: 300rem!important; top: 10rem!important;background: #102032;
text-align: center;
.el-dialog__header{padding: 0;}
.el-icon-close:before {
content: '';
}
.el-dialog__body{padding: $p-spacer-small;}
.el-dialog__headerbtn {
top: -10rem;
right: -10rem;
width: 30rem;
height: 30rem;
background-image: url('~@/assets/images/icon_close.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: .8;
}
.el-dialog__headerbtn:hover {
opacity: 1;
}
}
.p-filter-dialog {
background: #102032;
text-align: center;
.el-dialog__header{padding: 0;}
.el-icon-close:before {
content: '';
}
.el-input--medium .el-input__inner {
background-color: transparent !important;
border-color: rgba($p-border-color, .5) !important;
color: #fff;
}
.el-icon-arrow-up:before {
content: "\e636" !important;
display: inline-block;
width: 15rem;
height: 9rem;
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: $p-primary-color;
}
.el-dialog__headerbtn {
top: -10rem;
right: -10rem;
width: 30rem;
height: 30rem;
background-image: url('~@/assets/images/icon_close.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: .8;
}
.el-dialog__headerbtn:hover {
opacity: 1;
}
}
.p-pages-bg {
background: url("~@/assets/images/bg.jpg") #102032;
background-size: cover;
@ -684,13 +759,19 @@ body {
.p-flowdata-popper {
background-color: rgba(#102032, 1) !important;
border-color: rgba($p-border-color, 1) !important;
.el-month-table td.in-range div {
background-color: rgba($p-secondary-color, .3) !important;
}
.el-month-table td .cell{color: rgba($p-white-color, 1) !important;}
.el-month-table td.in-range div .cell{color: rgba($p-white-color, 1) !important;}
.el-month-table td .cell {
color: rgba($p-white-color, 1) !important;
}
.el-month-table td.in-range div .cell {
color: rgba($p-white-color, 1) !important;
}
.el-date-table td {
color: $p-white-color !important;
@ -731,21 +812,31 @@ body {
position: relative;
background-color: transparent !important;
border-color: rgba(102, 182, 255, 0.5) !important;
color:rgba(102, 182, 255, 0.5);
color: rgba(102, 182, 255, 0.5);
font-size: $p-font-small;
.vue-treeselect__x-container {
width: 20rem;
height: 20rem !important;
}
.vue-treeselect__input{width: 100%;}
.vue-treeselect__input {
width: 100%;
}
.vue-treeselect__control-arrow-container {
width: 20rem;
height: 20rem !important;
}
.vue-treeselect__menu-container{position: absolute; width: 100%; top: 100%;margin-top: 6rem !important;
.vue-treeselect__menu-container {
position: absolute;
width: 100%;
top: 100%;
margin-top: 6rem !important;
background-color: #001621 !important;
border: 0 solid transparent !important;}
border: 0 solid transparent !important;
}
}
/* 对话框 */
@ -881,8 +972,6 @@ body {
}
.p-dialog {
.el-dialog {
display: flex;
@ -1296,7 +1385,7 @@ body {
flex: 1;
font-size: 24rem;
font-family: YouSheBiaoTiHei;
overflow:hidden;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
@ -1878,9 +1967,17 @@ body {
}
.d-form-body {
font-family: DINAlternate; margin-left:$p-spacer-small ;
font-family: DINAlternate;
margin-left: $p-spacer-small;
}
.d-form-top {
font-size: $p-font-medium;
color: #66b6ff;
padding: $p-spacer-mini $p-spacer-small;
background-image: linear-gradient(to right, rgba(102, 182, 255, 0.2), rgba(102, 182, 255, 0));
}
.d-form-top{font-size:$p-font-medium;color: #66b6ff;padding: $p-spacer-mini $p-spacer-small; background-image: linear-gradient(to right, rgba(102, 182, 255, 0.2), rgba(102, 182, 255, 0));}
.d-form-item:not(:last-child) {
margin-bottom: $p-spacer-mini;
border-bottom: 1rem solid rgba($p-secondary-color, .2);

6
ruoyi-ui/src/views/components/p-flow/BaseFlow.vue
Unescape View File

@ -17,7 +17,7 @@
</div>
</div>
<BaseSaturation type="car"
endText="预警值" :endValue="String(flowData.alarm)" :percentage="flowData.saturatio.percentage"></BaseSaturation>
endText="预警值" :endValue="String(flowData.alarm)" :percentage="flowData.saturatio.percentage" v-if="flowData.saturatio.percentage!=''"></BaseSaturation>
</div>
</template>
@ -38,12 +38,12 @@ export default {
},
data() {
return {
flowData: {},
flowData:this.propsData,
}
},
watch: {
propsData(val) {
this.flowData = val
this.flowData = val;
}
},
}

148
ruoyi-ui/src/views/components/p-header/BaseHeader.vue
Unescape View File

@ -16,62 +16,8 @@
<div class="p-header-middle">
<div class="p-header-title">{{ title }}</div>
<div class="p-header-menu-left">
<div class="p-header-menu-item warning" @click="getAlarmList()"><i class="iconfont icon-warning m-r-mini"></i>警情分类<span
<div class="p-header-menu-item warning" @click="menuListStatus = true"><i class="iconfont icon-warning m-r-mini"></i>警情分类<span
class="p-header-badge">10</span>
<div class="p-header-menu-list" v-if="menuListStatus == true">
<div class="p-header-menu-body">
<div class="p-small-table">
<div class="p-small-table-head">
<div class="p-small-table-tr">
<div class="th col-4 align-center">警情分类</div>
<div class="th col-4 align-center">时间</div>
<div class="th col-4 align-center">标题</div>
</div>
</div>
<div class="p-small-table-body">
<base-overflow height="150rem" scrollbar>
<div class="p-small-table-tr">
<div class="td col-4 align-center">车流</div>
<div class="td col-4 align-center num">
<div class="text-ellipsis">监测到:少林景区公共停车场,车位数量达到预警值告警</div>
</div>
<div class="td col-4 align-center num">03-23 12:30</div>
</div>
<div class="p-small-table-tr">
<div class="td col-4 align-center">车流</div>
<div class="td col-4 align-center num">
<div class="text-ellipsis">监测到:少林景区公共停车场,车位数量达到预警值告警</div>
</div>
<div class="td col-4 align-center num">03-23 12:30</div>
</div>
<div class="p-small-table-tr">
<div class="td col-4 align-center">车流</div>
<div class="td col-4 align-center num">
<div class="text-ellipsis">监测到:少林景区公共停车场,车位数量达到预警值告警</div>
</div>
<div class="td col-4 align-center num">03-23 12:30</div>
</div>
<div class="p-small-table-tr">
<div class="td col-4 align-center">车流</div>
<div class="td col-4 align-center num">
<div class="text-ellipsis">监测到:少林景区公共停车场,车位数量达到预警值告警</div>
</div>
<div class="td col-4 align-center num">03-23 12:30</div>
</div>
<div class="p-small-table-tr">
<div class="td col-4 align-center">车流</div>
<div class="td col-4 align-center num">
<div class="text-ellipsis">监测到:少林景区公共停车场,车位数量达到预警值告警</div>
</div>
<div class="td col-4 align-center num">03-23 12:30</div>
</div>
</base-overflow>
</div>
</div>
</div>
</div>
</div>
<div class="p-header-menu-item"><i class="iconfont icon-heating-power m-r-mini"></i>热力分布</div>
</div>
@ -98,6 +44,63 @@
</el-submenu>
</el-menu>
</div>
<el-dialog
:modal="false"
width="400rem"
top="0"
:visible.sync="menuListStatus"
custom-class="p-talarm-dialog">
<div class="p-small-table">
<div class="p-small-table-head">
<div class="p-small-table-tr">
<div class="th col-4 align-center">警情分类</div>
<div class="th col-4 align-center">时间</div>
<div class="th col-4 align-center">标题</div>
</div>
</div>
<div class="p-small-table-body">
<base-overflow height="150rem" scrollbar>
<div class="p-small-table-tr">
<div class="td col-4 align-center">车流</div>
<div class="td col-4 align-center num">
<div class="text-ellipsis">监测到:少林景区公共停车场,车位数量达到预警值告警</div>
</div>
<div class="td col-4 align-center num">03-23 12:30</div>
</div>
<div class="p-small-table-tr">
<div class="td col-4 align-center">车流</div>
<div class="td col-4 align-center num">
<div class="text-ellipsis">监测到:少林景区公共停车场,车位数量达到预警值告警</div>
</div>
<div class="td col-4 align-center num">03-23 12:30</div>
</div>
<div class="p-small-table-tr">
<div class="td col-4 align-center">车流</div>
<div class="td col-4 align-center num">
<div class="text-ellipsis">监测到:少林景区公共停车场,车位数量达到预警值告警</div>
</div>
<div class="td col-4 align-center num">03-23 12:30</div>
</div>
<div class="p-small-table-tr">
<div class="td col-4 align-center">车流</div>
<div class="td col-4 align-center num">
<div class="text-ellipsis">监测到:少林景区公共停车场,车位数量达到预警值告警</div>
</div>
<div class="td col-4 align-center num">03-23 12:30</div>
</div>
<div class="p-small-table-tr">
<div class="td col-4 align-center">车流</div>
<div class="td col-4 align-center num">
<div class="text-ellipsis">监测到:少林景区公共停车场,车位数量达到预警值告警</div>
</div>
<div class="td col-4 align-center num">03-23 12:30</div>
</div>
</base-overflow>
</div>
</div>
</el-dialog>
</div>
</template>
@ -139,11 +142,46 @@ export default {
</script>
<style scoped lang="scss">
.p-small-table .th, .p-small-table .td {
overflow: hidden;
padding: 0;
font-size: 14rem;
}
/* 内部表格 */
.p-small-table {
.num {
font-size: $p-spacer-medium
}
.p-small-table-head {
background-image: linear-gradient(to right, rgba($p-message-bg, 0) 0%, rgba($p-message-bg, .2) 50%, rgba($p-message-bg, 0),);
}
.th, .td {
overflow: hidden;
padding: 5rem $p-spacer-mini;
font-size: $p-font-small;
}
.p-small-table-tr {
display: flex;
align-items: center;
}
.th {
color: #66b6ff;
}
.p-small-table-body .p-small-table-tr:not(:last-child) {
border-bottom: 1rem solid rgba($p-message-bg, .2);
}
.p-small-table-body .p-small-table-tr:nth-child(2n) {
background-color: rgba($p-message-bg, .05)
}
}
.p-pages-header {
position: relative;

4
ruoyi-ui/src/views/dashboard/MigrateMap.vue
Unescape View File

@ -64,7 +64,6 @@ export default {
'澳门': [113.54, 22.19],
'香港': [114.17, 22.32],
'台湾省': [121.01, 23.54],
};
var chinaDatas = this.propsData
@ -87,7 +86,8 @@ export default {
};
var series = [];
[[this.city, chinaDatas]].forEach(function (item, i) {
series.push({
series.push(
{
type: 'lines',
zlevel: 2,
effect: {

2
ruoyi-ui/src/views/picture/car-park/car-flow.vue
Unescape View File

@ -37,7 +37,7 @@ export default {
},
data() {
return {
flowData: {},
flowData:this.propsData,
saturatioType: ''
}
},

2
ruoyi-ui/src/views/picture/complaint-evaluation/complaint-handle.vue
Unescape View File

@ -29,7 +29,7 @@ export default {
props: {
propsData: {
type: Object,
default: () => {
default: () => {cd
},
},
},

39
ruoyi-ui/src/views/picture/scenic-monitor/index.vue
Unescape View File

@ -3,10 +3,9 @@
<div class="p-pages-box p-pages-bg">
<!-- 页面头部 -->
<base-header title="景区综合监测"></base-header>
<div class="p-pages-filter">筛选</div>
<div class="p-pages-filter" @click="filterStatus = true">筛选</div>
<!-- 页面主体 -->
<div class="p-pages-main p-container">
<div class="p-pages-main p-container" >
<el-row :gutter="20">
<el-col :span="6">
@ -73,11 +72,27 @@
</el-row>
</div>
<el-dialog
:modal="false"
width="400rem"
top="500rem"
:visible.sync="filterStatus"
custom-class="p-filter-dialog">
<el-select v-model="cityValue" placeholder="请选择">
<el-option
v-for="item in cityOptions"
:key="item.id"
:label="item.resourceName"
:value="item.id">
</el-option>
</el-select>
</el-dialog>
</div>
</template>
<script>
import { getScenicList} from "@/api/tour/tour"
import {getScenicList} from "@/api/tour/tour"
//引入 数据显示 组件
import baseDataIcon from "@/views/components/p-data/BaseDataIcon";
//引入 排行榜 组件
@ -123,7 +138,8 @@ export default {
data() {
return {
cityOptions: [],
cityValue:'',
cityValue: '',
filterStatus:false,
//今日天气 数据
TodayWeatherData: {
temperature: '', weather: '', humidity: '', windForce: '', windDirection: ''
@ -145,7 +161,7 @@ export default {
FlowSourceDataCity: '',
FlowComeData: {},
//实时车流统计 数据
ActualCarData: {},
ActualCarData: { saturatio: {name: '', percentage: ''},},
//微信运营统计 数据
WeixinBusinessData: {
title: '嵩山少林景区微博', list: [
@ -178,7 +194,7 @@ export default {
},
watch: {
cityValue(newValue, oldValue) {
let params = {"resourceId":newValue}
let params = {"resourceId": newValue}
this.getFlowSource(params)
this.getFlowRank(params)
}
@ -187,7 +203,6 @@ export default {
getScenicList() {
getScenicList().then(response => {
this.cityOptions = response.data
console.log('asdfasdfa',this.cityOptions)
});
},
//获取 今日天气 数据
@ -248,6 +263,14 @@ export default {
});
});
},
//获取 客流地排行 数据
handleClose(done) {
this.$confirm('确认关闭？')
.then(_ => {
done();
})
.catch(_ => {});
}
}
}
</script>

Write Preview
Loading…
Cancel
Save