Selaa lähdekoodia

大屏

master
huxinglu 4 vuotta sitten
vanhempi
commit
3bc8d26c35
17 muutettua tiedostoa jossa 717 lisäystä ja 8 poistoa
  1. BIN
      src/assets/img/command/ask-h.png
  2. BIN
      src/assets/img/command/ask.png
  3. BIN
      src/assets/img/command/bg.png
  4. BIN
      src/assets/img/command/date-h.png
  5. BIN
      src/assets/img/command/date.png
  6. BIN
      src/assets/img/command/head-ask.png
  7. BIN
      src/assets/img/command/head-date.png
  8. BIN
      src/assets/img/command/head-problem.png
  9. BIN
      src/assets/img/command/head-quality.png
  10. BIN
      src/assets/img/command/nav.png
  11. BIN
      src/assets/img/command/problem-h.png
  12. BIN
      src/assets/img/command/problem.png
  13. BIN
      src/assets/img/command/quality-h.png
  14. BIN
      src/assets/img/command/quality.png
  15. +8
    -0
      src/router/index.js
  16. +668
    -0
      src/views/command/index.vue
  17. +41
    -8
      src/views/main/index.vue

BIN
src/assets/img/command/ask-h.png Näytä tiedosto

Before After
Width: 84  |  Height: 84  |  Size: 4.9KB

BIN
src/assets/img/command/ask.png Näytä tiedosto

Before After
Width: 82  |  Height: 82  |  Size: 4.3KB

BIN
src/assets/img/command/bg.png Näytä tiedosto

Before After
Width: 170  |  Height: 80  |  Size: 2.6KB

BIN
src/assets/img/command/date-h.png Näytä tiedosto

Before After
Width: 78  |  Height: 80  |  Size: 5.2KB

BIN
src/assets/img/command/date.png Näytä tiedosto

Before After
Width: 82  |  Height: 80  |  Size: 5.4KB

BIN
src/assets/img/command/head-ask.png Näytä tiedosto

Before After
Width: 131  |  Height: 27  |  Size: 2.9KB

BIN
src/assets/img/command/head-date.png Näytä tiedosto

Before After
Width: 266  |  Height: 94  |  Size: 7.4KB

BIN
src/assets/img/command/head-problem.png Näytä tiedosto

Before After
Width: 88  |  Height: 19  |  Size: 2.2KB

BIN
src/assets/img/command/head-quality.png Näytä tiedosto

Before After
Width: 132  |  Height: 27  |  Size: 3.0KB

BIN
src/assets/img/command/nav.png Näytä tiedosto

Before After
Width: 3840  |  Height: 210  |  Size: 203KB

BIN
src/assets/img/command/problem-h.png Näytä tiedosto

Before After
Width: 84  |  Height: 84  |  Size: 5.2KB

BIN
src/assets/img/command/problem.png Näytä tiedosto

Before After
Width: 84  |  Height: 84  |  Size: 5.1KB

BIN
src/assets/img/command/quality-h.png Näytä tiedosto

Before After
Width: 80  |  Height: 80  |  Size: 3.6KB

BIN
src/assets/img/command/quality.png Näytä tiedosto

Before After
Width: 84  |  Height: 84  |  Size: 3.7KB

+ 8
- 0
src/router/index.js Näytä tiedosto

