Skip to content

S
shld-databoard-ui
Commit 16baa979 authored by xuzhuo's avatar xuzhuo
Browse files
Options

Merge remote-tracking branch 'origin/240806_pro_release' into 240806_pro_release

parents 42cabc89 703c7aba
Show whitespace changes
Inline Side-by-side
Showing with 318 additions and 97 deletions
package.json
View file @ 16baa979
......@@ -21,7 +21,8 @@
"vue": "^2.3.3",
"vue-axios": "^3.5.2",
"vue-cookies": "^1.8.3",
"vue-router": "^2.3.1"
"vue-router": "^2.3.1",
"vue-seamless-scroll": "^1.1.23"
},
"devDependencies": {
"autoprefixer": "^6.7.2",
......
src/module/databoard/components/card/scroll-list.vue 0 → 100644
View file @ 16baa979
<template>
<div class="scroll_list" ref="scrollList">
<vue-seamless-scroll :data="rows" class="scroll_box" :class-option="defineScroll" style="height: 100%;overflow: hidden;width: 100%;color: white;font-size: 14px;">
<ul >
<li v-for="(item, index) in rows" :key="index" :style="{height: 100 / rows.length + '%'}">
<span v-if="showIcon&&!item.blankColumn" style="display: table-cell;vertical-align: middle;">
<div class="col_number">{{ index + 1 }}</div>
</span>
<span class="name" style="display: table-cell;vertical-align: middle;" :style="titleIndependentStyle?item.titleStyle:columnsStyle['title']">{{item.title}}</span>
</li>
</ul>
</vue-seamless-scroll>
</div>
</template>
<script>
export default {
name: "ScrollList",
props: {
showIcon: {
type: Boolean,
default: true
},
titleIndependentStyle:{
type: Boolean,
default: false
},
columnsStyle:{
type: Object,
default: function () {
return {};
}
},
rows: {
type: Array,
default:function(){
return [
{title: '标题列',titleStyle:{},blankColumn:false, column: [{key: '字段', value: '0'}]},
{title: '标题列',titleStyle:{},blankColumn:false, column: [{key: '字段', value: '0'}]},
{title: '标题列',titleStyle:{},blankColumn:false, column: [{key: '字段', value: '0'}]}
];
}
},
colFormatter:{
type: Object,
default: function(){
return {};
}
},
mouseHand: {
type: Boolean,
default: false
}
},
computed: {
defineScroll() {
return {
step: 0.2, // 数值越大速度滚动越快
limitMoveNum: 6, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
};
}
},
data() {
return {};
},
mounted() {
// this.$refs.winnerList.style.cursor = this.$props.mouseHand ? "pointer" : "default"
},
methods: {}
};
</script>
<style scoped>
.scroll_list {
}
.scroll_list::-webkit-scrollbar { width: 0 !important }
li:nth-child(odd) {
background-color: #0E5FFF20;
}
li:nth-child(even) {
background-color: #0E5FFF40;
}
td {
padding: 0 0 0 1rem;
}
.col_number {
height: 38%;
min-width: 38px;
color: #19EBFF;
font-weight: bold;
text-align: center;
line-height: 38px;
background: url(../../assets/img/number_bg.png) no-repeat center;
}
</style>
src/module/databoard/components/card/winners-list.vue
View file @ 16baa979
......@@ -4,7 +4,7 @@
<tbody>
<tr v-for="(row, idx) in $props.rows" :key="idx" :style="{height: 100 / rows.length + '%'}">
<td v-if="showIcon"><div class="col_number">{{ idx + 1 }}</div></td>
<td class="winner_span" :style="columnsStyle['title']">{{ row.title }}</td>
<td class="winner_span" :style="titleIndependentStyle?row.titleStyle:columnsStyle['title']">{{ row.title }}</td>
<td v-for="(col, idz) in row.column" :key="idz" :style="columnsStyle[col.key]">
<p class="key_span">{{ col.key }}</p>
<p class="value_span" :style="col.valStyle">{{colFormatter[''+idz]?colFormatter[''+idz](col.value):col.value }}</p>
......@@ -23,6 +23,10 @@ export default {
type: Boolean,
default: true
},
titleIndependentStyle:{
type: Boolean,
default: false
},
columnsStyle:{
type: Object,
default: function () {
......@@ -33,9 +37,9 @@ export default {
type: Array,
default:function(){
return [
{title: '标题列', column: [{key: '字段', value: '0'}]},
{title: '标题列', column: [{key: '字段', value: '0'}]},
{title: '标题列', column: [{key: '字段', value: '0'}]}
{title: '标题列',titleStyle:{},blankColumn:false, column: [{key: '字段', value: '0'}]},
{title: '标题列',titleStyle:{},blankColumn:false, column: [{key: '字段', value: '0'}]},
{title: '标题列',titleStyle:{},blankColumn:false, column: [{key: '字段', value: '0'}]}
];
}
},
......@@ -98,6 +102,7 @@ td {
.winner_span {
color: white;
font-size: 14px;
display: table-cell;
}
.key_span {
......
src/module/databoard/components/map/geojson.json
View file @ 16baa979
This source diff could not be displayed because it is too large. You can view the blob instead.
src/module/databoard/databoard/safe-quality.vue
View file @ 16baa979
......@@ -5,12 +5,14 @@
<div class="trade_left" style="width: 20%">
<div style="height: 37%;" >
<display-board style="height: 98%;" title="安全">
<winners-list style="height: 96%;overflow: auto;" :mouseHand="true" id="safe_list" :rows="arSafeList"/>
<scroll-list style="height: 97%;overflow: auto;" :rows="arSafeList" :title-independent-style="true"/>
</display-board>
</div>
<div style="height: 37%;" >
<display-board style="height: 100%;" title="质量">
<winners-list style="height: 96%;overflow: auto;" :mouseHand="true" id="quality_list" :rows="arQualityList"/>
<scroll-list style="height: 97%;overflow: auto;" :rows="arQualityList">
</scroll-list>
<!-- <winners-list style="height: 96%;overflow: auto;" :mouseHand="true" id="quality_list" :rows="arQualityList" />-->
</display-board>
</div>
<div style="height: 26%;padding-top: 0.5rem" >
......@@ -100,13 +102,15 @@
<display-board style="display: flex; justify-content: space-between; height: 98%;" title="汽运">
<div style="height: 36%;display: flex;justify-content: space-evenly;padding-top: 1.5rem">
<simple-card style="width:100%;height: 100%">
<title-content-mark style="color: #5eeef4;display: inline-block;font-size: 14px;" :title="arCarSum[0].title+'：'+arCarSum[0].value"/>
<title-content-mark style="color: #5eeef4;font-size: 14px;" :title="arCarSum[0].title+'：'+arCarSum[0].value" is-center is-bold/>
<!--
<title-content-mark style="display: inline-block;padding-left: 6rem;font-size: 14px" :title-style="{color:'red',paddingLeft: '2rem'}" :title="arCarSum[1].title+'：'+arCarSum[1].value"/>
-->
</simple-card>
</div>
<div style="height: 70%;width: 100%;padding-right: 2rem">
<div >
<title-content-mark style="padding-bottom: 0px" :title="barTitle+'：'+carPlan+'%'" :title-style="{fontSize:'22px'}" is-bold is-center/>
<title-content-mark style="padding-bottom: 0px" :title="barTitle+'：'+carPlanRate+'%'" :title-style="{fontSize:'22px'}" is-bold is-center/>
</div>
<div style="height: 100%;width: 100%" ref="car"></div>
</div>
......@@ -116,13 +120,15 @@
<display-board style="display: flex; justify-content: space-between; height: 98%;" title="水运">
<div style="height: 36%;display: flex;justify-content: space-evenly;padding-top: 1.5rem">
<simple-card style="width:100%;height: 100%">
<title-content-mark style="color: #5eeef4;display: inline-block;font-size: 14px;" :title="arCarSum[0].title+'：'+arCarSum[0].value"/>
<title-content-mark style="color: #5eeef4;font-size: 14px;" :title="arShipSum[0].title+'：'+arShipSum[0].value" is-center is-bold/>
<!--
<title-content-mark style="display: inline-block;padding-left: 6rem;font-size: 14px" :title-style="{color:'red',paddingLeft: '2rem'}" :title="arCarSum[1].title+'：'+arCarSum[1].value"/>
-->
</simple-card>
</div>
<div style="height: 70%;width: 100%;padding-right: 2rem">
<div >
<title-content-mark style="padding-bottom: 0px" :title="barTitle+'：'+carPlan+'%'" :title-style="{fontSize:'22px'}" is-bold is-center/>
<title-content-mark style="padding-bottom: 0px" :title="barTitle+'：'+shipPlanRate+'%'" :title-style="{fontSize:'22px'}" is-bold is-center/>
</div>
<div style="height: 100%;width: 100%" ref="ship"></div>
</div>
......@@ -132,13 +138,15 @@
<display-board style="display: flex; justify-content: space-between; height: 98%;" title="铁运">
<div style="height: 36%;display: flex;justify-content: space-evenly;padding-top: 1.5rem">
<simple-card style="width:100%;height: 100%">
<title-content-mark style="color: #5eeef4;display: inline-block;font-size: 14px;" :title="arCarSum[0].title+'：'+arCarSum[0].value"/>
<title-content-mark style="color: #5eeef4;font-size: 14px;" :title="arTrainSum[0].title+'：'+arTrainSum[0].value" isCenter is-bold/>
<!--
<title-content-mark style="display: inline-block;padding-left: 6rem;font-size: 14px" :title-style="{color:'red',paddingLeft: '2rem'}" :title="arCarSum[1].title+'：'+arCarSum[1].value"/>
-->
</simple-card>
</div>
<div style="height: 70%;width: 100%;padding-right: 2rem">
<div >
<title-content-mark style="padding-bottom: 0px" :title="barTitle+'：'+carPlan+'%'" :title-style="{fontSize:'22px'}" is-bold is-center/>
<title-content-mark style="padding-bottom: 0px" :title="barTitle+'：'+trainPlanRate+'%'" :title-style="{fontSize:'22px'}" is-bold is-center/>
</div>
<div style="height: 100%;width: 100%" ref="train"></div>
</div>
......@@ -151,12 +159,18 @@
<script>
import DisplayBoard from "../components/container/display-board.vue";
import WinnersList from "../components/card/winners-list.vue";
import ScrollList from "../components/card/scroll-list.vue";
import * as echarts from "echarts";
import SimpleCard from "../components/card/simple-card.vue";
import TitleContentMark from "../components/layout/title-content-mark.vue";
import Showcase from "../components/container/showcase.vue";
import {getSafetyQuality,getTruckShipConditionData,getCarShipTrainComplete} from "../../api/apiList";
import {
getSafetyQuality,
getTruckShipConditionData,
getCarShipTrainComplete,
getOrderBusinessConditionData, getOrderLoseAddCustomer
} from "../../api/apiList";
import {conver_amont, conver_num_retain} from "../../utils/numUtil";
import mapPointMark from "../components/map/map-point-mark.vue";
......@@ -168,6 +182,7 @@ export default {
TitleContentMark,
Showcase,
WinnersList,
ScrollList,
mapPointMark
},
data() {
......@@ -175,19 +190,21 @@ export default {
arSafeList:[],
arQualityList:[],
arCarSum:[
{title:'当班车数',value:'1350'},
{title:'当班车数',value:0},
{title:'异常车数',value:'0'}
],
arShipSum:[
{title:'当班船数',value:'1350'},
{title:'当班船数',value:0},
{title:'异常船数',value:'0'}
],
arTrainSum:[
{title:'当班数',value:'1350'},
{title:'当班数',value:0},
{title:'异常数',value:'0'}
],
barTitle:'今日计划完成',
carPlan:'89',
carPlanRate:0,
shipPlanRate:0,
trainPlanRate:0,
lskh: {
weight: "2,000",
amount: "20,000",
......@@ -227,6 +244,8 @@ export default {
},
yAxis: {
type: "value",
min: 0,
minInterval: 1,
splitLine: {
lineStyle: {
color: "#1E2C58"
......@@ -257,6 +276,8 @@ export default {
grid: {
containLabel: true,
top: "10%",
left: "1%",
right: "1%",
bottom: '0'
},
yAxis: {
......@@ -288,6 +309,8 @@ export default {
grid: {
containLabel: true,
top: "10%",
left: "1%",
right: "1%",
bottom: '0'
},
yAxis: {
......@@ -319,6 +342,8 @@ export default {
grid: {
containLabel: true,
top: "10%",
left: "1%",
right: "1%",
bottom: '0'
},
yAxis: {
......@@ -353,6 +378,8 @@ export default {
this.renderLeftView();
this.countCarAndShipAndTrain();
this.getTruckShipCondition();
this.getLoseAndAdd();
this.getOrderBusinessCondition();
this.renderRightView();
},
......@@ -362,23 +389,42 @@ export default {
// 安全
let safetyArray=res.data.safetyArray;
let safetyArr=[];
if(safetyArray.length>0){
let size=safetyArray.length;
if(size>0){
safetyArray.forEach(function (row) {
var item={};
item.title=row;
item.title=row.data;
if(row.type==='10'){
item.titleStyle=[{color:'yellow'}];
}else if(row.type==='20'){
item.titleStyle=[{color:'red'}];
}else{
item.titleStyle=[{color:'white'}];
}
safetyArr.push(item);
});
if(size<5){
for(let i=0;i<5-size;i++){
safetyArr.push({blankColumn:true});
}
}
this.arSafeList=safetyArr;
}
// 质量
let qualityArray=res.data.qualityArray;
let qualityArr=[];
if(qualityArray.length>0){
let qualitySize=qualityArray.length;
if(qualitySize>0){
qualityArray.forEach(function (row) {
var item={};
item.title=row;
qualityArr.push(item);
});
if(qualitySize<5){
for(let i=0;i<5-qualitySize;i++){
qualityArr.push({blankColumn:true});
}
}
this.arQualityList=qualityArr;
}
// 统计人员信息
......@@ -400,65 +446,122 @@ export default {
sery.data.push(0);
}
var maxData = Math.max.apply(null, sery.data);
var maxY=maxData*1.2;
var maxY=Math.floor(maxData*1.2);
this.people_options.yAxis.max=maxY;
this.people_options.series=[];
this.people_options.series.push(sery);
this.people.setOption(this.people_options);
});
},
// 中间底部
getOrderBusinessCondition() {
getOrderBusinessConditionData(this.today).then(res => {
let data = res.data
this.drddl.amount = conver_amont(data.cur_sell_settle_amount);
this.drddl.weight = conver_amont(data.cur_unit_weight);
this.drydl.count = data.drydl_count;
this.drydl.weight = conver_amont(data.drydl_weight);
this.drwcl.amount = conver_amont(data.cur_finish_sell_settle_amount);
this.drwcl.weight = conver_amont(data.cur_finish_unit_weight);
this.yl.amount = conver_amont(data.cur_unfinish_sell_settle_amount);
this.yl.weight = conver_amont(data.cur_unfinish_unit_weight);
})
},
getLoseAndAdd() {
getOrderLoseAddCustomer(this.today).then(res => {
let data = res.data
this.lskh.amount = conver_amont(data.lost_sell_settle_amount_sum);
this.lskh.weight = conver_amont(data.lost_weight_sum);
this.xzkh.amount = conver_amont(data.add_sell_settle_amount_sum);
this.xzkh.weight = conver_amont(data.add_weight_sum);
})
},
// youb右边
renderRightView(){
getCarShipTrainComplete().then(res => {
var resData=res.data;
var plan=resData.plan;
var complete=resData.complete;
var remaining=resData.remaining;
var countToday=resData.countToday;
var car=[];
car.push(plan.car);
car.push(complete.car);
car.push(remaining.car);
let carPlan=this.formatNumber(plan.car);
car.push(carPlan);
let carCompletion=this.formatNumber(complete.car);
car.push(carCompletion);
car.push(this.formatNumber(remaining.car));
this.carPlanRate=carPlan==0?100:Math.floor((100*carCompletion)/carPlan);
var ship=[];
ship.push(plan.ship);
ship.push(complete.ship);
ship.push(remaining.ship);
let shipPlan=this.formatNumber(plan.ship);
ship.push(shipPlan);
let shipCompletion=this.formatNumber(complete.ship);
ship.push(shipCompletion);
ship.push(this.formatNumber(remaining.ship));
this.shipPlanRate=shipPlan==0?100:Math.floor((shipCompletion*100)/shipPlan);
var train=[];
train.push(plan.train);
train.push(complete.train);
train.push(remaining.train);
let trainPlan=this.formatNumber(plan.train);
train.push(trainPlan);
let trainCompletion=this.formatNumber(complete.train);
train.push(trainCompletion);
train.push(this.formatNumber(remaining.train));
this.trainPlanRate=trainPlan==0?100:Math.floor((100*trainCompletion)/trainPlan);
// 渲染
var seryCar=this.getcarShipTrainCss();
seryCar.data=car;
seryCar.data.push(car[0]);
seryCar.data.push(car[1]);
seryCar.data.push(car[2]);
this.car_options.series=[];
this.car_options.series.push(seryCar);
// 最大高度
var maxDataCar = Math.max.apply(null, seryCar.data);
this.car_options.yAxis.max=maxDataCar*1.1;
this.car.setOption(this.car_options);
var seryShip=this.getcarShipTrainCss();
seryShip.data=ship;
this.ship_options.series=[];
this.ship_options.series.push(seryShip);
// 最大高度
var maxDataShip = Math.max.apply(null, seryShip.data);
this.ship_options.yAxis.max=maxDataShip*1.1;
this.ship.setOption(this.ship_options);
var seryTrain=this.getcarShipTrainCss();
seryTrain.data=train;
this.train_options.series=[];
this.train_options.series.push(seryTrain);
this.car.setOption(this.train_options);
// 最大高度
var maxDataTrain = Math.max.apply(null, seryTrain.data);
this.train_options.yAxis.max=maxDataTrain*1.1;
this.train.setOption(this.train_options);
// 当班车数
this.arCarSum[0].value=countToday.car;
this.arShipSum[0].value=countToday.ship;
this.arTrainSum[0].value=countToday.train;
})
},
formatNumber(number){
// 格式化保留两位小时，返回数字
return Number(conver_num_retain(number).replaceAll(',',''));
},
getcarShipTrainCss(){
return {
type: 'bar',
barMinHeight: 1,
xAxisIndex: null,
smooth: true,
itemStyle:{
color: new echarts.graphic.LinearGradient(
color: function (params) {
return params.value==0?'rgba(0, 0, 0, 0)':new echarts.graphic.LinearGradient(
0, 0, 0, 1, // 渐变方向从上到下
[
{ offset: 0, color: '#83bff6' }, // 柱图顶部颜色
{ offset: 0.5, color: '#188df0' }, // 柱图中间颜色
{ offset: 1, color: '#188df0' } // 柱图底部颜色
]
),
);
},
borderRadius:[3,3,3,3] ,
},
label:{
......@@ -467,8 +570,8 @@ export default {
formatter: '{c}吨',
color:'#FFFFFF',
},
barWidth: '30%',
barGap: '10%',
barWidth: '40%',
barGap: '50%',
emphasis: {
focus: 'series'
},
......@@ -496,8 +599,8 @@ export default {
position:'top',
color:'#FFFFFF',
},
barWidth: '30%',
barGap: '20%',
barWidth: '40%',
barGap: '50%',
emphasis: {
focus: 'series'
},
......@@ -506,9 +609,7 @@ export default {
},
// 统计车、船、火车单量完成情况
countCarAndShipAndTrain(){
this.car.setOption(this.car_options);
this.ship.setOption(this.ship_options);
this.train.setOption(this.train_options);
},
getTruckShipCondition() {
getTruckShipConditionData().then(res => {
......
src/module/index/index.js
View file @ 16baa979
......@@ -4,6 +4,8 @@ import Vue from 'vue'
import App from './index.vue'
import router from './router/index_router'
import '../databoard/assets/index.css'
import vueSeamlessScroll from "vue-seamless-scroll"
Vue.use(vueSeamlessScroll)
Vue.config.productionTip = false
......
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