gitadmin
/
taauav_app_front_discard_20240715
Observar 1
Favorito 0
Fork 0
Código Issues 0 Pull requests 0 Versões 0 Wiki Atividade
Ver código fonte

修改

master
huxinglu 4 anos atrás
pai
e3ba87c005
commit
5ce003192c
6 arquivos alterados com 514 adições e 402 exclusões
Visão dividida
Opções de diferenças
Mostrar estatísticas Baixar arquivo de patch Baixar arquivo de diferenças
  1. +8
    -0
      src/api/main/index.js
  2. +9
    -0
      src/api/water/waterAlarm.js
  3. +16
    -19
      src/views/main/bar.vue
  4. +11
    -15
      src/views/main/cake.vue
  5. +432
    -350
      src/views/main/index.vue
  6. +38
    -18
      src/views/main/transverseBar.vue

+ 8
- 0
src/api/main/index.js Ver arquivo

@@ -33,5 +33,13 @@ export default {
method: 'GET',
params:{}
})
},

getScreenIndex(){
return axios({
url: '/api/front/screen/index',
method: 'GET',
params:{}
})
}
}

+ 9
- 0
src/api/water/waterAlarm.js Ver arquivo

@@ -31,4 +31,13 @@ export default {
})
},

getWaterAlarmList(num) {
return axios({
method: "GET",
url: '/api/front/wateralarm/getWaterAlarmList',
params: {
num
}
})
},
}

+ 16
- 19
src/views/main/bar.vue Ver arquivo