@@ -29,6 +29,14 @@ const routes = [
meta: {
'title': '数据大屏'
}
},
{
path: '/command',
name: 'command',
component: (resolve) => require(['@/views/command/index'], resolve),
meta: {
'title': '指挥大屏'
}
}
]
const router = new Router({

+ 668
- 0
src/views/command/index.vue Näytä tiedosto

@@ -0,0 +1,668 @@
<template>
<div class="main-index" style="position: relative">
<div class="index-map" id="indexMap"></div>
<img class="head-img" src="../../assets/img/command/nav.png" />
<div class="head-dev">
<div @click="typeLick('date')">
<img
class="head-img"
:src="activeType=='date'?require('../../assets/img/command/date-h.png'):require('../../assets/img/command/date.png')"
/>
<div>
<div>数据统计</div>
<div>Data statistics</div>
</div>
</div>
<div @click="typeLick('problem')">
<img
class="head-img"
:src="activeType=='problem'?require('../../assets/img/command/problem-h.png'):require('../../assets/img/command/problem.png')"
/>
<div>
<div>问题管理</div>
<div>Problem Management</div>
</div>
</div>
<div @click="typeLick('ask')">
<img
class="head-img"
:src="activeType=='ask'?require('../../assets/img/command/ask-h.png'):require('../../assets/img/command/ask.png')"
/>
<div>
<div>任务管理</div>
<div>Task management</div>
</div>
</div>
<div @click="typeLick('quality')">
<img
class="head-img"
:src="activeType=='quality'?require('../../assets/img/command/quality-h.png'):require('../../assets/img/command/quality.png')"
/>
<div>
<div>水质管理</div>
<div>Water quality management</div>
</div>
</div>
</div>
<div class="box-left">
<div>
<img :src="require('../../assets/img/command/head-'+activeType+'.png')" />
</div>

<div>
<div class="box-header-title">
<div>巡检问题处理情况统计</div>
</div>
<div>
<img src="../../assets/img/main/line.png" />
<div>
<el-progress
:width="1.36,fontSize | filterPx"
:stroke-width="0.12,fontSize | filterPx"
type="circle"
color="#15CCD0"
:percentage="90"
></el-progress>
</div>
<div>
<div>
<div>
<div>
<div></div>
<div>未完成</div>
</div>
<div>
10
<span>/件</span>
</div>
</div>
</div>
<div>
<div>
<div>
<div></div>
<div>已完成</div>
</div>
<div>
90
<span>/件</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="box-header-title">
<div>月度巡检问题</div>
</div>
<div>
<div>
<div>
<img src="../../assets/img/main/build1.png" />
<div>
<div>
<div>789</div>
<img src="../../assets/img/main/up.png" />
</div>
<div>水面污染</div>
</div>
</div>
<div>
<img src="../../assets/img/main/build2.png" />
<div>
<div>
<div>578</div>
<img src="../../assets/img/main/down.png" />
</div>
<div>水质污染</div>
</div>
</div>
</div>
<div>
<div>
<img src="../../assets/img/main/build3.png" />
<div>
<div>
<div>428</div>
<img src="../../assets/img/main/up.png" />
</div>
<div>污水排口</div>
</div>
</div>
<div>
<img src="../../assets/img/main/build4.png" />
<div>
<div>
<div>145</div>
<img src="../../assets/img/main/down.png" />
</div>
<div>违法乱建</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="box-header-title">
<div>巡检问题河湖统计</div>
</div>
<div></div>
</div>
</div>
<div class="box-right">
<div>
<div class="box-header-title">
<div>告警信息</div>
</div>
<div>
<div>
<div>
<img src="../../assets/img/main/red.png" />
<div>澧水河河道发现重度污染</div>
</div>
<div>2020-04-20</div>
</div>
<div>
<div>
<img src="../../assets/img/main/orange.png" />
<div>莫愁湖发现严重水质问题</div>
</div>
<div>2020-04-20</div>
</div>
<div>
<div>
<img src="../../assets/img/main/yellow.png" />
<div>固城河河道发现污染排口</div>
</div>
<div>2020-04-20</div>
</div>
</div>
</div>
<div>
<div class="box-header-title">
<div>区属问题河湖统计</div>
</div>
<div>
<div>数量/件</div>
</div>
</div>
<div>
<div class="box-header-title">
<div>河湖水质问题分类统计</div>
</div>
<div></div>
</div>
</div>
</div>
</template>

<script>
import AMap from "AMap";
import njBround from "@/assets/js/njBround";
import { mapGetters } from "vuex";

export default {
name: "main-container",
data() {
return {
activeType: "date",
map: {},
barHeight: document.body.clientHeight > 1050 ? 2.42 : 2.06,
nameMark: [
{ name: "六合区", lng: 118.867937, lat: 32.369795 },
{ name: "浦口区", lng: 118.571012, lat: 32.055306 },
{ name: "栖霞区", lng: 118.908507, lat: 32.135114 },
{ name: "南京市", lng: 118.798507, lat: 32.035114 },
{ name: "江宁区", lng: 118.798507, lat: 31.835114 },
{ name: "溧水区", lng: 119.038507, lat: 31.605114 },
{ name: "高淳区", lng: 118.938507, lat: 31.325114 }
]
};
},
created() {
console.log("1234");
},
mounted() {
let me = this;
this.map = new AMap.Map("indexMap", {
zoom: 9,
center: [118.750078, 31.983115],
// features: ['bg'],
mapStyle: "amap://styles/dark",
resizeEnable: true
});
this.map.on("complete", function() {
me.addBound();
me.nameMark.map(item => {
me.addRegionMarker(item);
});
this.map.on("click", function(e) {
console.log(e);
console.log(e.jg.getLng() + "," + e.jg.getLat());
});
});
},
computed: {
...mapGetters(["fontSize"])
},
components: {},
methods: {
typeLick(type) {
this.activeType = type;
},
addBound() {
let me = this;
let list = njBround;
if (list && list.length > 0) {
list.map(item => {
let polygons = [];
var bounds = item.bounds;
if (bounds) {
for (let i = 0, l = bounds.length; i < l; i++) {
let path = [];
bounds[i].map(cc => {
path.push(new AMap.LngLat(cc.lng, cc.lat));
});
let polygon = new AMap.Polygon({
strokeWeight: 4,
path: path,
fillOpacity: 0.7,
fillColor: "#15948d",
strokeColor: "#0CEBE1"
});
polygons.push(polygon);
}
}
me.map.add(polygons);
});
}
},
addRegionMarker(item) {
// 创建纯文本标记
let fontSize = "14px";
if (item.name == "南京市") {
fontSize = "16px";
}
var text = new AMap.Text({
text: item.name,
anchor: "center", // 设置文本标记锚点
cursor: "pointer",
style: {
background: "transparent",
fontSize: fontSize,
color: "#ffffff",
padding: "0",
border: "none",
fontWeight: "bold"
},
position: [item.lng, item.lat]
});

text.setMap(this.map);
}
}
};
</script>

<style lang="less">
.main-index {
width: 100%;
height: 100%;

.head-dev {
position: absolute;
top: 0.51rem;
left: 6.096rem;
display: flex;
justify-content: space-between;
align-items: center;
> div {
cursor: pointer;
display: flex;
align-items: center;
margin-left: 0.896rem;
> img {
width: 0.4rem;
height: 0.4rem;
}
> div {
margin-left: 0.641rem;
> div:first-child {
font-family: PingFangSC-Medium;
font-size: 0.2rem;
line-height: 0.28rem;
color: #ffffff;
}
> div:last-child {
font-family: PingFangSC-Regular;
font-size: 0.1rem;
color: #ffffff;
line-height: 0.14rem;
margin-top: 0.01rem;
}
}
}
> div:first-child {
margin-left: 0rem;
}
}

.index-map {
width: 100%;
height: 100%;
border: 1px solid #dcdfe6;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);

.amap-marker-label {
padding: 0 !important;
font-size: 14px !important;
line-height: 18px !important;
}
}

.head-img {
position: absolute;
top: 0rem;
width: 100%;
}

.box-header-title {
width: 100%;
background-image: linear-gradient(
90deg,
#213232 2%,
rgba(101, 228, 227, 0) 100%
);
height: 0.36rem;
line-height: 0.36rem;
border-top: 0.01rem solid #65e4e3;
position: relative;
> div {
font-family: PingFangSC-Regular;
font-size: 0.16rem;
color: #ffffff;
padding-left: 0.1rem;
}
}

.box-right {
position: absolute;
top: 1.55rem;
width: 5.05rem;
right: 0.1rem;
> div:first-child {
background-color: rgba(0, 0, 0, 0.6);
> div:last-child {
padding: 0rem 0.295rem 0.25rem 0.295rem;
position: relative;
> div {
margin-top: 0.21rem;
display: flex;
justify-content: space-between;
align-items: center;
> div:first-child {
display: flex;
align-items: center;
> img {
width: 0.2rem;
height: 0.2rem;
margin-right: 0.1rem;
}
> div:last-child {
width: 2.6rem;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
font-family: PingFangSC-Regular;
font-size: 0.2rem;
color: #ffffff;
line-height: 0.28rem;
}
}
> div:last-child {
font-family: PingFangSC-Regular;
font-size: 0.14rem;
color: #ffffff;
line-height: 0.2rem;
}
}
}
}
> div:nth-child(2) {
margin-top: 0.204rem;
background-color: rgba(0, 0, 0, 0.6);
> div:last-child {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 0.178rem;
padding-top: 0.492rem;
> div:first-child {
font-family: PingFangSC-Regular;
font-size: 0.14rem;
color: #ffffff;
position: absolute;
top: 0.2rem;
left: 0.573rem;
}
}
}
> div:last-child {
margin-top: 0.2rem;
background-color: rgba(0, 0, 0, 0.6);
> div:last-child {
position: relative;
display: flex;
justify-content: center;
padding: 0 0.34rem;
}
}
}

.box-left {
position: absolute;
top: 1.25rem;
width: 4.45rem;
background-color: rgba(0, 0, 0, 0.6);
height: 100%;
padding-left: 0.425rem;
padding-right: 0.2rem;
> div:first-child {
margin-top: 0.2rem;
width: 100%;
height: 0.47rem;
display: flex;
> img {
width: 1.33rem;
height: 100%;
}
}
> div:nth-child(2) {
margin-top: 0.14rem;
> div:last-child {
padding: 0.25rem 0.19rem 0.29rem 0.1rem;
display: flex;
position: relative;
> img {
position: absolute;
width: 0.962rem;
height: 0.228rem;
left: 1.517rem;
bottom: 0.58rem;
}
> div:nth-child(2) {
width: 1.59rem;
height: 1.59rem;
margin-left: 0.12rem;
background-position: center center;
background-size: cover;
background-image: url(../../assets/img/main/table.png);
display: flex;
align-items: center;
justify-content: center;
.el-progress__text {
font-family: Oswald-Demi-BoldItalic;
font-size: 0.33rem !important;
color: #ffffff;
}
}
> div:last-child {
margin-left: 0.65rem;
> div {
width: 1.693rem;
height: 0.8rem;
background-position: center center;
background-size: cover;
background-image: url(../../assets/img/command/bg.png);
> div {
position: relative;
> div:first-child {
position: absolute;
top: 0.12rem;
left: 0.14rem;
display: flex;
align-items: center;
> div:first-child {
background: #fedf12;
border: 0.02rem solid #657533;
border-radius: 50%;
height: 0.06rem;
width: 0.06rem;
}
> div:last-child {
font-family: PingFangSC-Regular;
font-size: 0.14rem;
color: #ffffff;
margin-left: 0.05rem;
}
}
> div:last-child {
position: absolute;
right: 0.2rem;
top: 0.25rem;
font-family: Impact;
font-size: 0.39rem;
color: #ffffff;
text-align: right;
> span {
font-family: PingFangSC-Regular;
font-size: 0.12rem;
color: #ffffff;
margin-left: 0.02rem;
}
}
}
}
> div:last-child {
margin-top: 0.2rem;
> div > div:first-child > div:first-child {
background: #18d27c;
border: 0.02rem solid #0c8757;
}
}
}
}
}
> div:nth-child(3) {
margin-top: 0.14rem;
background-color: rgba(0, 0, 0, 0.6);
> div:last-child {
padding: 0.228rem 0.43rem 0.285rem 0.4rem;
position: relative;
> div {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
> div {
display: flex;
align-items: center;
> img {
width: 0.8rem;
height: 0.8rem;
margin-right: 0.308rem;
}
> div:last-child {
> div:first-child {
display: flex;
align-items: center;
> div:first-child {
font-family: PingFangSC-Medium;
font-size: 0.3rem;
color: #ffffff;
line-height: 0.42rem;
}
> img {
width: 0.12rem;
height: 0.18rem;
margin-left: 0.044rem;
}
}
> div:last-child {
font-family: PingFangSC-Regular;
font-size: 0.14rem;
color: #ffffff;
line-height: 0.2rem;
}
}
}
}
> div:last-child {
margin-top: 0.237rem;
}
}
}
> div:last-child {
margin-top: 0.2rem;
background-color: rgba(0, 0, 0, 0.6);
> div:last-child {
position: relative;
display: flex;
justify-content: center;
padding: 0.1rem 0;
}
}
}

// @media (max-height: 1050px) {
// .box-left {
// top: 1.35rem;
// > div:first-child {
// > div:last-child {
// padding: 0.13rem 0.32rem;
// }
// }
// > div:nth-child(2) {
// margin-top: 0.175rem;
// > div:last-child {
// padding: 0.128rem 0.43rem 0.185rem 0.4rem;
// }
// }
// > div:last-child {
// margin-top: 0.15rem;
// }
// }
// .box-right {
// top: 1.35rem;
// > div:first-child {
// > div:last-child {
// padding: 0rem 0.195rem 0.25rem 0.195rem;
// }
// }
// > div:nth-child(2) {
// margin-top: 0.15rem;
// > div:last-child {
// padding-bottom: 0.178rem;
// padding-top: 0.392rem;
// }
// }
// > div:last-child {
// margin-top: 0.15rem;
// }
// }
// }
}
</style>

+ 41
- 8
src/views/main/index.vue Näytä tiedosto

@@ -157,9 +157,7 @@
<div>河湖水质问题分类统计</div>
</div>
<div>
<cake id="rightPre"
:width="4.42,fontSize | filterPx"
:height="2.174,fontSize | filterPx"></cake>
<cake id="rightPre" :width="4.42,fontSize | filterPx" :height="2.174,fontSize | filterPx"></cake>
</div>
</div>
</div>
@@ -171,7 +169,7 @@ import AMap from "AMap";
import njBround from "@/assets/js/njBround";
import transverseBar from "./transverseBar";
import bar from "./bar";
import cake from './cake'
import cake from "./cake";
import { mapGetters } from "vuex";

export default {
@@ -179,7 +177,16 @@ export default {
data() {
return {
map: {},
barHeight: document.body.clientHeight > 1050 ? 2.42 : 2.06
barHeight: document.body.clientHeight > 1050 ? 2.42 : 2.06,
nameMark:[
{name:'六合区',lng:118.867937,lat:32.369795},
{name:'浦口区',lng:118.571012,lat:32.055306},
{name:'栖霞区',lng:118.908507,lat:32.135114},
{name:'南京市',lng:118.798507,lat:32.035114},
{name:'江宁区',lng:118.798507,lat:31.835114},
{name:'溧水区',lng:119.038507,lat:31.605114},
{name:'高淳区',lng:118.938507,lat:31.325114},
]
};
},
created() {
@@ -196,16 +203,19 @@ export default {
});
this.map.on("complete", function() {
me.addBound();
me.nameMark.map(item=>{
me.addRegionMarker(item)
})
this.map.on("click", function(e) {
console.log(e);
console.log(e.jg.getLng() + "," + e.jg.getLat());
console.log(e.ig.getLng() + "," + e.ig.getLat());
});
});
},
computed: {
...mapGetters(["fontSize"])
},
components: { transverseBar, bar,cake},
components: { transverseBar, bar, cake },
methods: {
addBound() {
let me = this;
@@ -233,6 +243,29 @@ export default {
me.map.add(polygons);
});
}
},
addRegionMarker(item) {
// 创建纯文本标记
let fontSize='14px'
if(item.name=='南京市'){
fontSize='16px'
}
var text = new AMap.Text({
text:item.name,
anchor: "center", // 设置文本标记锚点
cursor: "pointer",
style: {
background:'transparent',
fontSize:fontSize,
color: "#ffffff",
padding: "0",
border: "none",
fontWeight: 'bold'
},
position: [item.lng, item.lat]
});

text.setMap(this.map);
}
}
};
@@ -387,7 +420,7 @@ export default {
justify-content: center;
.el-progress__text {
font-family: Oswald-Demi-BoldItalic;
font-size: 0.53rem;
font-size: 0.33rem!important;
color: #ffffff;
}
}

Loading…
Peruuta
Tallenna