Skip to content

S
shld-databoard-ui
Commit 5457301c authored by Inner peace's avatar Inner peace
Browse files
Options

车船情况

parent ad07b1d4
Show whitespace changes
Inline Side-by-side
Showing with 759 additions and 105 deletions
package-lock.json
View file @ 5457301c
......@@ -2486,12 +2486,11 @@
}
},
"echarts": {
"version": "5.5.1",
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz",
"integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==",
"version": "4.9.0",
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-4.9.0.tgz",
"integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
"requires": {
"tslib": "2.3.0",
"zrender": "5.6.0"
"zrender": "4.3.2"
}
},
"editorconfig": {
......@@ -7084,11 +7083,6 @@
"integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==",
"dev": true
},
"tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
},
"tty-browserify": {
"version": "0.0.0",
"resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
......@@ -8337,12 +8331,9 @@
}
},
"zrender": {
"version": "5.6.0",
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.0.tgz",
"integrity": "sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==",
"requires": {
"tslib": "2.3.0"
}
"version": "4.3.2",
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-4.3.2.tgz",
"integrity": "sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g=="
}
}
}
src/module/api/apiList.js
View file @ 5457301c
......@@ -129,11 +129,11 @@ export const getOrderLoseAddCustomer = (cur_day) => fetch('/api/query/*/action/g
}, 'POST');
//流失客户 & 新增客户-明细
export const getOrderAddCustomerDetail = (cur_day, type,cur_page) => fetch('/api/query/*/action/get_order_add_customer_detail', {
export const getOrderAddCustomerDetail = (cur_day, type, cur_page) => fetch('/api/query/*/action/get_order_add_customer_detail', {
aux: {
cur_day: cur_day,
type: type,
cur_page:cur_page
cur_page: cur_page
}
}, 'POST');
......@@ -147,16 +147,17 @@ export const getOrderBusinessConditionData = (cur_day, type) => fetch('/api/quer
export const getDepartmentShipmentWeight = (department_code, cur_day) => fetch('/api/query/*/action/get_shipment_data_by_department', {
aux: {
cur_day: cur_day
,department_code: department_code
, department_code: department_code
}
}, 'POST');
//折线图目标量
export const getDepartmentTargetWeight = (department_code, year) => fetch('/api/query/*/action/get_department_target_weight', {
aux: {
year: year
,department_code: department_code
, department_code: department_code
}
}, 'POST');
//车船情况
export const getTruckShipConditionData = (department) => fetch('/api/query/*/action/get_truck_ship_condition_data', {}, 'POST');
src/module/databoard/components/map/geo_data.js 0 → 100644
View file @ 5457301c
export const geoCoordMap = {
"新疆维吾尔自治区": [
86.9023,
41.148
]
,
"西藏自治区": [
87.8695,
31.6846
]
,
"内蒙古自治区": [
110.5977,
41.3408
]
,
"青海省": [
95.2402,
35.4199
]
,
"四川省": [
102.9199,
30.1904
]
,
"黑龙江省": [
128.1445,
46.7156
]
,
"甘肃省": [
102.7129,
38.166
]
,
"云南省": [
101.0652,
24.6807
]
,
"广西壮族自治区": [
108.7813,
23.6426
]
,
"湖南省": [
111.5332,
27.3779
]
,
"陕西省": [
108.5996,
33.7396
]
,
"广东省": [
113.8668,
22.8076
]
,
"吉林省": [
126.1746,
43.5938
]
,
"河北省": [
115.4004,
38.1688
]
,
"湖北省": [
112.2363,
30.8572
]
,
"贵州省": [
106.6113,
26.6385
]
,
"山东省": [
118.2402,
36.2307
]
,
"江西省": [
115.7156,
27.99
]
,
"河南省": [
113.0668,
33.8818
]
,
"辽宁省": [
123.0438,
41.0889
]
,
"山西省": [
112.4121,
36.6611
]
,
"安徽省": [
117.2461,
31.0361
]
,
"福建省": [
118.3008,
25.9277
]
,
"浙江省": [
120.498,
29.0918
]
,
"江苏省": [
119.8586,
32.915
]
,
"重庆省": [
107.7539,
29.8904
]
,
"宁夏回族自治区": [
105.9961,
37.1096
]
,
"海南省": [
109.9512,
19.2041
]
,
"台湾省": [
120.8254,
23.5986
]
,
"北京省": [
116.4551,
40.2539
]
,
"天津省": [
117.4219,
39.4189
]
,
"上海省": [
121.4648,
31.2891
]
,
"香港特别行政区": [
114.6178,
22.3242
]
,
"澳门特别行政区": [
113.5547,
21.6484
]
}
;
src/module/databoard/components/map/map-point-mark.vue 0 → 100644
View file @ 5457301c
<template>
<div ref="charts" class="echarts">
</div>
</template>
<script>
import * as echarts from "echarts";
import * as geo from "./geo_data";
import china from "./geojson.json";
import TitleContentMark from "../layout/title-content-mark.vue";
import SimpleCard from "../card/simple-card.vue";
export default {
name: "mapPointMark",
components: {geo, TitleContentMark, SimpleCard},
data() {
return {
outdata: [],
max: 8000,
min: 10,
maxSize4Pin: 150,
minSize4Pin: 20,
option: {}
};
},
props: {
derviceDis: []
},
methods: {
convertData(outdata) {
var res = [];
for (var i = 0; i < this.outdata.length; i++) {
var geoCoord = geo.geoCoordMap[this.outdata[i].name];
if (geoCoord) {
res.push({
name: this.outdata[i].name,
value: geoCoord.concat(this.outdata[i].value),
});
}
}
return res;
},
initData() {
this.outdata = [];
for (let i = 0; i < this.derviceDis.length; i++) {
let province = this.derviceDis[i]['province']
let count = this.derviceDis[i]['count']
this.outdata.push({
name: province,
value: count
})
}
const vm = this;
this.option = {
backgroundColor: '#020046',
tooltip: {
show: true,
formatter: function (params) {
if (params.value.length > 1) {
return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;' + params.value[2] + '&nbsp;&nbsp;';
} else {
return '&nbsp;&nbsp;' + params.name + '&nbsp;&nbsp;&nbsp;' + params.value + '&nbsp;&nbsp;';
}
},
},
title: {
top: 20,
text: '',
subtext: '',
x: 'center',
textStyle: {
color: '#ccc'
}
},
visualMap: {
min: 0,
max: 2000,
left: 26,
bottom: 90,
showLabel: !0,
text: ["高", "低"],
textStyle: {
color: "#ffffff",
fontSize: 16
},
pieces: [{
gte: 100,
label: ">100",
color: '#e81c00'
}, {
gte: 11,
lt: 100,
label: "11 - 100",
color: '#fdc002'
}, {
gte: 1,
lt: 10,
label: "1 - 10",
color: '#00cbfe'
}],
show: !0
},
geo: {
map: 'china',
layoutCenter: ['50%', '50%'],// 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
layoutSize: 100,
zoom: 6.5,
label: {
normal: {
show: true,//是否显示标签
textStyle: {
color: '#fff',
},
},
emphasis: {
textStyle: {
color: '#fff',
},
},
},
roam: true,
itemStyle: {
normal: {
areaColor: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#082b7f' // 0% 处的颜色
}, {
offset: 1,
color: '#082b7f' // 100% 处的颜色
}],
},
borderColor: '#68c7e7',
borderWidth: 1,
},
}
},
series: [
{
type: 'effectScatter',
coordinateSystem: 'geo',
rippleEffect: {
brushType: 'stroke'
},
showEffectOn: 'render',
itemStyle: {
normal: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0,
color: 'rgba(5,80,151,0.2)'
}, {
offset: 0.8,
color: 'rgba(5,80,151,0.8)'
}, {
offset: 1,
color: 'rgba(0,108,255,0.7)'
}],
global: false // 缺省为 false
},
}
},
label: {
normal: {
show: true,
color: '#fff',
fontWeight: 'bold',
position: 'inside',
formatter: function (para) {
return '{cnNum|' + para.data.value[2] + '}'
},
rich: {
cnNum: {
fontSize: 13,
color: '#D4EEFF',
}
}
},
},
symbol: 'circle',
symbolSize: function (val) {
if (val[2] === 0) {
return 0;
}
var a = (vm.maxSize4Pin - vm.minSize4Pin) / (vm.max - vm.min);
var b = vm.maxSize4Pin - a * vm.max;
return a * val[2] + b * 1.2;
},
data: this.convertData(this.outdata),
zlevel: 1,
},
]
}
},
refreshChart() {
if (this.chart) {
this.chart.setOption(this.option);
} else {
let chartDom = this.$refs.charts;
this.chart = echarts.init(chartDom);
echarts.registerMap('china', china);
this.chart.setOption(this.option);
}
this.chart.resize;
},
},
watch: {
derviceDis(n, o) {
console.log(JSON.stringify(this.derviceDis))
this.initData()
this.refreshChart();
},
},
computed: {},
mounted() {
this.initData()
this.refreshChart()
//注意，第一个参数的名字必须和option.geo.map一致
window.addEventListener('resize', this.chart.resize);
}
};
</script>
<style scoped>
</style>
src/module/databoard/components/map/map-transport-line.vue 0 → 100644
View file @ 5457301c
<template>
<div ref="charts" class="echarts"></div>
</template>
<script>
import * as echarts from "echarts";
import * as geo from "./geo_data"
import china from "./geojson.json"
export default {
name: "mapTransportLine",
components: {geo},
data() {
return {
BJData: [[{name: '成都'}, {name: '潍坊', value: 5}],
[{name: '潍坊'}, {name: '西宁', value: 5}]],
series: [],
chart: null,
option: {
backgroundColor: '#404a59',
tooltip: {
trigger: 'item'
},
legend: {},
geo: {
map: 'china',
layoutCenter: ['50%', '70%'],// 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
layoutSize: 100,
zoom: 7,
label: {
emphasis: {
show: false
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#404a59'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [{
"type": "lines",
"zlevel": 1,
"effect": {"show": true, "period": 6, "trailLength": 0.7, "color": "#fff", "symbolSize": 3},
"lineStyle": {"normal": {"color": "#a6c84c", "width": 0, "curveness": 0.2}},
"data": [{"fromName": "成都", "toName": "潍坊", "coords": [[103.9526, 30.7617], [119.0918, 36.524]]}]
}, {
"type": "lines",
"zlevel": 2,
"effect": {"show": true, "period": 6, "trailLength": 0, "symbolSize": 5},
"lineStyle": {"normal": {"color": "#a6c84c", "width": 1, "opacity": 0.4, "curveness": 0.2}},
"data": [{"fromName": "成都", "toName": "潍坊", "coords": [[103.9526, 30.7617], [119.0918, 36.524]]}]
}, {
"type": "effectScatter",
"coordinateSystem": "geo",
"zlevel": 2,
"rippleEffect": {"brushType": "stroke"},
"label": {"normal": {"show": true, "position": "right", "formatter": "{b}"}},
"itemStyle": {"normal": {"color": "#a6c84c"}},
"data": [{"name": "潍坊", "value": [119.0918, 36.524, 5]}]
}]
}
};
},
props: {},
methods: {
convertData(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geo.geoCoordMap[dataItem[0].name];
var toCoord = geo.geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push({
fromName: dataItem[0].name,
toName: dataItem[1].name,
coords: [fromCoord, toCoord]
});
}
}
return res;
},
initData() {
const vm = this; // 捕获Vue实例
const color = ['#a6c84c', '#ffa022', '#46bee9'];
[['北京', this.BJData]].forEach(function (item, i) {
vm.series.push({
name: item[0] + ' Top10',
type: 'lines',
zlevel: 1,
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: '#fff',
symbolSize: 3
},
lineStyle: {
normal: {
color: color[i],
width: 0,
curveness: 0.2
}
},
data: vm.convertData(item[1])
},
{
name: item[0] + ' Top10',
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 6,
trailLength: 0,
//symbol: planePath,
symbolSize: 5
},
lineStyle: {
normal: {
color: color[i],
width: 1,
opacity: 0.4,
curveness: 0.2
}
},
data: vm.convertData(item[1])
},
{
name: item[0] + ' Top10',
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
brushType: 'stroke'
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}'
}
},
symbolSize: function (val) {
return val[2] / 8;
},
itemStyle: {
normal: {
color: color[i]
}
},
data: item[1].map(function (dataItem) {
return {
name: dataItem[1].name,
value: geo.geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
};
})
});
});
}
},
computed: {},
mounted() {
this.initData()
//注意，第一个参数的名字必须和option.geo.map一致
let chartDom = this.$refs.charts;
this.chart = echarts.init(chartDom);
echarts.registerMap('china', china);
this.chart.setOption(this.option);
window.addEventListener('resize', this.chart.resize);
}
};
</script>
<style scoped>
</style>
src/module/databoard/databoard/safe-quality.vue
View file @ 5457301c
......@@ -3,17 +3,19 @@
<div class="full_page">
<!-- 左-->
<div class="trade_left">
<div style="height: 37%;" >
<div style="height: 37%;">
<display-board style="display: flex; justify-content: space-between; height: 98%;" title="安全">
<winners-list style="height: 96%;overflow: auto;" :mouseHand="true" @click.native="goArBar" id="safe_list" :rows="arSafeList"/>
<winners-list style="height: 96%;overflow: auto;" :mouseHand="true" @click.native="goArBar" id="safe_list"
:rows="arSafeList"/>
</display-board>
</div>
<div style="height: 37%;" >
<div style="height: 37%;">
<display-board style="display: flex; justify-content: space-between; height: 98%;" title="质量">
<winners-list style="height: 96%;overflow: auto;" :mouseHand="true" @click.native="goArBar" id="quality_list" :rows="arQualityList"/>
<winners-list style="height: 96%;overflow: auto;" :mouseHand="true" @click.native="goArBar"
id="quality_list" :rows="arQualityList"/>
</display-board>
</div>
<div style="height: 26%;" >
<div style="height: 26%;">
<display-board style="display: flex; justify-content: space-between; height: 98%;" title="人员情况表">
<div class="bar">
<div ref="bar"></div>
......@@ -22,10 +24,20 @@
</div>
</div>
<!--中-->
<display-board class="trade_middle" >
<display-board class="trade_middle">
<div class="trade_middle" style="border: none;box-shadow: none;">
<div style="display: flex; justify-content: space-between; height: 80%;">
<div style="justify-content: space-between; height: 80%;display: inline-block;">
<div style="height: 100%;display: flex;justify-content: space-evenly;">
<simple-card @click.native="changeDevireMap('truckDis')" :class="{'selectedBtn': crurrDevireMapTyep === 'truckDis'}" style="width: 20%;height: 100%">
<title-content-mark style="color: #5eeef4;" title="车辆" :content="truckCount" mark="辆"
isCenter isBold/>
</simple-card>
<simple-card @click.native="changeDevireMap('shipDis')" :class="{'selectedBtn': crurrDevireMapTyep === 'shipDis'}" style="width: 20%;height: 100%">
<title-content-mark style="color: #5eeef4;" title="船舶" :content="shipCount" mark="艘"
isCenter isBold/>
</simple-card>
</div>
<map-point-mark style="width: calc(43vw); height: calc(50vh);" :derviceDis="derviceDis"></map-point-mark>
</div>
<div style="display: flex; justify-content: space-between; height: 20%;">
</div>
......@@ -33,17 +45,17 @@
</display-board>
<!-- 右-->
<div class="trade_right">
<div style="height: 33%;" >
<div style="height: 33%;">
<display-board style="display: flex; justify-content: space-between; height: 98%;" title="汽运">
</display-board>
</div>
<div style="height: 33%;" >
<div style="height: 33%;">
<display-board style="display: flex; justify-content: space-between; height: 98%;" title="水运">
</display-board>
</div>
<div style="height: 34%;" >
<div style="height: 34%;">
<display-board style="display: flex; justify-content: space-between; height: 98%;" title="铁运">
</display-board>
......@@ -56,22 +68,41 @@
import DisplayBoard from "../components/container/display-board.vue";
import WinnersList from "../components/card/winners-list.vue";
import TitleContentMark from "../components/layout/title-content-mark.vue";
import SimpleCard from "../components/card/simple-card.vue";
import mapPointMark from "../components/map/map-point-mark.vue"
import {
getTruckShipConditionData
} from "../../api/apiList"
export default {
name: "SafeQuality",
components: {
TitleContentMark,
DisplayBoard,
WinnersList
WinnersList,
mapPointMark,
SimpleCard
},
data() {
return {}
return {
arSafeList: [],
arQualityList: [],
truckCount: "0",
shipCount: "0",
truckDis: [],
shipDis: [],
derviceDis: [],
crurrDevireMapTyep: ""
}
},
methods: {
refreshData() {
this.getPeopleInfos();
this.getTruckShipCondition();
},
getPeopleInfos(){
getPeopleInfos() {
// var seriesBar = [];
// seriesBar.push(adapterSeriesDataBar(null, "在编", [10,20]));
......@@ -83,7 +114,42 @@ export default {
// let chart=echarts.init(barDom);
// chart.setOption(this.peopleInfoOption);
},
getTruckShipCondition() {
getTruckShipConditionData().then(res => {
let data = res.data
let truckCount = 0;
let shipCount = 0;
for (let device of data.device_type_sum) {
if (device.device_type == '3' || device.device_type == '1') {
truckCount = truckCount + parseInt(device.count)
}
if (device.device_type == '4') {
shipCount = shipCount + parseInt(device.count)
}
}
this.truckCount = truckCount + "";
this.shipCount = shipCount + "";
this.shipDis = data.ship_by_province_sum;
this.truckDis = data.truck_by_province_sum;
if(this.crurrDevireMapTyep == "") {
this.changeDevireMap('truckDis');
}
})
},
changeDevireMap(dimension) {
this.crurrDevireMapTyep = dimension;
switch (dimension) {
case 'truckDis':
this.derviceDis = this.truckDis;
break;
case 'shipDis':
this.derviceDis = this.shipDis;
break;
default:
return;
}
},
},
mounted() {
this.refreshData();
......@@ -91,15 +157,15 @@ export default {
beforeDestroy() {
},
watch:{
countDown(n,o){
if (n === 1){
watch: {
countDown(n, o) {
if (n === 1) {
this.refreshData();
}
},
},
props:{
countDown:{
props: {
countDown: {
type: Number
}
}
......@@ -111,4 +177,15 @@ export default {
background-color: #19EBFF10;
transform: scale(101%);
}
.selectedBtn {
color: #1234a1 !important;
background-color: #005dd6 !important;
}
.unSelectedBtn {
color: #00c8d6;
background-color: #1234a1;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment