|
@@ -2,7 +2,7 @@
|
|
|
<div class="dashboard_container">
|
|
|
<div class="container_top">
|
|
|
<div class="tab" v-for="(item,index) in tabs" :key='index'>
|
|
|
- <el-image :src="item.url" fit="fit"></el-image>
|
|
|
+ <img :src="item.url" fit="fit"></img>
|
|
|
<div class="text">
|
|
|
<div class="title">{{item.title}}</div>
|
|
|
<div class="num">{{item.num}}</div>
|
|
@@ -36,19 +36,74 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import { getCount } from "@/api/workOrder/orderHome";
|
|
|
export default{
|
|
|
data(){
|
|
|
return {
|
|
|
- tabs: [{title: '待派工',num: 12,url: ''},{title: '待接收',num: 22,url: ''},{title: '服务中',num: 53,url: ''},{title: '异常待处理',num: 2,url: ''},{title: '差评统计',num: 0,url: ''}]
|
|
|
+ tabs: [{title: '待派工',num: 12,url: require('@/assets/orderHome/dpg.png')},{title: '待接收',num: 22,url: require('@/assets/orderHome/djs.png')},{title: '服务中',num: 53,url: require('@/assets/orderHome/ffz.png')},{title: '异常待处理',num: 2,url: require('@/assets/orderHome/yc.png')},{title: '差评统计',num: 0,url: require('@/assets/orderHome/pj.png')}],
|
|
|
+ qtsm: [],
|
|
|
+ qtddqs: {},
|
|
|
+ wglxfb: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ getDate(){
|
|
|
+ return function(d,t){
|
|
|
+ var date = new Date();
|
|
|
+ var base = Date.parse(date); // 转换为时间戳
|
|
|
+ var year = date.getFullYear(); //获取当前年份
|
|
|
+ var mon = date.getMonth() + 1; //获取当前月份
|
|
|
+ var day = date.getDate(); //获取当前日
|
|
|
+ var oneDay = 24 * 3600 *1000
|
|
|
+
|
|
|
+ var daytimeArr = []
|
|
|
+ for (var i = 0; i < d ; i++) { //前七天的时间
|
|
|
+ var now = new Date(t=='before'?(base - oneDay*i):(base + oneDay*i));
|
|
|
+ var myear = now.getFullYear();
|
|
|
+ var month = now.getMonth() + 1;
|
|
|
+ var mday = now.getDate()
|
|
|
+ daytimeArr.push([month >=10 ?month :'0'+ month, mday>=10?mday:'0'+mday].join('-'))
|
|
|
+ }
|
|
|
+ return t=='before'?daytimeArr.reverse():daytimeArr
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filterOrderType(){
|
|
|
+ return function(obj,type){
|
|
|
+ let names = []
|
|
|
+ let series = []
|
|
|
+ for(let key in this[obj]){
|
|
|
+ names.push(key)
|
|
|
+ series.push({
|
|
|
+ name: key,
|
|
|
+ data: this[obj][key],
|
|
|
+ type: 'line',
|
|
|
+ smooth: true
|
|
|
+ })
|
|
|
+ }
|
|
|
+ return type=='name'?names:series
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
-
|
|
|
+ this.getCount()
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.drawChat1()
|
|
|
+ // this.drawChat1()
|
|
|
},
|
|
|
methods: {
|
|
|
+ getCount(){
|
|
|
+ getCount().then(res => {
|
|
|
+ this.tabs[0].num = res.data.dpg
|
|
|
+ this.tabs[1].num = res.data.djs
|
|
|
+ this.tabs[2].num = res.data.fwz
|
|
|
+ this.tabs[3].num = res.data.ycdcl
|
|
|
+ this.tabs[4].num = res.data.cp
|
|
|
+ this.qtsm = res.data.qtsm
|
|
|
+ this.qtddqs = res.data.qtddqs
|
|
|
+ this.wglxfb = res.data.wglxfb
|
|
|
+ this.drawChat1()
|
|
|
+ })
|
|
|
+ },
|
|
|
drawChat1(){
|
|
|
let chart1 = this.$echarts.init(this.$refs.chart1)
|
|
|
let chart2 = this.$echarts.init(this.$refs.chart2)
|
|
@@ -58,46 +113,42 @@
|
|
|
trigger: 'axis'
|
|
|
},
|
|
|
legend: {
|
|
|
- data: ['新增工单', '完工工单', '进行中']
|
|
|
+ data: this.filterOrderType('qtddqs','name')
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
|
+ boundaryGap: false,
|
|
|
+ data: this.getDate(7,'before')
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value'
|
|
|
},
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '新增工单',
|
|
|
- data: [820, 932, 901, 934, 1290, 1330, 2320],
|
|
|
- type: 'line',
|
|
|
- smooth: true
|
|
|
- },{
|
|
|
- name: '完工工单',
|
|
|
- data: [420, 532, 801, 234, 1790, 1030, 3320],
|
|
|
- type: 'line',
|
|
|
- smooth: true
|
|
|
- },{
|
|
|
- name: '进行中',
|
|
|
- data: [120, 532, 901, 1234, 1790, 1530, 1920],
|
|
|
- type: 'line',
|
|
|
- smooth: true
|
|
|
- }
|
|
|
- ]
|
|
|
+ min: 0,
|
|
|
+ max: (value) => { // 百位起最大值向上取整
|
|
|
+ return Math.ceil(value.max / 100) * 100;
|
|
|
+ },
|
|
|
+ series: this.filterOrderType('qtddqs','series')
|
|
|
};
|
|
|
let option2 = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
- data: ['12-17', '12-18', '12-19', '12-20', '12-21', '12-22', '12-23']
|
|
|
+ boundaryGap: false,
|
|
|
+ data: this.getDate(7,'after')
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value'
|
|
|
},
|
|
|
+ min: 0,
|
|
|
+ max: (value) => { // 百位起最大值向上取整
|
|
|
+ return Math.ceil(value.max / 100) * 100;
|
|
|
+ },
|
|
|
series: [
|
|
|
{
|
|
|
- name: '',
|
|
|
- data: [820, 932, 901, 934, 1290, 1330, 2320],
|
|
|
+ name: '工单数',
|
|
|
+ data: this.qtsm,
|
|
|
type: 'line',
|
|
|
smooth: true
|
|
|
}
|
|
@@ -108,33 +159,21 @@
|
|
|
trigger: 'axis'
|
|
|
},
|
|
|
legend: {
|
|
|
- data: ['安装', '维修', '清洗']
|
|
|
+ data: this.filterOrderType('wglxfb','name')
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
- data: ['11-24', '11-25', '11-26', '11-27', '11-28', '11-29', '11-30', '12-01', '12-02', '12-03', '12-04', '12-05', '12-06', '12-07', '12-08', '12-09', '12-10', '12-11', '12-12', '12-13', '12-14', '12-15', '12-16', '12-17', '12-18', '12-19', '12-20', '12-21', '12-22', '12-23']
|
|
|
+ boundaryGap: false,
|
|
|
+ data: this.getDate(30,'before')
|
|
|
+ },
|
|
|
+ min: 0,
|
|
|
+ max: (value) => { // 百位起最大值向上取整
|
|
|
+ return Math.ceil(value.max / 100) * 100;
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value'
|
|
|
},
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '安装',
|
|
|
- data: [820, 932, 901, 934, 1290, 1330, 2320, 320, 632, 301, 234, 1230, 1330, 1320,1220, 932, 511, 994, 1290, 1130, 1520,1220, 1232, 951, 2134, 1290, 5210, 2220,3420, 1932],
|
|
|
- type: 'line',
|
|
|
- smooth: true
|
|
|
- },{
|
|
|
- name: '维修',
|
|
|
- data: [420, 532, 801, 234, 1790, 1030, 3320, 820, 932, 901, 934, 1290, 1330, 2320,820, 932, 901, 934, 1290, 1330, 2320,820, 932, 901, 934, 1290, 1330, 2320,820, 932],
|
|
|
- type: 'line',
|
|
|
- smooth: true
|
|
|
- },{
|
|
|
- name: '清洗',
|
|
|
- data: [120, 532, 901, 1234, 1790, 1530, 1920, 1120, 532, 201, 534, 1190, 1230, 2320,2520, 222, 1111, 934, 4390, 2230, 2320, 1520, 922, 551, 224, 3520, 1230, 1620, 1820, 232],
|
|
|
- type: 'line',
|
|
|
- smooth: true
|
|
|
- }
|
|
|
- ]
|
|
|
+ series: this.filterOrderType('wglxfb','series')
|
|
|
};
|
|
|
chart1.setOption(option1)
|
|
|
chart2.setOption(option2)
|