Skip to content

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

车船情况

parent ad07b1d4
Hide whitespace changes
Inline Side-by-side
Showing with 759 additions and 105 deletions
package-lock.json
View file @ 5457301c
...@@ -2486,12 +2486,11 @@ ...@@ -2486,12 +2486,11 @@
} }
}, },
"echarts": { "echarts": {
"version": "5.5.1", "version": "4.9.0",
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz", "resolved": "https://registry.npmmirror.com/echarts/-/echarts-4.9.0.tgz",
"integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==", "integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
"requires": { "requires": {
"tslib": "2.3.0", "zrender": "4.3.2"
"zrender": "5.6.0"
} }
}, },
"editorconfig": { "editorconfig": {
...@@ -7084,11 +7083,6 @@ ...@@ -7084,11 +7083,6 @@
"integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==", "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==",
"dev": true "dev": true
}, },
"tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
},
"tty-browserify": { "tty-browserify": {
"version": "0.0.0", "version": "0.0.0",
"resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz", "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
...@@ -8337,12 +8331,9 @@ ...@@ -8337,12 +8331,9 @@
} }
}, },
"zrender": { "zrender": {
"version": "5.6.0", "version": "4.3.2",
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.0.tgz", "resolved": "https://registry.npmmirror.com/zrender/-/zrender-4.3.2.tgz",
"integrity": "sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==", "integrity": "sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g=="
"requires": {
"tslib": "2.3.0"
}
} }
} }
} }
src/module/api/apiList.js
View file @ 5457301c
...@@ -11,35 +11,35 @@ export const captcha = () => fetch('/auth/get-captcha', {}, 'POST'); ...@@ -11,35 +11,35 @@ export const captcha = () => fetch('/auth/get-captcha', {}, 'POST');
//登录 //登录
export const userLogin = (username, pass, captchaSign, verificationcode, captchaTimestamp) => fetch('/api/auth/login', { export const userLogin = (username, pass, captchaSign, verificationcode, captchaTimestamp) => fetch('/api/auth/login', {
username: username, username: username,
password: pass, password: pass,
captcha: { captcha: {
sign: captchaSign, sign: captchaSign,
captcha: verificationcode, captcha: verificationcode,
timestamp: captchaTimestamp timestamp: captchaTimestamp
} }
}, 'POST'); }, 'POST');
//首页营业额率值 -汇总 //首页营业额率值 -汇总
export const getBusinessConditionDatas = (cur_day) => fetch('/api/query/*/action/get_business_condition_datas', { export const getBusinessConditionDatas = (cur_day) => fetch('/api/query/*/action/get_business_condition_datas', {
aux: { aux: {
cur_day: cur_day cur_day: cur_day
} }
}, 'POST'); }, 'POST');
//明细页营业额汇月 -汇总 //明细页营业额汇月 -汇总
export const getBusinessConditionDataByMonth = (cur_day) => fetch('/api/query/*/action/get_business_condition_datas_by_month', { export const getBusinessConditionDataByMonth = (cur_day) => fetch('/api/query/*/action/get_business_condition_datas_by_month', {
aux: { aux: {
cur_day: cur_day cur_day: cur_day
} }
}, 'POST'); }, 'POST');
//明细页营业额汇年 -汇总 //明细页营业额汇年 -汇总
export const getBusinessConditionDatasByYear = (cur_day) => fetch('/api/query/*/action/get_business_condition_datas_by_year', { export const getBusinessConditionDatasByYear = (cur_day) => fetch('/api/query/*/action/get_business_condition_datas_by_year', {
aux: { aux: {
cur_day: cur_day cur_day: cur_day
} }
}, 'POST'); }, 'POST');
//明细页营业额汇年 -同期对比 //明细页营业额汇年 -同期对比
...@@ -57,9 +57,9 @@ export const arSummaryBar = () => fetch("/api/query/dash_board/action/get_ar_sum ...@@ -57,9 +57,9 @@ export const arSummaryBar = () => fetch("/api/query/dash_board/action/get_ar_sum
* 获取账款情况 * 获取账款情况
*/ */
export const getAccountSituation = (cur_day) => fetch("/api/query/dash_board/action/get_account_situation", { export const getAccountSituation = (cur_day) => fetch("/api/query/dash_board/action/get_account_situation", {
aux: { aux: {
cur_day: cur_day cur_day: cur_day
} }
}, "POST") }, "POST")
// 应收账款列表 // 应收账款列表
export const arCompanyList = () => fetch("/api/query/dash_board/action/get_ar_company_list", {}, "POST") export const arCompanyList = () => fetch("/api/query/dash_board/action/get_ar_company_list", {}, "POST")
...@@ -73,45 +73,45 @@ export const arCompanyMonthlyBar = (company) => fetch("/api/query/dash_board/act ...@@ -73,45 +73,45 @@ export const arCompanyMonthlyBar = (company) => fetch("/api/query/dash_board/act
export const arMonthlyCompanyBar = (month) => fetch("/api/query/dash_board/action/get_ar_monthly_company_bar", {aux: {month: month}}, "POST") export const arMonthlyCompanyBar = (month) => fetch("/api/query/dash_board/action/get_ar_monthly_company_bar", {aux: {month: month}}, "POST")
//明细页营业额汇月 -汇总 //明细页营业额汇月 -汇总
export const getAllTypeBusinessConditionDatas = (cur_day) => fetch('/api/query/*/action/get_all_type_business_condition_datas', { export const getAllTypeBusinessConditionDatas = (cur_day) => fetch('/api/query/*/action/get_all_type_business_condition_datas', {
aux: { aux: {
cur_day: cur_day cur_day: cur_day
} }
}, 'POST'); }, 'POST');
//明细页各种运输类型营业额明细 //明细页各种运输类型营业额明细
export const getAllTypeBusinessConditionDetailByDay = (cur_day) => fetch('/api/query/*/action/get_all_type_business_condition_detail_by_day', { export const getAllTypeBusinessConditionDetailByDay = (cur_day) => fetch('/api/query/*/action/get_all_type_business_condition_detail_by_day', {
aux: { aux: {
cur_day: cur_day cur_day: cur_day
} }
}, 'POST'); }, 'POST');
//明细页各种运输类型营业额汇总-月维度 //明细页各种运输类型营业额汇总-月维度
export const getAllTypeBusinessConditionDatasByMonth = (cur_day) => fetch('/api/query/*/action/get_all_type_business_condition_datas_by_month', { export const getAllTypeBusinessConditionDatasByMonth = (cur_day) => fetch('/api/query/*/action/get_all_type_business_condition_datas_by_month', {
aux: { aux: {
cur_day: cur_day cur_day: cur_day
} }
}, 'POST'); }, 'POST');
//明细页各种运输类型营业额汇总-年维度 //明细页各种运输类型营业额汇总-年维度
export const getAllTypeBusinessConditionDatasByYear = (cur_day) => fetch('/api/query/*/action/get_all_type_business_condition_datas_by_year', { export const getAllTypeBusinessConditionDatasByYear = (cur_day) => fetch('/api/query/*/action/get_all_type_business_condition_datas_by_year', {
aux: { aux: {
cur_day: cur_day cur_day: cur_day
} }
}, 'POST'); }, 'POST');
//明细页各种运输类型营业额明细-月维度 //明细页各种运输类型营业额明细-月维度
export const getAllTypeBusinessConditionDetailByMonth = (cur_day) => fetch('/api/query/*/action/get_all_type_business_condition_detail_by_month', { export const getAllTypeBusinessConditionDetailByMonth = (cur_day) => fetch('/api/query/*/action/get_all_type_business_condition_detail_by_month', {
aux: { aux: {
cur_day: cur_day cur_day: cur_day
} }
}, 'POST'); }, 'POST');
//明细页各种运输类型营业额明细-年维度 //明细页各种运输类型营业额明细-年维度
export const getAllTypeBusinessConditionDetailByYear = (cur_day) => fetch('/api/query/*/action/get_all_type_business_condition_detail_by_year', { export const getAllTypeBusinessConditionDetailByYear = (cur_day) => fetch('/api/query/*/action/get_all_type_business_condition_detail_by_year', {
aux: { aux: {
cur_day: cur_day cur_day: cur_day
} }
}, 'POST'); }, 'POST');
...@@ -123,40 +123,41 @@ export const getTargetOrderDataByCondition = (aux) => fetch("/api/query/*/action ...@@ -123,40 +123,41 @@ export const getTargetOrderDataByCondition = (aux) => fetch("/api/query/*/action
//流失客户 & 新增客户 //流失客户 & 新增客户
export const getOrderLoseAddCustomer = (cur_day) => fetch('/api/query/*/action/get_order_loss_add_customer', { export const getOrderLoseAddCustomer = (cur_day) => fetch('/api/query/*/action/get_order_loss_add_customer', {
aux: { aux: {
cur_day: cur_day cur_day: cur_day
} }
}, 'POST'); }, '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: { aux: {
cur_day: cur_day, cur_day: cur_day,
type: type, type: type,
cur_page:cur_page cur_page: cur_page
} }
}, 'POST'); }, 'POST');
//当日订单量，当时完成量 余量 //当日订单量，当时完成量 余量
export const getOrderBusinessConditionData = (cur_day, type) => fetch('/api/query/*/action/get_order_business_condition_data', { export const getOrderBusinessConditionData = (cur_day, type) => fetch('/api/query/*/action/get_order_business_condition_data', {
aux: { aux: {
cur_day: cur_day cur_day: cur_day
} }
}, 'POST'); }, 'POST');
//30天内事务部运单完成量 //30天内事务部运单完成量
export const getDepartmentShipmentWeight = (department_code, cur_day) => fetch('/api/query/*/action/get_shipment_data_by_department', { export const getDepartmentShipmentWeight = (department_code, cur_day) => fetch('/api/query/*/action/get_shipment_data_by_department', {
aux: { aux: {
cur_day: cur_day cur_day: cur_day
,department_code: department_code , department_code: department_code
} }
}, 'POST'); }, 'POST');
//折线图目标量 //折线图目标量
export const getDepartmentTargetWeight = (department_code, year) => fetch('/api/query/*/action/get_department_target_weight', { export const getDepartmentTargetWeight = (department_code, year) => fetch('/api/query/*/action/get_department_target_weight', {
aux: { aux: {
year: year year: year
,department_code: department_code , department_code: department_code
} }
}, 'POST'); }, '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,18 +3,20 @@ ...@@ -3,18 +3,20 @@
<div class="full_page"> <div class="full_page">
<!-- 左--> <!-- 左-->
<div class="trade_left"> <div class="trade_left">
<div style="height: 37%;" > <div style="height: 37%;">
<display-board style="display: flex; justify-content: space-between; height: 98%;" title="安全"> <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"
</display-board> :rows="arSafeList"/>
</div> </display-board>
<div style="height: 37%;" > </div>
<display-board style="display: flex; justify-content: space-between; height: 98%;" title="质量"> <div style="height: 37%;">
<winners-list style="height: 96%;overflow: auto;" :mouseHand="true" @click.native="goArBar" id="quality_list" :rows="arQualityList"/> <display-board style="display: flex; justify-content: space-between; height: 98%;" title="质量">
</display-board> <winners-list style="height: 96%;overflow: auto;" :mouseHand="true" @click.native="goArBar"
</div> id="quality_list" :rows="arQualityList"/>
<div style="height: 26%;" > </display-board>
<display-board style="display: flex; justify-content: space-between; height: 98%;" title="人员情况表"> </div>
<div style="height: 26%;">
<display-board style="display: flex; justify-content: space-between; height: 98%;" title="人员情况表">
<div class="bar"> <div class="bar">
<div ref="bar"></div> <div ref="bar"></div>
</div> </div>
...@@ -22,10 +24,20 @@ ...@@ -22,10 +24,20 @@
</div> </div>
</div> </div>
<!--中--> <!--中-->
<display-board class="trade_middle" > <display-board class="trade_middle">
<div class="trade_middle" style="border: none;box-shadow: none;"> <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>
<div style="display: flex; justify-content: space-between; height: 20%;"> <div style="display: flex; justify-content: space-between; height: 20%;">
</div> </div>
...@@ -33,18 +45,18 @@ ...@@ -33,18 +45,18 @@
</display-board> </display-board>
<!-- 右--> <!-- 右-->
<div class="trade_right"> <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 style="display: flex; justify-content: space-between; height: 98%;" title="汽运">
</display-board> </display-board>
</div> </div>
<div style="height: 33%;" > <div style="height: 33%;">
<display-board style="display: flex; justify-content: space-between; height: 98%;" title="水运"> <display-board style="display: flex; justify-content: space-between; height: 98%;" title="水运">
</display-board> </display-board>
</div> </div>
<div style="height: 34%;" > <div style="height: 34%;">
<display-board style="display: flex; justify-content: space-between; height: 98%;" title="铁运"> <display-board style="display: flex; justify-content: space-between; height: 98%;" title="铁运">
</display-board> </display-board>
</div> </div>
...@@ -56,22 +68,41 @@ ...@@ -56,22 +68,41 @@
import DisplayBoard from "../components/container/display-board.vue"; import DisplayBoard from "../components/container/display-board.vue";
import WinnersList from "../components/card/winners-list.vue"; import WinnersList from "../components/card/winners-list.vue";
import TitleContentMark from "../components/layout/title-content-mark.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 { export default {
name: "SafeQuality", name: "SafeQuality",
components: { components: {
TitleContentMark, TitleContentMark,
DisplayBoard, DisplayBoard,
WinnersList WinnersList,
mapPointMark,
SimpleCard
}, },
data() { data() {
return {} return {
arSafeList: [],
arQualityList: [],
truckCount: "0",
shipCount: "0",
truckDis: [],
shipDis: [],
derviceDis: [],
crurrDevireMapTyep: ""
}
}, },
methods: { methods: {
refreshData() { refreshData() {
this.getPeopleInfos(); this.getPeopleInfos();
this.getTruckShipCondition();
}, },
getPeopleInfos(){ getPeopleInfos() {
// var seriesBar = []; // var seriesBar = [];
// seriesBar.push(adapterSeriesDataBar(null, "在编", [10,20])); // seriesBar.push(adapterSeriesDataBar(null, "在编", [10,20]));
...@@ -83,7 +114,42 @@ export default { ...@@ -83,7 +114,42 @@ export default {
// let chart=echarts.init(barDom); // let chart=echarts.init(barDom);
// chart.setOption(this.peopleInfoOption); // 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() { mounted() {
this.refreshData(); this.refreshData();
...@@ -91,15 +157,15 @@ export default { ...@@ -91,15 +157,15 @@ export default {
beforeDestroy() { beforeDestroy() {
}, },
watch:{ watch: {
countDown(n,o){ countDown(n, o) {
if (n === 1){ if (n === 1) {
this.refreshData(); this.refreshData();
} }
}, },
}, },
props:{ props: {
countDown:{ countDown: {
type: Number type: Number
} }
} }
...@@ -111,4 +177,15 @@ export default { ...@@ -111,4 +177,15 @@ export default {
background-color: #19EBFF10; background-color: #19EBFF10;
transform: scale(101%); transform: scale(101%);
} }
.selectedBtn {
color: #1234a1 !important;
background-color: #005dd6 !important;
}
.unSelectedBtn {
color: #00c8d6;
background-color: #1234a1;
}
</style> </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