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

更改

Browse Source
dev
独树的风 10 months 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> </title>
<script type="text/javascript" src="<%= BASE_URL %>js/liveplayer-lib.min.js"></script> <script type="text/javascript" src="<%= BASE_URL %>js/liveplayer-lib.min.js"></script>
<!-- 引入MineMap API插件 --> <!-- 引入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/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"> --> <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> --> <script src="http://50.144.11.244:21009/minemapapi/v2.1.0/minemap.js"></script> -->
</head> </head>
<body> <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 { .carousel_box_left_picture {
flex: 1; flex: 1;
height: 8vh; 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 { .carousel_box_left_text {

19
src/utils/esresize.js
Unescape View File

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

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

@ -777,7 +777,7 @@ export default {
.card_picture { .card_picture {
width: 4vw; width: 4vw;
height: 14vh; height: 14vh;
background-color: #fff; // background-color: #fff;
position: relative; position: relative;
margin-top: 0.5vh; margin-top: 0.5vh;
.card_picture_look { .card_picture_look {
@ -795,7 +795,10 @@ export default {
.image { .image {
width: 4vw; width: 4vw;
height: 12.5vh; 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 { .card_picture_right {
@ -821,12 +824,12 @@ export default {
} }
} }
.card_picture_right_cate { .card_picture_right_cate {
height: 2.5vh; display: flex;
width: 4vw; width: 4vw;
height: 2.5vh;
background-color: #009cfe; background-color: #009cfe;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
display: flex;
color: #fff; color: #fff;
} }
} }

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

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

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

@ -114,7 +114,10 @@ export default {
.key_person_box_left_picture { .key_person_box_left_picture {
flex: 1; flex: 1;
height: 8vh; 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 { .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 { .police_body_box_title {
height: 3vh; height: 3vh;
text-align: center; text-align: center;
font-size: 1vw; font-size: 0.8rem;
color: #edf1f7; color: #edf1f7;
line-height: 2.7vh; line-height: 2.7vh;
} }

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

@ -102,7 +102,7 @@ export default {
color: #fff; color: #fff;
font-family: PingFangSC; font-family: PingFangSC;
font-weight: 500; 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_icon"></div>
<div class="system_title_text">射阳沿海治安防控综合平台</div> <div class="system_title_text">射阳沿海治安防控综合平台</div>
</div> --> </div> -->
<!-- 底部导航按钮 - 跳转路由 --> <!-- // * 底部导航按钮 - 跳转路由 -->
<div class="under_btn"> <!-- <div class="under_btn">
<div class="under_btn_item"> <div class="under_btn_item">
<div class="item_check"></div> <div class="item_check" @click="toHome"></div>
</div> </div>
<div class="under_btn_item"> <div class="under_btn_item">
<div class="item_check"></div> <div class="item_check_back" @click="toVideo">视频监控</div>
</div> </div>
<div class="under_btn_item"> <div class="under_btn_item">
<div class="item_check"></div> <div class="item_check_back" @click="toDevice">感知设备</div>
</div> </div>
<div class="under_btn_item"> <div class="under_btn_item">
<div class="item_check"></div> <div class="item_check_back">建模应用</div>
</div>
</div> </div>
</div> -->
<router-view></router-view> <router-view></router-view>
</div> </div>
</template> </template>
@ -28,6 +28,17 @@ export default {
name: 'Home', name: 'Home',
data() { data() {
return {} return {}
},
methods: {
// toHome() {
// this.$router.push('/home/coastalMap')
// },
// toVideo() {
// this.$router.push('/home/videoMonitor')
// },
// toDevice() {
// this.$router.push('/home/sensingDevice')
// }
} }
} }
</script> </script>
@ -67,15 +78,15 @@ export default {
// } // }
// } // }
.under_btn { // .under_btn {
position: absolute; // position: absolute;
bottom: 1vh; // bottom: 1vh;
left: 35vw; // left: 35vw;
width: 30vw; // width: 30vw;
height: 7vh; // height: 7vh;
// background: #33a59f; // // background: #33a59f;
display: flex; // display: flex;
z-index: 2; // z-index: 2;
// .under_btn_item { // .under_btn_item {
// width: 10vw; // width: 10vw;
@ -85,14 +96,36 @@ export default {
// justify-content: center; // justify-content: center;
// align-items: center; // align-items: center;
// // * 导航样式
// .item_check { // .item_check {
// width: 3.5vw; // width: 3.5vw;
// height: 6.5vh; // 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-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> </style>

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

@ -1,166 +1,53 @@
<template> <template>
<div id="carmain"></div> <div id="carMain"></div>
</template> </template>
<script> <script>
import * as echarts from 'echarts' import * as echarts from 'echarts'
import EleResize from '@/utils/esresize'
export default { export default {
name: 'CarEcharts', name: 'CarEcharts',
data() { data() {
return {} return {}
}, },
mounted() { mounted() {
// * echarts 实例 this.init_charts()
const chartDom = document.getElementById('carmain') },
const myChart = echarts.init(chartDom) methods: {
// * echarts 选项 init_charts() {
let option var chartDom = document.getElementById('carMain')
let app = {} var myChart = echarts.init(chartDom)
const categories = (function () { let resize_div = document.getElementById('people_chart')
let now = new Date() // *echarts表自适应
let res = [] EleResize.on(resize_div, () => {
let len = 10 myChart.resize()
while (len--) { })
res.unshift(now.toLocaleTimeString().replace(/^\D*/, '')) var option
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
})()
option = { option = {
title: { xAxis: {
// 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: [
{
type: 'category', type: 'category',
boundaryGap: true, data: ['11-28', '11-29', '11-30', '12-01', '12-02', '12-03', '12-04']
data: categories
}, },
{ yAxis: {
type: 'category', type: 'value'
boundaryGap: true,
data: categories2
}
],
yAxis: [
{
type: 'value',
scale: true,
// name: 'Price',
// max: 30,
min: 0
// boundaryGap: [0.2, 0.2]
}, },
{
type: 'value',
scale: true,
// name: 'Order',
// max: 1200,
min: 0
// boundaryGap: [0.2, 0.2]
}
],
series: [ series: [
{ {
// name: 'Dynamic Bar', data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar', type: 'bar'
xAxisIndex: 1,
yAxisIndex: 1,
data: data
},
{
// name: 'Dynamic Line',
type: 'line',
data: data2
} }
] ]
} }
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) option && myChart.setOption(option)
} }
}
} }
</script> </script>
<style lang="scss"> <style lang="scss">
#carmain { #carMain {
width: 17vw; width: 17vw;
height: 30vh; height: 30vh;
} }

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

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

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

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

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

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

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

@ -1,6 +1,24 @@
<!-- 视频监控 --> <!-- 视频监控 -->
<template> <template>
<div class="father"> <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="children">
<div class="coverage"> <div class="coverage">
<p>图层</p> <p>图层</p>
@ -22,7 +40,7 @@
</div> </div>
<div class="search"> <div class="search">
<el-input placeholder="请输入摄像头名称"></el-input> <el-input placeholder="请输入摄像头名称" v-model="deviceName"></el-input>
<el-button <el-button
type="primary" type="primary"
icon="el-icon-search" icon="el-icon-search"
@ -51,7 +69,10 @@ export default {
}, },
data() { data() {
return { return {
play: true play: true,
// * 输入框绑定
deviceName: '',
title_text: '射阳沿海治安防控综合平台'
} }
}, },
methods: { methods: {
@ -67,6 +88,67 @@ export default {
.father { .father {
overflow: hidden; overflow: hidden;
position: relative; 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 { .overlay {

Write Preview
Loading…
Cancel
Save