|
@@ -10,7 +10,7 @@
|
|
|
<img src="../../../public/img/8b2c7255e9b19c71d68b33a08f20f74.png" alt="">
|
|
|
|
|
|
</div>
|
|
|
- <div class="right">
|
|
|
+ <div class="right">
|
|
|
<div class="top">
|
|
|
{{ nowDate }}
|
|
|
</div>
|
|
@@ -54,15 +54,15 @@
|
|
|
<div class="left-card">
|
|
|
<div class="item">
|
|
|
<p>在途车辆</p>
|
|
|
- <p><span class="number">76</span><span class="number-text">台</span></p>
|
|
|
+ <p><span class="number">{{carCount1}}</span><span class="number-text">台</span></p>
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
<p>装货车辆</p>
|
|
|
- <p><span class="number" style="color:#ffa523;">86</span><span class="number-text">台</span></p>
|
|
|
+ <p><span class="number" style="color:#ffa523">{{carCount2}}</span><span class="number-text">台</span></p>
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
<p>卸货车辆</p>
|
|
|
- <p><span class="number" style="color: #2483ff;">16</span><span class="number-text">台</span></p>
|
|
|
+ <p><span class="number" style="color:#2483ff">{{carCount3}}</span><span class="number-text">台</span></p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
@@ -83,14 +83,14 @@
|
|
|
<div class="left">
|
|
|
<img src="../../../public/img/1637204557176-s4AMbBA8.png" alt="">
|
|
|
<span>总库存量</span>
|
|
|
- <span class="content3-number blue">27631</span>
|
|
|
+ <span class="content3-number blue">{{inventoryCost}}</span>
|
|
|
<span style="margin-top: 10px;">吨</span>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
<img src="../../../public/img/1637204768818-70JRjz0H.png" alt="">
|
|
|
<span>库存价值</span>
|
|
|
- <span class="content3-number yellow">37745671</span>
|
|
|
- <span style="margin-top: 10px;">吨</span>
|
|
|
+ <span class="content3-number yellow">{{inventoryValue}}</span>
|
|
|
+ <span style="margin-top: 10px;">元</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-row>
|
|
@@ -160,7 +160,7 @@
|
|
|
noticeNumber,
|
|
|
queryCircularManagementReceiveList,
|
|
|
getStaffHomeShowList,
|
|
|
- getChartsData
|
|
|
+ gChartsData
|
|
|
} from '@/model/home/index'
|
|
|
import {
|
|
|
getUserVesselList,
|
|
@@ -211,10 +211,16 @@
|
|
|
|
|
|
data() {
|
|
|
return {
|
|
|
+ totalReserves:'',
|
|
|
+ inventoryCost:'',
|
|
|
+ inventoryValue:'',
|
|
|
+ carCount1:'',
|
|
|
+ carCount2:'',
|
|
|
+ carCount3:'',
|
|
|
chartsData: [],
|
|
|
nowDate: null, //存放年月日变量
|
|
|
nowTime: null, //存放时分秒变量
|
|
|
- timer: "", //定义一个定时器的变量
|
|
|
+ timer: '', //定义一个定时器的变量
|
|
|
currentTime: new Date(), // 获取当前时间
|
|
|
timer: '',
|
|
|
dialogVisible: false,
|
|
@@ -322,9 +328,9 @@
|
|
|
//获取快捷路口列表
|
|
|
this.getRouteList()
|
|
|
// this.checkUserInfoDialog()
|
|
|
- {
|
|
|
+ // {
|
|
|
this.timer = setInterval(this.getTime, 1000);
|
|
|
- }
|
|
|
+ // }
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
clearInterval(this.timer);
|
|
@@ -351,9 +357,15 @@
|
|
|
// }, 2000);
|
|
|
//获取新闻列表
|
|
|
// this.getNewList()
|
|
|
- getChartsData().toPromise().then(res => {
|
|
|
+ gChartsData().toPromise().then(res => {
|
|
|
console.log(res)
|
|
|
this.chartsData = res
|
|
|
+ this.carCount1 = res[6].biViewInfoList[0].count
|
|
|
+ this.carCount2 = res[6].biViewInfoList[1].count
|
|
|
+ this.carCount3 = res[6].biViewInfoList[2].count
|
|
|
+ this.inventoryCost = res[7].biViewInfoList[0].count
|
|
|
+ this.inventoryValue = res[7].biViewInfoList[1].count
|
|
|
+ this.totalReserves = res[8].biViewInfoList
|
|
|
this.initCharts()
|
|
|
})
|
|
|
// if (this.vesselBankFlag !== 'V') {
|
|
@@ -413,22 +425,22 @@
|
|
|
this.second = check(second);
|
|
|
|
|
|
function check(i) {
|
|
|
- const num = (i < 10) ? ("0" + i) : i;
|
|
|
+ const num = (i < 10) ? ('0' + i) : i;
|
|
|
return num;
|
|
|
}
|
|
|
- this.nowDate = year + "-" + this.month + "-" + this.day;
|
|
|
- this.nowTime = this.hour + ":" + this.minute + ":" + this.second;
|
|
|
+ this.nowDate = year + '-' + this.month + '-' + this.day;
|
|
|
+ this.nowTime = this.hour + ':' + this.minute + ':' + this.second;
|
|
|
},
|
|
|
initCharts() {
|
|
|
let app = this;
|
|
|
- var roseCharts = document.getElementsByClassName("roseChart");
|
|
|
+ var roseCharts = document.getElementsByClassName('roseChart');
|
|
|
for (let i = 0; i < roseCharts.length; i++) {
|
|
|
let myChart = app.$echarts.init(roseCharts[i]);
|
|
|
let color = []
|
|
|
let data = []
|
|
|
- let text = ""
|
|
|
- let formatter = ""
|
|
|
- let graphicText = '\n\n总计\n\n' + this.chartsData[i].total
|
|
|
+ let text = ''
|
|
|
+ let formatter = ''
|
|
|
+ let graphicText = ''
|
|
|
switch (i) {
|
|
|
case 0:
|
|
|
// 圆环图各环节的颜色
|
|
@@ -443,6 +455,8 @@
|
|
|
}]
|
|
|
text = '合同总量'
|
|
|
formatter = '{b}{c}吨 </br> 占比{d}%'
|
|
|
+ graphicText = ' \n\n总量合计\n\n' +Number(this.chartsData[i].total).toFixed(2)
|
|
|
+
|
|
|
break;
|
|
|
case 1:
|
|
|
// 圆环图各环节的颜色
|
|
@@ -457,6 +471,7 @@
|
|
|
}]
|
|
|
text = '合同总额'
|
|
|
formatter = '{b}{c}元 </br> 占比{d}%'
|
|
|
+ graphicText = ' \n\n开票合计\n\n' + Number(this.chartsData[i].total).toFixed(2)
|
|
|
break;
|
|
|
case 2:
|
|
|
// 圆环图各环节的颜色
|
|
@@ -471,6 +486,7 @@
|
|
|
}]
|
|
|
text = '合同总额'
|
|
|
formatter = '{b}{c}元 </br> 占比{d}%'
|
|
|
+ graphicText = ' \n\n付款合计\n\n' + Number(this.chartsData[i].total).toFixed(2)
|
|
|
break;
|
|
|
case 3:
|
|
|
// 圆环图各环节的颜色
|
|
@@ -485,7 +501,7 @@
|
|
|
}]
|
|
|
text = '合同总量'
|
|
|
formatter = '{b}{c}吨 </br> 占比{d}%'
|
|
|
- break;
|
|
|
+ graphicText = ' \n\n总量合计\n\n' + Number(this.chartsData[i].total).toFixed(2)
|
|
|
case 4:
|
|
|
// 圆环图各环节的颜色
|
|
|
color = ['#247ef4', '#3a3b40'];
|
|
@@ -499,6 +515,7 @@
|
|
|
}]
|
|
|
text = '合同总额'
|
|
|
formatter = '{b}{c}元 </br> 占比{d}%'
|
|
|
+ graphicText = ' \n\n开票合计\n\n' + Number(this.chartsData[i].total).toFixed(2)
|
|
|
break;
|
|
|
case 5:
|
|
|
// 圆环图各环节的颜色
|
|
@@ -513,6 +530,7 @@
|
|
|
}]
|
|
|
text = '合同总额'
|
|
|
formatter = '{b}{c}元 </br> 占比{d}%'
|
|
|
+ graphicText = ' \n\n付款合计\n\n' + Number(this.chartsData[i].total).toFixed(2)
|
|
|
break;
|
|
|
}
|
|
|
myChart.setOption({
|
|
@@ -530,7 +548,7 @@
|
|
|
selectedMode: true, // 图例选择的模式,控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择,可以设成 false 关闭。
|
|
|
top: '10%',
|
|
|
left: 'center',
|
|
|
- con: "circle",
|
|
|
+ con: 'circle',
|
|
|
itemWidth: 10, // 设置宽度
|
|
|
itemHeight: 10, // 设置高度
|
|
|
itemGap: 40, // 设置间距
|
|
@@ -591,55 +609,25 @@
|
|
|
data: data // 系列中的数据内容数组。
|
|
|
}]
|
|
|
})
|
|
|
- myChart.off("click");
|
|
|
- myChart.on("click", function(params) {
|
|
|
+ myChart.off('click');
|
|
|
+ myChart.on('click', function(params) {
|
|
|
// var a = params.dataIndex
|
|
|
- console.log(params, "我被点击了");
|
|
|
+ console.log(params, '我被点击了');
|
|
|
app.dialogVisible = true
|
|
|
})
|
|
|
}
|
|
|
-
|
|
|
+ debugger
|
|
|
+ console.log(this.totalReserves)
|
|
|
+ let _x = []
|
|
|
+ let _y = []
|
|
|
+ for(let i = 0;i<this.totalReserves.length;i++){
|
|
|
+ _x.push(this.totalReserves[i].name)
|
|
|
+ _y.push(this.totalReserves[i].count)
|
|
|
+ }
|
|
|
+
|
|
|
// 柱状图
|
|
|
let myChart7 = app.$echarts.init(this.$refs.myEchart7);
|
|
|
var zoption = {
|
|
|
- // ---- 标题 -----
|
|
|
- // title: {
|
|
|
- // text: '',//主标题
|
|
|
- // textStyle: {
|
|
|
- // color: 'red'
|
|
|
- // },
|
|
|
- // subtext: '',//副标题
|
|
|
- // subtextStyle: {
|
|
|
- // color: 'blue'
|
|
|
- // },
|
|
|
- // padding: [0, 0, 10, 100] // 位置
|
|
|
- // },
|
|
|
- // ---- legend ----
|
|
|
- // legend: {
|
|
|
- // type: 'plain', // 图列类型,默认为 'plain'
|
|
|
- // top: '1%', // 图列相对容器的位置 top\bottom\left\right
|
|
|
- // selected: {
|
|
|
- // // '销量': true // 图列选择,图形加载出来会显示选择的图列,默认为true
|
|
|
- // },
|
|
|
- // textStyle: { // 图列内容样式
|
|
|
- // color: '#fff', // 字体颜色
|
|
|
- // backgroundColor: 'black' // 字体背景色
|
|
|
- // },
|
|
|
- // tooltip: { // 图列提示框,默认不显示
|
|
|
- // show: true,
|
|
|
- // color: '#666'
|
|
|
- // },
|
|
|
- // data: [ // 图列内容
|
|
|
- // {
|
|
|
- // name: '', //上方标题内容
|
|
|
- // icon: 'circle',
|
|
|
- // textStyle: {
|
|
|
- // color: '#666', // 单独设置某一个图列的颜色
|
|
|
- // backgroundColor: '#fff' // 单独设置某一个图列的字体背景色
|
|
|
- // }
|
|
|
- // }
|
|
|
- // ]
|
|
|
- // },
|
|
|
grid: {
|
|
|
left: '0',
|
|
|
right: '0',
|
|
@@ -660,55 +648,10 @@
|
|
|
color: '#fff'
|
|
|
}
|
|
|
},
|
|
|
- // ---- gird区域 ---
|
|
|
- // gird: {
|
|
|
- // show: false, // 是否显示直角坐标系网格
|
|
|
- // top: 10, // 相对位置 top\bottom\left\right
|
|
|
- // containLabel: false, // gird 区域是否包含坐标轴的刻度标签
|
|
|
- // tooltip: {
|
|
|
- // show: true,
|
|
|
- // trigger: 'item', // 触发类型
|
|
|
- // textStyle: {
|
|
|
- // color: '#666'
|
|
|
- // }
|
|
|
- // }
|
|
|
- // },
|
|
|
+
|
|
|
// ------ X轴 ------
|
|
|
xAxis: {
|
|
|
- // show: true, // 是否显示
|
|
|
- // position: 'bottom', // x轴的位置
|
|
|
- // offset: 0, // x轴相对于默认位置的偏移
|
|
|
- // type: 'category', // 轴类型, 默认为 'category'
|
|
|
- // name: '', // 轴名称
|
|
|
- // nameLocation: 'end', // 轴名称相对位置
|
|
|
- // nameTextStyle: { // 坐标轴名称样式
|
|
|
- // color: '#666',
|
|
|
- // padding: [5, 0, 0, -5]
|
|
|
- // },
|
|
|
- // nameGap: 30, // 坐标轴名称与轴线之间的距离
|
|
|
- // nameRotate: 0, // 坐标轴名字旋转
|
|
|
- // axisLine: { // 坐标轴 轴线
|
|
|
- // show: true, // 是否显示
|
|
|
- // // symbol: ['none', 'arrow'], // 是否显示轴线箭头
|
|
|
- // // symbolSize: [8, 8], // 箭头大小
|
|
|
- // // symbolOffset: [0, 7], // 箭头位置
|
|
|
- // // ------ 线 ---------
|
|
|
- // lineStyle: {
|
|
|
- // color: '#666',
|
|
|
- // width: 1,
|
|
|
- // type: 'solid'
|
|
|
- // }
|
|
|
- // },
|
|
|
- // axisTick: { // 坐标轴 刻度
|
|
|
- // show: true, // 是否显示
|
|
|
- // inside: true, // 是否朝内
|
|
|
- // length: 3, // 长度
|
|
|
- // lineStyle: { // 默认取轴线的样式
|
|
|
- // color: '#666',
|
|
|
- // width: 1,
|
|
|
- // type: 'solid'
|
|
|
- // }
|
|
|
- // },
|
|
|
+
|
|
|
axisLabel: { // 坐标轴标签
|
|
|
show: true, // 是否显示
|
|
|
inside: false, // 是否朝内
|
|
@@ -718,58 +661,20 @@
|
|
|
interval: 0,
|
|
|
rotate: 40
|
|
|
},
|
|
|
- // splitLine: { // gird区域中的分割线
|
|
|
- // show: false, // 是否显示
|
|
|
- // lineStyle: {
|
|
|
- // // color: 'red',
|
|
|
- // // width: 1,
|
|
|
- // // type: 'solid'
|
|
|
- // }
|
|
|
- // },
|
|
|
+
|
|
|
splitArea: { // 网格区域
|
|
|
show: false // 是否显示,默认为false
|
|
|
},
|
|
|
- data: ['玉米', '玉米(潮粮)', '玉米(酒精)', '玉米(机收)', '混合麦', '白小麦', '大豆', '水稻', '高粱', '玉米淀粉', '豆粕']
|
|
|
+ data: _x
|
|
|
},
|
|
|
// ------ y轴 ----------
|
|
|
yAxis: {
|
|
|
- // show: true, // 是否显示
|
|
|
- // position: 'left', // y轴位置
|
|
|
- // offset: 0, // y轴相对于默认位置的偏移
|
|
|
- // type: 'value', // 轴类型,默认为 ‘category’
|
|
|
- // // name: '销量', // 轴名称
|
|
|
- // nameLocation: 'end', // 轴名称相对位置value
|
|
|
- // nameTextStyle: { // 坐标轴名称样式
|
|
|
- // color: '#fff',
|
|
|
- // padding: [5, 0, 0, 5] // 坐标轴名称相对位置
|
|
|
- // },
|
|
|
- // nameGap: 15, // 坐标轴名称与轴线之间的距离
|
|
|
- // nameRotate: 270, // 坐标轴名字旋转
|
|
|
-
|
|
|
+
|
|
|
axisLine: { // 坐标轴 轴线
|
|
|
show: false, // 是否显示
|
|
|
- // ----- 箭头 -----
|
|
|
- // symbol: ['none', 'arrow'], // 是否显示轴线箭头
|
|
|
- // symbolSize: [8, 8], // 箭头大小
|
|
|
- // symbolOffset: [0, 7], // 箭头位置
|
|
|
-
|
|
|
- // ----- 线 -------
|
|
|
- // lineStyle: {
|
|
|
- // color: '#666',
|
|
|
- // width: 1,
|
|
|
- // type: 'solid'
|
|
|
- // }
|
|
|
+
|
|
|
},
|
|
|
- // axisTick: { // 坐标轴的刻度
|
|
|
- // show: true, // 是否显示
|
|
|
- // inside: true, // 是否朝内
|
|
|
- // length: 3, // 长度
|
|
|
- // lineStyle: {
|
|
|
- // color: '#666', // 默认取轴线的颜色
|
|
|
- // width: 1,
|
|
|
- // type: 'solid'
|
|
|
- // }
|
|
|
- // },
|
|
|
+
|
|
|
axisLabel: { // 坐标轴的标签
|
|
|
show: true, // 是否显示
|
|
|
inside: false, // 是否朝内
|
|
@@ -784,10 +689,7 @@
|
|
|
width: 1,
|
|
|
type: 'dashed'
|
|
|
}
|
|
|
- },
|
|
|
- // splitArea: { // 网格区域
|
|
|
- // show: false // 是否显示,默认为false
|
|
|
- // }
|
|
|
+ }
|
|
|
},
|
|
|
// ------- 内容数据 -------
|
|
|
series: [{
|
|
@@ -811,14 +713,12 @@
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: 'top',
|
|
|
- color: "#b0b1b3"
|
|
|
+ color: '#b0b1b3'
|
|
|
},
|
|
|
- data: [3000, 4000, 4200, 4500, 6000, 5600, 4500, 5020, 4500, 5400, 4300]
|
|
|
+ data: _y
|
|
|
}]
|
|
|
};
|
|
|
-
|
|
|
myChart7.setOption(zoption)
|
|
|
-
|
|
|
},
|
|
|
handleClose(done) {
|
|
|
this.$confirm('确认关闭?')
|
|
@@ -1214,7 +1114,7 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- setTimeout(1000)
|
|
|
+ // setTimeout(1000)
|
|
|
if (parseInt(result)) {
|
|
|
console.log('result:', result);
|
|
|
this.text = parseInt(result)
|
|
@@ -1978,4 +1878,5 @@
|
|
|
right: 10px;
|
|
|
bottom: 10px;
|
|
|
}
|
|
|
+
|
|
|
</style>
|