@@ -10,7 +10,6 @@ export default {
name: "bar",
data() {
return {
data: []
};
},
props: {
@@ -31,23 +30,25 @@ export default {
default() {
return "";
}
},
dataList: {
type: Array,
default() {
return [];
}
}
},
watch:{
dataList(){
if(this.dataList.length>0){
this.chart.changeData(this.dataList);
}
}
},
computed: {
...mapGetters(["fontSize"])
},
mounted() {
this.data = [
{ type: "江北新区", value: 130, vote: 1 },
{ type: "玄武区", value: 80, vote: 2 },
{ type: "秦淮区", value: 90, vote: 1 },
{ type: "建邺区", value: 80, vote: 2 },
{ type: "鼓楼区", value: 110, vote: 1 },
{ type: "栖霞区", value: 85, vote: 2 },
{ type: "雨花台", value: 85, vote: 1 },
{ type: "浦口区", value: 120, vote: 2 }
];

const chart = new Chart({
container: this.id,
autoFit: true,
@@ -58,7 +59,7 @@ export default {
chart.scale("sales", {
tickInterval: 20
});
chart.axis("type", {
chart.axis("name", {
title: null,
tickLine: null,
line: null,
@@ -72,7 +73,7 @@ export default {
}
}
});
chart.axis("value", {
chart.axis("num", {
title: null,
grid: null,
line: null,
@@ -90,7 +91,7 @@ export default {
chart.legend(false);
chart
.interval()
.position("type*value")
.position("name*num")
.size(this.$root.$options.filters.filterPx(0.21, this.fontSize))
.color("vote", value => {
if (value == 1) {
@@ -101,10 +102,6 @@ export default {

chart.render();
this.chart = chart;
let me = this;
setTimeout(function() {
me.chart.changeData(me.data);
}, 1000);
},
methods: {}
};

+ 11
- 15
src/views/main/cake.vue Ver arquivo

@@ -10,7 +10,6 @@ export default {
name: "cake",
data() {
return {
data: []
};
},
props: {
@@ -31,22 +30,20 @@ export default {
default() {
return "";
}
},
dataList: {
type: Array,
default() {
return [];
}
}
},
computed: {
...mapGetters(["fontSize"])
},
mounted() {
const data = [
{ type: "BOD", value: 19 },
{ type: "TP", value: 18 },
{ type: "TN", value: 15 },
{ type: "NH3", value: 28 },
{ type: "COD", value: 36 }
];

let max = 0;
data.forEach(function(obj) {
this.dataList.forEach(function(obj) {
if (obj.value > max) {
max = obj.value;
}
@@ -79,11 +76,11 @@ export default {
container: this.id,
width: this.width,
autoFit: true,
padding: [this.$root.$options.filters.filterPx(0.4,this.fontSize),'auto',this.$root.$options.filters.filterPx(0.2,this.fontSize),this.$root.$options.filters.filterPx(0.3,this.fontSize)],
padding: [this.$root.$options.filters.filterPx(0.4,this.fontSize),'auto',this.$root.$options.filters.filterPx(0.2,this.fontSize),this.$root.$options.filters.filterPx(0.5,this.fontSize)],
height: this.height
});

chart.source(data);
chart.source(this.dataList);
chart.coord("theta", {
radius: 0.8
});
@@ -99,7 +96,7 @@ export default {
chart
.intervalStack()
.position("value")
.color("type", ["#10BF79", "#0A9EBF", "#065ABF", "#BD2B4A", "#BCBF33"])
.color("name", ["#10BF79", "#0A9EBF", "#065ABF", "#BD2B4A", "#BCBF33"])
.shape("sliceShape")
.label("value", {
textStyle: {
@@ -109,10 +106,9 @@ export default {
},
offset: this.$root.$options.filters.filterPx(0.4,this.fontSize),
formatter: (val, item) => {
return val + "%";
return val+ "%";
}
});

chart.render();
},
methods: {}

+ 432
- 350
src/views/main/index.vue Ver arquivo

@@ -1,21 +1,21 @@
<template>
<div class="main-index" style="position: relative">
<div class="index-map" id="indexMap"></div>
<img class="head-img" src="../../assets/img/main/head.png" />
<img class="head-img" src="../../assets/img/main/head.png"/>
<div class="box-left">
<div>
<div class="box-header-title">
<div>巡检问题处理情况统计</div>
</div>
<div>
<img src="../../assets/img/main/line.png" />
<img src="../../assets/img/main/line.png"/>
<div>
<el-progress
:width="1.57,fontSize | filterPx"
:stroke-width="0.15,fontSize | filterPx"
type="circle"
color="#15CCD0"
:percentage="90"
:percentage="parseInt(inspectQuestionInfo.percentage)"
></el-progress>
</div>
<div>
@@ -26,7 +26,7 @@
<div>已发现</div>
</div>
<div>
3688
{{inspectQuestionInfo.totalNum}}
<span>/件</span>
</div>
</div>
@@ -38,7 +38,7 @@
<div>已解决</div>
</div>
<div>
1689
{{inspectQuestionInfo.finishedNum}}
<span>/件</span>
</div>
</div>
@@ -53,21 +53,21 @@
<div>
<div>
<div>
<img src="../../assets/img/main/build1.png" />
<img src="../../assets/img/main/build1.png"/>
<div>
<div>
<div>789</div>
<img src="../../assets/img/main/up.png" />
<div><span v-if="waitQuestionInfo.shuimian">{{waitQuestionInfo.shuimian.totalNum}}</span></div>
<img src="../../assets/img/main/up.png"/>
</div>
<div>水面污染</div>
</div>
</div>
<div>
<img src="../../assets/img/main/build2.png" />
<img src="../../assets/img/main/build2.png"/>
<div>
<div>
<div>578</div>
<img src="../../assets/img/main/down.png" />
<div><span v-if="waitQuestionInfo.shuizhi">{{waitQuestionInfo.shuizhi.totalNum}}</span></div>
<img src="../../assets/img/main/down.png"/>
</div>
<div>水质污染</div>
</div>
@@ -75,21 +75,21 @@
</div>
<div>
<div>
<img src="../../assets/img/main/build3.png" />
<img src="../../assets/img/main/build3.png"/>
<div>
<div>
<div>428</div>
<img src="../../assets/img/main/up.png" />
<div><span v-if="waitQuestionInfo.paikou">{{waitQuestionInfo.paikou.totalNum}}</span></div>
<img src="../../assets/img/main/up.png"/>
</div>
<div>污水排口</div>
</div>
</div>
<div>
<img src="../../assets/img/main/build4.png" />
<img src="../../assets/img/main/build4.png"/>
<div>
<div>
<div>145</div>
<img src="../../assets/img/main/down.png" />
<div><span v-if="waitQuestionInfo.anxian">{{waitQuestionInfo.anxian.totalNum}}</span></div>
<img src="../../assets/img/main/down.png"/>
</div>
<div>违法乱建</div>
</div>
@@ -103,6 +103,7 @@
</div>
<div>
<transverseBar
:dataList="questionDriverList"
id="leftBar"
:width="4.463,fontSize | filterPx"
:height="2.008,fontSize | filterPx"
@@ -116,27 +117,16 @@
<div>告警信息</div>
</div>
<div>
<div>
<div>
<img src="../../assets/img/main/red.png" />
<div>澧水河河道发现重度污染</div>
</div>
<div>2020-04-20</div>
</div>
<div>
<div :key="index" v-for="(item,index) in waterAlarmList">
<div>
<img src="../../assets/img/main/orange.png" />
<div>莫愁湖发现严重水质问题</div>
<img
:src="item.measuredStandard==5?require('../../assets/img/main/red.png'):(item.measuredStandard==4?require('../../assets/img/main/orange.png'):require('../../assets/img/main/yellow.png'))"/>
<div>{{item.alarmInfo}}</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><span v-if="item.alarmTime">{{item.alarmTime.split(' ')[0]}}</span></div>
</div>
<div v-if="waterAlarmList.length<2"></div>
<div v-if="waterAlarmList.length<3"></div>
</div>
</div>
<div>
@@ -146,6 +136,7 @@
<div>
<div>数量/件</div>
<bar
:dataList="questionDriverAreaList"
id="rightBar"
:width="4.48,fontSize | filterPx"
:height="2.22,fontSize | filterPx"
@@ -157,7 +148,8 @@
<div>河湖水质问题分类统计</div>
</div>
<div>
<cake id="rightPre" :width="4.42,fontSize | filterPx" :height="2.174,fontSize | filterPx"></cake>
<cake v-if="waterAlarmCategoryList.length>0" :dataList="waterAlarmCategoryList" id="rightPre"
:width="4.42,fontSize | filterPx" :height="2.174,fontSize | filterPx"></cake>
</div>
</div>
</div>
@@ -165,391 +157,481 @@
</template>

<script>
import AMap from "AMap";
import njBround from "static/njBround";
import transverseBar from "./transverseBar";
import bar from "./bar";
import cake from "./cake";
import store from '../../vuex'
import { mapGetters } from "vuex";
import $ from 'jquery'

export default {
name: "main-container",
data() {
return {
map: {},
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() {
let designSize = (1920+1080)/2; // 设计图尺寸
let wW = (document.body.clientWidth+document.body.clientHeight)/2;// 窗口宽度
let rem = wW * 100 / designSize;
document.documentElement.style.fontSize = rem + 'px';
store.dispatch('user/setFontSize', rem)
$(window).resize(function ()// 绑定到窗口的这个事件中
{
let designSize = (1920+1080)/2
let wW = (document.body.clientWidth+document.body.clientHeight)/2;// 窗口宽度
import AMap from "AMap";
import njBround from "static/njBround";
import transverseBar from "./transverseBar";
import bar from "./bar";
import cake from "./cake";
import store from '../../vuex'
import {mapGetters} from "vuex";
import api from '@/api/main/index'
import waterAlarmApi from '@/api/water/waterAlarm'
import $ from 'jquery'

export default {
name: "main-container",
data() {
return {
questionDriverList: [],
waitQuestionInfo: {},
waterAlarmList: [],
waterAlarmCategoryList: [],
questionDriverAreaList: [],
inspectQuestionInfo: {},
map: {},
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() {
let designSize = (1920 + 1080) / 2; // 设计图尺寸
let wW = (document.body.clientWidth + document.body.clientHeight) / 2;// 窗口宽度
let rem = wW * 100 / designSize;
document.documentElement.style.fontSize = rem + 'px';
store.dispatch('user/setFontSize', rem)
// window.location.reload()
});
},
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.ig.getLng() + "," + e.ig.getLat());
$(window).resize(function ()// 绑定到窗口的这个事件中
{
let designSize = (1920 + 1080) / 2
let wW = (document.body.clientWidth + document.body.clientHeight) / 2;// 窗口宽度
let rem = wW * 100 / designSize;
document.documentElement.style.fontSize = rem + 'px';
store.dispatch('user/setFontSize', rem)
// window.location.reload()
});
});
},
computed: {
...mapGetters(["fontSize"])
},
components: { transverseBar, bar, cake },
methods: {
addBound() {
},
mounted() {
let me = this;
let list = njBround;
if (list && list.length > 0) {
list.map(item => {
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"
});
me.map.add(polygon);
me.getScreenIndex()
me.getWaterAlarmList()
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)
})
});
},
computed: {
...mapGetters(["fontSize"])
},
components: {transverseBar, bar, cake},
methods: {
getWaterAlarmList() {
waterAlarmApi.getWaterAlarmList(3).then(res => {
this.waterAlarmList = res.data ? res.data : []
}).catch(e => {
this.waterAlarmList = []
})
},
getScreenIndex() {
api.getScreenIndex().then(res => {
const {inspectQuestionInfo, questionDriverAreaList, waterAlarmCategoryList, waitQuestionInfo, questionDriverList} = res.data
this.inspectQuestionInfo = inspectQuestionInfo ? inspectQuestionInfo : {}
if (questionDriverAreaList && questionDriverAreaList.length > 0) {
for (let i = 0; i < questionDriverAreaList.length; i++) {
if (i % 2 === 0) {
questionDriverAreaList[i].vote = 1
} else {
questionDriverAreaList[i].vote = 2
}
}
}
this.questionDriverAreaList = questionDriverAreaList ? questionDriverAreaList : []
this.waterAlarmCategoryList = waterAlarmCategoryList ? waterAlarmCategoryList : []
this.waitQuestionInfo = waitQuestionInfo ? waitQuestionInfo : {}
if (questionDriverList && questionDriverList.length > 0) {
for (let i = 0; i < questionDriverList.length; i++) {
if (i == 0) {
questionDriverList[i].cat = 1
} else if (i == 1) {
questionDriverList[i].cat = 2
} else if (i == 2) {
questionDriverList[i].cat = 3
}else{
questionDriverList[i].cat = 4
}
}
}
this.questionDriverList = questionDriverList ? questionDriverList.reverse() : []
console.log(questionDriverList)
}).catch(e => {
this.inspectQuestionInfo = {}
this.questionDriverAreaList = []
this.waterAlarmCategoryList = []
this.waitQuestionInfo = {}
this.questionDriverList = []
})
},
addBound() {
let me = this;
let list = njBround;
if (list && list.length > 0) {
list.map(item => {
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"
});
me.map.add(polygon);
}
}
});
}
},
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]
});
}
},
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);
text.setMap(this.map);
}
}
}
};
};
</script>

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

.index-map {
.main-index {
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;
.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%;
height: 1.04rem;
}
.head-img {
position: absolute;
top: 0rem;
width: 100%;
height: 1.04rem;
}

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

> div {
color: #ffffff;
font-family: PingFangSC-Regular;
font-size: 0.22rem;
padding-left: 0.3rem;
}
}
}

.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.16rem;
display: flex;
justify-content: space-between;
align-items: center;
> div:first-child {
.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.16rem;
height: 0.28rem;
display: flex;
justify-content: space-between;
align-items: center;
> img {
width: 0.2rem;
height: 0.2rem;
margin-right: 0.1rem;

> div:first-child {
display: flex;
align-items: center;

> img {
width: 0.2rem;
height: 0.2rem;
margin-right: 0.1rem;
}

> div:last-child {
width: 2.8rem;
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 {
width: 2.6rem;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
font-family: PingFangSC-Regular;
font-size: 0.2rem;
font-size: 0.14rem;
color: #ffffff;
line-height: 0.28rem;
line-height: 0.2rem;
}
}
> div:last-child {
}
}

> div:nth-child(2) {
margin-top: 0.154rem;
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;
line-height: 0.2rem;
position: absolute;
top: 0.2rem;
left: 0.573rem;
}
}
}
}
> div:nth-child(2) {
margin-top: 0.154rem;
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;
margin-top: 0.15rem;
background-color: rgba(0, 0, 0, 0.6);

> div:last-child {
position: relative;
display: flex;
justify-content: center;
padding: 0 0.34rem;
padding-bottom: 0.05rem;
}
}
}
> div:last-child {
margin-top: 0.15rem;
background-color: rgba(0, 0, 0, 0.6);
> div:last-child {
position: relative;
display: flex;
justify-content: center;
padding: 0 0.34rem;
padding-bottom: 0.05rem;
}
}
}

.box-left {
position: absolute;
top: 1.55rem;
width: 5.05rem;
left: 0.1rem;
.box-left {
position: absolute;
top: 1.55rem;
width: 5.05rem;
left: 0.1rem;

> div:first-child {
background-color: rgba(0, 0, 0, 0.6);
> div:last-child {
padding: 0.17rem 0.27rem;
display: flex;
position: relative;
> img {
position: absolute;
width: 0.92rem;
height: 0.185rem;
left: 1.85rem;
bottom: 0.58rem;
}
> div:nth-child(2) {
width: 1.82rem;
height: 1.82rem;
background-position: center center;
background-size: cover;
background-image: url(../../assets/img/main/table.png);
> div:first-child {
background-color: rgba(0, 0, 0, 0.6);

> div:last-child {
padding: 0.17rem 0.27rem;
display: flex;
align-items: center;
justify-content: center;
.el-progress__text {
font-family: Oswald-Demi-BoldItalic;
font-size: 0.33rem!important;
color: #ffffff;
position: relative;

> img {
position: absolute;
width: 0.92rem;
height: 0.185rem;
left: 1.85rem;
bottom: 0.58rem;
}
}
> div:last-child {
margin-left: 0.53rem;
> div {
width: 2rem;
height: 0.86rem;

> div:nth-child(2) {
width: 1.82rem;
height: 1.82rem;
background-position: center center;
background-size: cover;
background-image: url(../../assets/img/main/bg.png);
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.53rem;

> div {
padding: 0.15rem 0.24rem;
> div:first-child {
display: flex;
align-items: center;
width: 2rem;
height: 0.86rem;
background-position: center center;
background-size: cover;
background-image: url(../../assets/img/main/bg.png);

> div {
padding: 0.15rem 0.24rem;

> div:first-child {
background: #fedf12;
border: 0.02rem solid #657533;
border-radius: 50%;
height: 0.06rem;
width: 0.06rem;
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 {
font-family: PingFangSC-Regular;
font-size: 0.14rem;
color: #ffffff;
margin-left: 0.05rem;
}
}
> div:last-child {
font-family: Impact;
font-size: 0.3rem;
color: #ffffff;
text-align: right;
> span {
font-family: PingFangSC-Regular;
font-size: 0.12rem;
font-family: Impact;
font-size: 0.3rem;
color: #ffffff;
margin-left: 0.02rem;
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:last-child {
margin-top: 0.2rem;

> div > div:first-child > div:first-child {
background: #18d27c;
border: 0.02rem solid #0c8757;
}
}
}
}
}
}
> div:nth-child(2) {
margin-top: 0.175rem;
background-color: rgba(0, 0, 0, 0.6);
> div:last-child {
padding: 0.178rem 0.43rem 0.235rem 0.4rem;
position: relative;
> div {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;

> div:nth-child(2) {
margin-top: 0.175rem;
background-color: rgba(0, 0, 0, 0.6);

> div:last-child {
padding: 0.178rem 0.43rem 0.235rem 0.4rem;
position: relative;

> div {
display: flex;
width: 100%;
justify-content: space-between;
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 {
display: flex;
align-items: center;

> img {
width: 0.8rem;
height: 0.8rem;
margin-right: 0.308rem;
}

> div:last-child {
> div:first-child {
font-family: PingFangSC-Medium;
font-size: 0.3rem;
color: #ffffff;
line-height: 0.42rem;
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;
}
}
> 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 {
font-family: PingFangSC-Regular;
font-size: 0.14rem;
color: #ffffff;
line-height: 0.2rem;
}
}
}
}
> div:last-child {
margin-top: 0.177rem;

> div:last-child {
margin-top: 0.177rem;
}
}
}
}
> div:last-child {
margin-top: 0.15rem;
background-color: rgba(0, 0, 0, 0.6);

> div:last-child {
position: relative;
display: flex;
justify-content: center;
padding-top: 0.1rem;
padding-bottom: 0.05rem;
margin-top: 0.15rem;
background-color: rgba(0, 0, 0, 0.6);

> div:last-child {
position: relative;
display: flex;
justify-content: center;
padding-top: 0.1rem;
padding-bottom: 0.05rem;
}
}
}
}

}
}
</style>

+ 38
- 18
src/views/main/transverseBar.vue Ver arquivo

@@ -10,7 +10,6 @@ export default {
name: "transverseBar",
data() {
return {
data: []
};
},
props: {
@@ -31,20 +30,33 @@ export default {
default() {
return '';
}
},
dataList: {
type: Array,
default() {
return [];
}
}
},
computed: {
...mapGetters(["fontSize"])
},
watch:{
dataList(){
if(this.dataList.length>0){
this.chart.changeData(this.dataList);
}
}
},
mounted() {
this.data = [
{ type: "固城湖", value: 45, cat: "4", cc: "1." },
{ type: "百家湖", value: 54, cat: "4" },
{ type: "莫愁湖莫愁湖asd", value: 65, cat: "4" },
{ type: "玄武湖", value: 80, cat: "3" },
{ type: "金川河", value: 110, cat: "2" },
{ type: "秦淮河", value: 187, cat: "1" }
];
// this.data = [
// { type: "固城湖", value: 45, cat: "4", cc: "1." },
// { type: "百家湖", value: 54, cat: "4" },
// { type: "莫愁湖莫愁湖asd", value: 65, cat: "4" },
// { type: "玄武湖", value: 80, cat: "3" },
// { type: "金川河", value: 110, cat: "2" },
// { type: "秦淮河", value: 187, cat: "1" }
// ];
const chart = new G2.Chart({
container: this.id,
autoFit: true,
@@ -63,7 +75,7 @@ export default {
alias: "问题"
}
});
chart.axis("type", {
chart.axis("driverName", {
title: null,
tickLine: null,
line: null,
@@ -106,7 +118,7 @@ export default {
// }
}
});
chart.axis("value", {
chart.axis("totalNum", {
label: null,
grid: null,
title: null
@@ -117,10 +129,21 @@ export default {
chart
.interval()
.opacity(1)
.position("type*value")
.color("cat", ["#2F858F", '#EFE134', "#FB9A08", "#EB1005"])
.position("driverName*totalNum")
.color("cat", value => {
if (value == 1) {
return "#EB1005";
}
if (value == 2) {
return "#FB9A08";
}
if (value == 3) {
return "#EFE134";
}
return "#2F858F";
})
.size(this.$root.$options.filters.filterPx(0.09,this.fontSize))
.label("value", {
.label("totalNum", {
textStyle: {
fill: "#ffffff",
fontSize: this.$root.$options.filters.filterPx(0.17,this.fontSize),
@@ -129,10 +152,6 @@ export default {
});
chart.render();
this.chart = chart;
let me = this;
setTimeout(function() {
me.chart.changeData(me.data);
}, 1000);
},
methods: {}
};
@@ -143,6 +162,7 @@ export default {
>div{
display: flex;
align-items: center;
height: 2.008rem;
}
.radio {
display: flex;

Escrever Pré-visualização
Carregando…
Cancelar
Salvar