sheyang
/
MaindataPGIS
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更改

Browse Source
dev
独树的风 1 year ago
parent b2cc0bbb14
commit 6586a059c5
16 changed files with 324 additions and 295 deletions
Show Stats Download Patch File Download Diff File

6
public/index.html
Unescape View File

@ -11,9 +11,9 @@
</title>
<script type="text/javascript" src="<%= BASE_URL %>js/liveplayer-lib.min.js"></script>
<!-- 引入MineMap API插件 -->
<!-- <link rel="stylesheet" href="http://50.144.11.244:21009/support/static/api/demo/js-api/zh/css/demo.css"> -->
<!-- <link rel="stylesheet" href="http://50.144.11.244:21009/minemapapi/v2.1.0/minemap.css"> -->
<!-- <script src="http://50.144.11.244:21009/minemapapi/v2.1.0/minemap.js"></script> -->
<!-- <link rel="stylesheet" href="http://50.144.11.244:21009/support/static/api/demo/js-api/zh/css/demo.css">
<link rel="stylesheet" href="http://50.144.11.244:21009/minemapapi/v2.1.0/minemap.css">
<script src="http://50.144.11.244:21009/minemapapi/v2.1.0/minemap.js"></script> -->
</head>
<body>

BIN
src/assets/picture/icon_householder.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

5
src/components/MapScroll.vue
Unescape View File

