478 lines
12 KiB
Vue
478 lines
12 KiB
Vue
|
<template>
|
||
|
|
<view class="app">
|
||
|
|
<view class="wordorder">
|
||
|
|
<view class="item" style="background-color: #4F78C7;" @tap='gowordorder(0)'>
|
||
|
|
<view class="title" v-if="workTaskNumlist">
|
||
|
|
{{workTaskNumlist.taskSum}}
|
||
|
|
</view>
|
||
|
|
<view class="text" style="bottom:30rpx">
|
||
|
|
当前工单数
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="item" style="background-color: #9A60B4;" @tap='gowordorder(3)'>
|
||
|
|
<view class="title" v-if="workTaskNumlist">
|
||
|
|
{{workTaskNumlist.lessThreeSum}}
|
||
|
|
</view>
|
||
|
|
<view class="text">
|
||
|
|
逾期工单数
|
||
|
|
</view>
|
||
|
|
<view class="text2">
|
||
|
|
(<3天) </view>
|
||
|
|
</view>
|
||
|
|
<view class="item" style="background-color: #E29665;" @tap='gowordorder(1)'>
|
||
|
|
<view class="title" v-if="workTaskNumlist">
|
||
|
|
{{workTaskNumlist.threeToFiveSum}}
|
||
|
|
</view>
|
||
|
|
<view class="text">
|
||
|
|
逾期工单数
|
||
|
|
</view>
|
||
|
|
<view class="text2">
|
||
|
|
(3-5天)
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="item" style="background-color: #90CC74;" @tap='gowordorder(2)'>
|
||
|
|
<view class="title" v-if="workTaskNumlist">
|
||
|
|
{{workTaskNumlist.aboveFiveSum}}
|
||
|
|
</view>
|
||
|
|
<view class="text">
|
||
|
|
逾期工单数
|
||
|
|
</view>
|
||
|
|
<view class="text2">
|
||
|
|
(>5天)
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="charts-box" v-if="timeordershow">
|
||
|
|
<view class="title" style="margin-top: 0;">
|
||
|
|
按区县统计当前工单数
|
||
|
|
</view>
|
||
|
|
<qiun-data-charts type="column" :opts="opts3" :chartData="chartData3" :ontouch="true" :onzoom="true" />
|
||
|
|
</view>
|
||
|
|
<view class="charts-box" v-if="streetrshow">
|
||
|
|
<view class="title" style="margin-top: 40rpx;">
|
||
|
|
按街道统计当前工单数
|
||
|
|
</view>
|
||
|
|
<qiun-data-charts type="column" :opts="opts4" :chartData="chartData4" :ontouch="true" :onzoom="true" />
|
||
|
|
</view>
|
||
|
|
<view class="charts-box">
|
||
|
|
<view class="title" style="margin-top: 140rpx;">
|
||
|
|
工单日统计
|
||
|
|
</view>
|
||
|
|
<qiun-data-charts type="column" :opts="opts" :chartData="chartData" :ontouch="true" :onzoom="true"/>
|
||
|
|
</view>
|
||
|
|
<view class="charts-box">
|
||
|
|
<view class="title" style='margin-top: 100rpx;'>
|
||
|
|
工单分类统计
|
||
|
|
</view>
|
||
|
|
<qiun-data-charts type="column" :opts="opts2" :chartData="chartData2" :ontouch="true" :onzoom="true" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {
|
||
|
|
workTaskNum,
|
||
|
|
workTaskNumByType,
|
||
|
|
workTaskNumByDate,
|
||
|
|
getWorkTaskNumByquXian,
|
||
|
|
getWorkTaskNumByJieDao
|
||
|
|
} from '@/api/homepage/index.js'
|
||
|
|
export default {
|
||
|
|
components: {},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
workTaskNumlist: null,
|
||
|
|
timeordershow: false,
|
||
|
|
streetrshow: false,
|
||
|
|
|
||
|
|
workTaskNumByTypelist: {
|
||
|
|
categories: [],
|
||
|
|
series: [{
|
||
|
|
name: "数量",
|
||
|
|
data: []
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
workTaskNumByDatelist: {
|
||
|
|
categories: [],
|
||
|
|
series: [{
|
||
|
|
name: "数量",
|
||
|
|
data: []
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
getWorkTaskNumByquXianlist: {
|
||
|
|
categories: [],
|
||
|
|
series: [{
|
||
|
|
name: "数量",
|
||
|
|
data: []
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
getWorkTaskNumByjiedaolist: {
|
||
|
|
categories: [],
|
||
|
|
series: [{
|
||
|
|
name: "数量",
|
||
|
|
data: []
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
chartData: null,
|
||
|
|
//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
|
||
|
|
opts: {
|
||
|
|
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
|
||
|
|
"#ea7ccc"
|
||
|
|
],
|
||
|
|
padding: [15, 15, 30, 0],
|
||
|
|
touchMoveLimit: 24,
|
||
|
|
enableScroll: true,
|
||
|
|
legend: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
disableGrid: true,
|
||
|
|
scrollShow: true,
|
||
|
|
itemCount: 6,
|
||
|
|
rotateLabel: true,
|
||
|
|
rotateAngle: 45
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
data: [{
|
||
|
|
min: 0
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
extra: {
|
||
|
|
column: {
|
||
|
|
type: "group",
|
||
|
|
width: 20,
|
||
|
|
activeBgColor: "#000000",
|
||
|
|
activeBgOpacity: 0.08
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
chartData2: null,
|
||
|
|
//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
|
||
|
|
opts2: {
|
||
|
|
color: ["#FC8452", "#ea7ccc", "#9A60B4", "#3CA272", "#73C0DE", "#EE6666", "#FAC858", "#91CB74",
|
||
|
|
"#1890FF",
|
||
|
|
],
|
||
|
|
padding: [15, 15, 0, 10],
|
||
|
|
touchMoveLimit: 24,
|
||
|
|
enableScroll: true,
|
||
|
|
legend: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
disableGrid: true,
|
||
|
|
scrollShow: true,
|
||
|
|
itemCount: 6,
|
||
|
|
rotateLabel: true,
|
||
|
|
rotateAngle: 45
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
data: [{
|
||
|
|
min: 0
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
extra: {
|
||
|
|
column: {
|
||
|
|
type: "group",
|
||
|
|
width: 20,
|
||
|
|
activeBgColor: "#000000",
|
||
|
|
activeBgOpacity: 0.08
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
chartData3: null,
|
||
|
|
//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
|
||
|
|
opts3: {
|
||
|
|
color: ["#FAC858", "#3CA272", "#FC8452", "#ea7ccc", "#9A60B4", "#73C0DE", "#EE6666", "#91CB74",
|
||
|
|
"#1890FF",
|
||
|
|
],
|
||
|
|
padding: [15, 15, 0, 10],
|
||
|
|
touchMoveLimit: 24,
|
||
|
|
enableScroll: true,
|
||
|
|
legend: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
disableGrid: true,
|
||
|
|
scrollShow: true,
|
||
|
|
itemCount: 10,
|
||
|
|
rotateLabel: true,
|
||
|
|
rotateAngle: 45
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
data: [{
|
||
|
|
min: 0
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
extra: {
|
||
|
|
column: {
|
||
|
|
type: "group",
|
||
|
|
width: 20,
|
||
|
|
activeBgColor: "#000000",
|
||
|
|
activeBgOpacity: 0.08
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
chartData4: null,
|
||
|
|
//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
|
||
|
|
opts4: {
|
||
|
|
color: ["#FAC858", "#3CA272", "#FC8452", "#ea7ccc", "#9A60B4", "#73C0DE", "#EE6666", "#91CB74",
|
||
|
|
"#1890FF",
|
||
|
|
],
|
||
|
|
padding: [15, 15, 0, 10],
|
||
|
|
touchMoveLimit: 24,
|
||
|
|
enableScroll: true,
|
||
|
|
legend: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
disableGrid: true,
|
||
|
|
scrollShow: true,
|
||
|
|
itemCount: 10,
|
||
|
|
rotateLabel: true,
|
||
|
|
rotateAngle: 45
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
data: [{
|
||
|
|
min: 0
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
extra: {
|
||
|
|
column: {
|
||
|
|
type: "group",
|
||
|
|
width: 20,
|
||
|
|
activeBgColor: "#000000",
|
||
|
|
activeBgOpacity: 0.08
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onLoad() {},
|
||
|
|
onShow() {
|
||
|
|
try {
|
||
|
|
const value = uni.getStorageSync('rose');
|
||
|
|
if (value == 'admin' || value == 'dzswszfzd') {
|
||
|
|
this.timeorder();
|
||
|
|
} else {}
|
||
|
|
if (value == 'qxzh') {
|
||
|
|
|
||
|
|
this.street();
|
||
|
|
} else {}
|
||
|
|
} catch (e) {}
|
||
|
|
this.info();
|
||
|
|
this.datainfo();
|
||
|
|
this.typeinfo();
|
||
|
|
},
|
||
|
|
onReady() {},
|
||
|
|
onPullDownRefresh() { //下拉刷新
|
||
|
|
try {
|
||
|
|
const value = uni.getStorageSync('rose');
|
||
|
|
if (value == 'admin' || value == 'dzswszfzd') {
|
||
|
|
this.timeorder();
|
||
|
|
// this.timeorder2();
|
||
|
|
} else {}
|
||
|
|
if (value == 'qxzh') {
|
||
|
|
this.street();
|
||
|
|
} else {}
|
||
|
|
} catch (e) {}
|
||
|
|
this.info();
|
||
|
|
this.datainfo();
|
||
|
|
this.typeinfo();
|
||
|
|
setTimeout(function() {
|
||
|
|
uni.stopPullDownRefresh();
|
||
|
|
}, 1000);
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
timeorder() {
|
||
|
|
this.getWorkTaskNumByquXianlist = {
|
||
|
|
categories: [],
|
||
|
|
series: [{
|
||
|
|
name: "数量",
|
||
|
|
data: []
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
this.timeordershow = true
|
||
|
|
getWorkTaskNumByquXian('').then(res => {
|
||
|
|
setTimeout(() => {
|
||
|
|
if(res.status=='200'){
|
||
|
|
res.data.forEach((e, index) => {
|
||
|
|
var obj = {
|
||
|
|
value: e.num,
|
||
|
|
color: this.opts3.color[(index % this.opts3.color.length)]
|
||
|
|
}
|
||
|
|
this.getWorkTaskNumByquXianlist.categories.push(e
|
||
|
|
.docTypeId)
|
||
|
|
this.getWorkTaskNumByquXianlist.series[0].data.push(obj)
|
||
|
|
})
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
this.chartData3 = JSON.parse(JSON.stringify(this.getWorkTaskNumByquXianlist));
|
||
|
|
}, 0);
|
||
|
|
})
|
||
|
|
},
|
||
|
|
street() {
|
||
|
|
this.getWorkTaskNumByjiedaolist = {
|
||
|
|
categories: [],
|
||
|
|
series: [{
|
||
|
|
name: "数量",
|
||
|
|
data: []
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
this.streetrshow = true
|
||
|
|
getWorkTaskNumByJieDao().then(res => {
|
||
|
|
setTimeout(() => {
|
||
|
|
if(res.status=='200'){
|
||
|
|
res.data.forEach((e, index) => {
|
||
|
|
var obj = {
|
||
|
|
value: e.num,
|
||
|
|
color: this.opts4.color[(index % this.opts4.color.length)]
|
||
|
|
}
|
||
|
|
this.getWorkTaskNumByjiedaolist.categories.push(e
|
||
|
|
.docTypeId)
|
||
|
|
this.getWorkTaskNumByjiedaolist.series[0].data.push(obj)
|
||
|
|
})
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
this.chartData4 = JSON.parse(JSON.stringify(this.getWorkTaskNumByjiedaolist));
|
||
|
|
}, 0);
|
||
|
|
})
|
||
|
|
},
|
||
|
|
gowordorder(item) {
|
||
|
|
uni.setStorageSync("type", item)
|
||
|
|
uni.switchTab({
|
||
|
|
url: `/pages/Workorder/Workorder`
|
||
|
|
})
|
||
|
|
},
|
||
|
|
info() {
|
||
|
|
workTaskNum().then(res => {
|
||
|
|
this.workTaskNumlist = res.data
|
||
|
|
})
|
||
|
|
},
|
||
|
|
typeinfo() {
|
||
|
|
this.workTaskNumByTypelist = {
|
||
|
|
categories: [],
|
||
|
|
series: [{
|
||
|
|
name: "数量",
|
||
|
|
data: []
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
workTaskNumByType().then(res => {
|
||
|
|
//模拟从服务器获取数据时的延时
|
||
|
|
setTimeout(() => {
|
||
|
|
console.log(res.status=='200')
|
||
|
|
if(res.status=='200'){
|
||
|
|
res.data.forEach((e, index) => {
|
||
|
|
var obj = {
|
||
|
|
value: e.num,
|
||
|
|
color: this.opts2.color[(index % this.opts2.color.length)]
|
||
|
|
}
|
||
|
|
this.workTaskNumByTypelist.categories.push(e.docTypeId)
|
||
|
|
this.workTaskNumByTypelist.series[0].data.push(obj)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
this.chartData2 = JSON.parse(JSON.stringify(this.workTaskNumByTypelist));
|
||
|
|
}, 0);
|
||
|
|
})
|
||
|
|
},
|
||
|
|
datainfo() {
|
||
|
|
this.workTaskNumByDatelist = {
|
||
|
|
categories: [],
|
||
|
|
series: [{
|
||
|
|
name: "数量",
|
||
|
|
data: []
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
workTaskNumByDate().then(res => {
|
||
|
|
//模拟从服务器获取数据时的延时
|
||
|
|
setTimeout(() => {
|
||
|
|
if(res.status=='200'){
|
||
|
|
res.data.forEach((e, index) => {
|
||
|
|
var obj = {
|
||
|
|
value: e.num,
|
||
|
|
color: this.opts.color[(index % this.opts.color.length)]
|
||
|
|
}
|
||
|
|
this.workTaskNumByDatelist.categories.push(e.dateTime)
|
||
|
|
this.workTaskNumByDatelist.series[0].data.push(obj)
|
||
|
|
})
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
this.chartData = JSON.parse(JSON.stringify(this.workTaskNumByDatelist));
|
||
|
|
}, 0);
|
||
|
|
})
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
//css函数 声明函数
|
||
|
|
@function tovmin($rpx) {
|
||
|
|
//$rpx为需要转换的字号
|
||
|
|
@return #{$rpx * 100 / 750}vmin;
|
||
|
|
}
|
||
|
|
.app {
|
||
|
|
padding: 0 0 tovmin(100);
|
||
|
|
margin-top: tovmin(50);
|
||
|
|
font-size: tovmin(28);
|
||
|
|
|
||
|
|
.charts-box {
|
||
|
|
width: 100%;
|
||
|
|
margin-top: tovmin(70);
|
||
|
|
height: tovmin(700);
|
||
|
|
|
||
|
|
.title {
|
||
|
|
font-size: tovmin(32);
|
||
|
|
font-weight: 1000;
|
||
|
|
margin: tovmin(50) 0 tovmin(50) tovmin(30);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.wordorder {
|
||
|
|
display: flex;
|
||
|
|
width: 100%;
|
||
|
|
margin: tovmin(-11) auto;
|
||
|
|
justify-content: space-evenly;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
font-size: tovmin(20);
|
||
|
|
color: #ffffff;
|
||
|
|
height: tovmin(140);
|
||
|
|
line-height: tovmin(30);
|
||
|
|
width: 40%;
|
||
|
|
text-align: center;
|
||
|
|
border-radius: tovmin(20);
|
||
|
|
position: relative;
|
||
|
|
margin-bottom: tovmin(20);
|
||
|
|
|
||
|
|
.title {
|
||
|
|
width: 100%;
|
||
|
|
line-height: tovmin(80);
|
||
|
|
font-size: tovmin(50);
|
||
|
|
font-weight: 1000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text {
|
||
|
|
width: 100%;
|
||
|
|
position: absolute;
|
||
|
|
bottom: tovmin(40);
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text2 {
|
||
|
|
width: 100%;
|
||
|
|
position: absolute;
|
||
|
|
bottom: tovmin(10);
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|