@ -114,7 +114,10 @@ export default {
.carousel_box_left_picture {
flex: 1;
height: 8vh;
background-color: #fcbebe;
// background-color: #fcbebe;
background-image: url('@/assets/picture/icon_householder.png');
background-repeat: no-repeat;
background-size: 100% auto;
}
.carousel_box_left_text {

19
src/utils/esresize.js
Unescape View File

@ -30,8 +30,10 @@ var EleResize = {
},
_createResizeTrigger: function (ele) {
var obj = document.createElement('object')
obj.setAttribute('style',
'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;opacity: 0; pointer-events: none; z-index: -1;')
obj.setAttribute(
'style',
'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;opacity: 0; pointer-events: none; z-index: -1;'
)
obj.onload = EleResize._handleObjectLoad
obj.type = 'text/html'
ele.appendChild(obj)
@ -40,10 +42,14 @@ var EleResize = {
},
_handleObjectLoad: function () {
this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__
this.contentDocument.defaultView.addEventListener('resize', EleResize._handleResize)
this.contentDocument.defaultView.addEventListener(
'resize',
EleResize._handleResize
)
}
}
if (document.attachEvent) { // ie9-10
if (document.attachEvent) {
// ie9-10
EleResize.on = function (ele, handler, context) {
var handlers = ele.__z_resizeListeners
if (!handlers) {
@ -93,7 +99,10 @@ if (document.attachEvent) { // ie9-10
if (handlers.length === 0) {
var trigger = ele.__resizeTrigger__
if (trigger) {
trigger.contentDocument.defaultView.removeEventListener('resize', EleResize._handleResize)
trigger.contentDocument.defaultView.removeEventListener(
'resize',
EleResize._handleResize
)
ele.removeChild(trigger)
delete ele.__resizeTrigger__
}

11
src/views/coastalMap/components/keyInformantion.vue
Unescape View File

@ -777,7 +777,7 @@ export default {
.card_picture {
width: 4vw;
height: 14vh;
background-color: #fff;
// background-color: #fff;
position: relative;
margin-top: 0.5vh;
.card_picture_look {
@ -795,7 +795,10 @@ export default {
.image {
width: 4vw;
height: 12.5vh;
background-color: pink;
// background-color: pink;
background-image: url('@/assets/picture/icon_householder.png');
background-repeat: no-repeat;
background-size: 100% auto;
}
}
.card_picture_right {
@ -821,12 +824,12 @@ export default {
}
}
.card_picture_right_cate {
height: 2.5vh;
display: flex;
width: 4vw;
height: 2.5vh;
background-color: #009cfe;
align-items: center;
justify-content: center;
display: flex;
color: #fff;
}
}

10
src/views/coastalMap/components/keyPerson.vue
Unescape View File

@ -69,7 +69,7 @@
</div>
<!-- 滚动区域 -->
<div class="roll_body">
<PersonScroll></PersonScroll>
<!-- <PersonScroll></PersonScroll> -->
</div>
</div>
</div>
@ -77,10 +77,10 @@
<script>
import * as echarts from 'echarts'
import EleResize from '@/utils/esresize'
import PersonScroll from './keypersonScroll.vue'
// import PersonScroll from './keypersonScroll.vue'
export default {
name: 'KeyPerson',
components: { PersonScroll },
// components: { PersonScroll },
data() {
return {
title_text: '重点人员'
@ -276,9 +276,7 @@ export default {
}
.roll_body {
display: flex;
align-items: center;
height: 48vh;
margin-top: 2vh;
}
}
}

5
src/views/coastalMap/components/keypersonScroll.vue
Unescape View File

@ -114,7 +114,10 @@ export default {
.key_person_box_left_picture {
flex: 1;
height: 8vh;
background-color: #fcbebe;
// background-color: #fcbebe;
background-image: url('@/assets/picture/icon_householder.png');
background-repeat: no-repeat;
background-size: 100% auto;
}
.key_person_box_left_text {

2
src/views/coastalMap/components/policeSpread.vue
Unescape View File

@ -80,7 +80,7 @@ export default {
.police_body_box_title {
height: 3vh;
text-align: center;
font-size: 1vw;
font-size: 0.8rem;
color: #edf1f7;
line-height: 2.7vh;
}

2
src/views/coastalMap/components/seaElement.vue
Unescape View File

@ -102,7 +102,7 @@ export default {
color: #fff;
font-family: PingFangSC;
font-weight: 500;
font-size: 1vw;
font-size: 1rem;
}
}
}

71
src/views/home/index.vue
Unescape View File

@ -4,21 +4,21 @@
<div class="system_title_icon"></div>
<div class="system_title_text">射阳沿海治安防控综合平台</div>
</div> -->
<!-- 底部导航按钮 - 跳转路由 -->
<div class="under_btn">
<!-- // * 底部导航按钮 - 跳转路由 -->
<!-- <div class="under_btn">
<div class="under_btn_item">
<div class="item_check"></div>
<div class="item_check" @click="toHome"></div>
</div>
<div class="under_btn_item">
<div class="item_check"></div>
<div class="item_check_back" @click="toVideo">视频监控</div>
</div>
<div class="under_btn_item">
<div class="item_check"></div>
<div class="item_check_back" @click="toDevice">感知设备</div>
</div>
<div class="under_btn_item">
<div class="item_check"></div>
</div>
<div class="item_check_back">建模应用</div>
</div>
</div> -->
<router-view></router-view>
</div>
</template>
@ -28,6 +28,17 @@ export default {
name: 'Home',
data() {
return {}
},
methods: {
// toHome() {
// this.$router.push('/home/coastalMap')
// },
// toVideo() {
// this.$router.push('/home/videoMonitor')
// },
// toDevice() {
// this.$router.push('/home/sensingDevice')
// }
}
}
</script>
@ -67,15 +78,15 @@ export default {
// }
// }
.under_btn {
position: absolute;
bottom: 1vh;
left: 35vw;
width: 30vw;
height: 7vh;
// background: #33a59f;
display: flex;
z-index: 2;
// .under_btn {
// position: absolute;
// bottom: 1vh;
// left: 35vw;
// width: 30vw;
// height: 7vh;
// // background: #33a59f;
// display: flex;
// z-index: 2;
// .under_btn_item {
// width: 10vw;
@ -85,14 +96,36 @@ export default {
// justify-content: center;
// align-items: center;
// // * 导航样式
// .item_check {
// width: 3.5vw;
// height: 6.5vh;
// background-image: url("../../assets/首页_slices/icon_home_sel.png");
// background-image: url('@/assets/picture/icon_home_nor.png');
// background-repeat: no-repeat;
// background-size: cover;
// background-size: 100% auto;
// &:hover {
// background-image: url('@/assets/picture/icon_home_sel.png');
// background-repeat: no-repeat;
// background-size: 100% auto;
// }
// }
// .item_check_back {
// width: 3.5vw;
// height: 6.5vh;
// background-image: url('@/assets/picture/under_button.png');
// background-repeat: no-repeat;
// background-size: 100% auto;
// font-size: 0.8rem;
// font-family: PingFangSC, PingFang SC;
// font-weight: 500;
// color: #ecf4f9;
// line-height: 6.5vh;
// text-shadow: 0px 0px 9px #00a2ff;
// text-align: center;
// }
// }
// }
}
}
</style>

159
src/views/sensingDevice/components/carEcharts.vue
Unescape View File

@ -1,166 +1,53 @@
<template>
<div id="carmain"></div>
<div id="carMain"></div>
</template>
<script>
import * as echarts from 'echarts'
import EleResize from '@/utils/esresize'
export default {
name: 'CarEcharts',
data() {
return {}
},
mounted() {
// * echarts 实例
const chartDom = document.getElementById('carmain')
const myChart = echarts.init(chartDom)
// * echarts 选项
let option
let app = {}
const categories = (function () {
let now = new Date()
let res = []
let len = 10
while (len--) {
res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''))
now = new Date(+now - 2000)
}
return res
})()
const categories2 = (function () {
let res = []
let len = 10
while (len--) {
res.push(10 - len - 1)
}
return res
})()
const data = (function () {
let res = []
let len = 10
while (len--) {
res.push(Math.round(Math.random() * 1000))
}
return res
})()
const data2 = (function () {
let res = []
let len = 0
while (len < 10) {
res.push(+(Math.random() * 10 + 5).toFixed(1))
len++
}
return res
})()
this.init_charts()
},
methods: {
init_charts() {
var chartDom = document.getElementById('carMain')
var myChart = echarts.init(chartDom)
let resize_div = document.getElementById('people_chart')
// *echarts表自适应
EleResize.on(resize_div, () => {
myChart.resize()
})
var option
option = {
title: {
// text: 'Dynamic Data'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#283b56'
}
}
},
legend: {},
toolbox: {
show: true,
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {}
}
},
dataZoom: {
show: false,
start: 0,
end: 100
},
xAxis: [
{
xAxis: {
type: 'category',
boundaryGap: true,
data: categories
data: ['11-28', '11-29', '11-30', '12-01', '12-02', '12-03', '12-04']
},
{
type: 'category',
boundaryGap: true,
data: categories2
}
],
yAxis: [
{
type: 'value',
scale: true,
// name: 'Price',
// max: 30,
min: 0
// boundaryGap: [0.2, 0.2]
yAxis: {
type: 'value'
},
{
type: 'value',
scale: true,
// name: 'Order',
// max: 1200,
min: 0
// boundaryGap: [0.2, 0.2]
}
],
series: [
{
// name: 'Dynamic Bar',
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
data: data
},
{
// name: 'Dynamic Line',
type: 'line',
data: data2
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}
]
}
app.count = 11
setInterval(function () {
let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '')
data.shift()
data.push(Math.round(Math.random() * 1000))
data2.shift()
data2.push(+(Math.random() * 10 + 5).toFixed(1))
categories.shift()
categories.push(axisData)
categories2.shift()
categories2.push(app.count++)
myChart.setOption({
xAxis: [
{
data: categories
},
{
data: categories2
}
],
series: [
{
data: data
},
{
data: data2
}
]
})
}, 2100)
option && myChart.setOption(option)
}
}
}
</script>
<style lang="scss">
#carmain {
#carMain {
width: 17vw;
height: 30vh;
}

3
src/views/sensingDevice/components/mapSearch.vue
Unescape View File

@ -60,6 +60,7 @@ export default {
border: 1px solid #00f5ff;
background-color: #02274e;
color: #ecf4f9;
outline: none;
}
.search_input::placeholder {
@ -108,7 +109,7 @@ export default {
.check_title {
margin-left: 1vw;
color: #ecf4f9;
font-size: 0.4vw;
font-size: 0.8rem;
line-height: 3vh;
font-family: '苹方-简 中黑体';
}

16
src/views/sensingDevice/components/peopleEcharts.vue
Unescape View File

@ -1,10 +1,11 @@
<template>
<div id="main"></div>
<div id="people_chart"></div>
</template>
<script>
// * 导入 echarts
import * as echarts from 'echarts'
import EleResize from '@/utils/esresize'
export default {
name: 'PeopleEcharts',
data() {
@ -12,7 +13,12 @@ export default {
},
mounted() {
// * echarts 实例
const myChart = echarts.init(document.getElementById('main'))
const myChart = echarts.init(document.getElementById('people_chart'))
let resize_div = document.getElementById('people_chart')
// *echarts表自适应
EleResize.on(resize_div, () => {
myChart.resize()
})
// * echarts 选项
myChart.setOption({
color: ['#80ffa5', '#00ddff', '#37a2ff', '#ffbf00'],
@ -45,8 +51,8 @@ export default {
xAxis: [
{
type: 'category',
boundaryGap: false
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
boundaryGap: false,
data: ['11-26', '11-27', '11-28', '11-29', '11-30', '12-01', '12-02']
}
],
yAxis: [
@ -201,7 +207,7 @@ export default {
</script>
<style lang="scss">
#main {
#people_chart {
width: 17vw;
height: 23vh;
}

2
src/views/sensingDevice/index.vue
Unescape View File

@ -142,7 +142,7 @@ export default {
color: aliceblue;
text-align: center;
line-height: 7vh;
font-size: 2.25rem;
font-size: 2vw;
font-weight: 700;
}
}

18
src/views/videoMonitor/components/livePlayer.vue
Unescape View File

@ -6,7 +6,7 @@
<div class="live_card_header">
<div class="live_card_title">射阳县合德镇解放西路42号（枪机）</div>
<!-- 关闭弹窗 -->
<div class="delte" @click="handleClose"></div>
<div class="delete" @click="handleClose"></div>
<!-- <div class="live_card_icon" @click="handleClose">
<i class="el-icon-close"></i>
</div> -->
@ -17,7 +17,7 @@
<h3>重点人员信息</h3>
</div>
<div class="live_card_body_left_bottom">
<!-- 设备名称信息。。。。 -->
<!-- 设备名称信息 -->
<div class="live_card_body_left_bottom_div">
<div class="item">
设备名称：
@ -66,7 +66,7 @@
<!-- 开始时间 -->
<div class="live_card_body_left_bottom_starttime">
<div class="time_icon"></div>
<span>开始时间：</span>
<span>开始时间:</span>
<span>
<el-date-picker
placeholder="请选择日期与时间"
@ -78,7 +78,7 @@
<!-- 结束时间 -->
<div class="live_card_body_left_bottom_endtime">
<div class="time_icon1"></div>
<span>结束时间：</span>
<span>结束时间:</span>
<span>
<el-date-picker
placeholder="请选择日期与时间"
@ -163,7 +163,7 @@ export default {
width: 83vw;
height: 6vh;
color: #bfe7f9;
.delte {
.delete {
width: 2vw;
height: 3vh;
background-color: #fff;
@ -300,10 +300,11 @@ export default {
.live_card_body_left_bottom_starttime {
width: 18vw;
height: 4vh;
margin-top: 2vh;
margin-top: 4vh;
margin-left: 1vw;
display: flex;
align-items: center;
justify-content: space-between;
color: #ecf4f9;
position: relative;
.el-input--suffix .el-input__inner {
@ -325,10 +326,13 @@ export default {
}
}
.live_card_body_left_bottom_endtime {
display: flex;
align-items: center;
justify-content: space-between;
width: 18vw;
height: 4vh;
margin-left: 1vw;
margin-top: 2vh;
margin-top: 4vh;
color: #fff;
position: relative;
.el-input--suffix .el-input__inner {

86
src/views/videoMonitor/index.vue
Unescape View File

@ -1,6 +1,24 @@
<!-- 视频监控 -->
<template>
<div class="father">
<!-- 头部区域 -->
<div class="system_title">
<!-- 占位 -->
<div class="blank"></div>
<div class="title_body">
<!-- 警徽 -->
<div class="title_icon">
<div class="police_icon"></div>
</div>
<!-- 项目名 -->
<div class="title_text">{{ title_text }}</div>
</div>
<div class="time_body">
<div class="box_all">
<div class="time_item"></div>
</div>
</div>
</div>
<div class="children">
<div class="coverage">
<p>图层</p>
@ -22,7 +40,7 @@
</div>
<div class="search">
<el-input placeholder="请输入摄像头名称"></el-input>
<el-input placeholder="请输入摄像头名称" v-model="deviceName"></el-input>
<el-button
type="primary"
icon="el-icon-search"
@ -51,7 +69,10 @@ export default {
},
data() {
return {
play: true
play: true,
// * 输入框绑定
deviceName: '',
title_text: '射阳沿海治安防控综合平台'
}
},
methods: {
@ -67,6 +88,67 @@ export default {
.father {
overflow: hidden;
position: relative;
// * 头部区域样式
.system_title {
width: 100vw;
height: 14vh;
position: absolute;
top: 0;
background: url('@/assets/homepage/title_back.png') no-repeat;
background-size: 100% 100%;
display: flex;
justify-content: space-between;
.blank {
width: 24vw;
height: 14vh;
}
.title_body {
height: 7vh;
display: flex;
z-index: 2;
.title_icon {
width: 3.5vw;
height: 7vh;
display: flex;
justify-content: center;
align-items: center;
.police_icon {
width: 2.7vw;
height: 5.4vh;
background: url('@/assets/homepage/police.png') no-repeat;
background-size: 100% 100%;
}
}
.title_text {
color: aliceblue;
text-align: center;
line-height: 7vh;
font-size: 2vw;
font-weight: 700;
}
}
.time_body {
width: 24vw;
height: 7vh;
.box_all {
width: 12vw;
height: 7vh;
// background: #ad337f;
.time_item {
width: 12vw;
height: 3.5vh;
text-align: center;
color: #37fdc7;
font-size: 1.5rem;
font-weight: 600;
}
}
}
}
// * 遮罩层样式
.overlay {

Write Preview
Loading…
Cancel
Save