初始化
This commit is contained in:
309
pages/work/inspection/checkInRecord/index.vue
Normal file
309
pages/work/inspection/checkInRecord/index.vue
Normal file
@@ -0,0 +1,309 @@
|
||||
<template>
|
||||
<view class="charts-box">
|
||||
<uni-section class="mb-10" title="打卡数据" signIn="info">
|
||||
<template v-slot:right>
|
||||
<uni-data-select style="width:70px;" :clear=false v-model="queryform.month" :localdata="monthList"
|
||||
@change="monthSelectChange"></uni-data-select>
|
||||
</template>
|
||||
</uni-section>
|
||||
|
||||
<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" :errorShow="false" :tapLegend="false" />
|
||||
|
||||
<uni-section class="mb-10" title="打卡列表" List="info">
|
||||
<template v-slot:right>
|
||||
<uni-data-select style="width:70px;" :clear=false v-model="queryform.weekType" :localdata="weekList"
|
||||
@change="weekTypeSelectChange"></uni-data-select>
|
||||
</template>
|
||||
</uni-section>
|
||||
<uni-card v-for="item of cardList" :title="item.inspectionPoint" :thumbnail="avatar">
|
||||
<uni-row class="demo-uni-row" :width="nvueWidth">
|
||||
<uni-col :span="20">
|
||||
<view>
|
||||
<text class="uni-body">
|
||||
打卡时间：{{item.inspectionTime}}
|
||||
</text>
|
||||
</view>
|
||||
</uni-col>
|
||||
<uni-col :span="4">
|
||||
<view class="tag-view">
|
||||
<uni-tag :inverted="true" :circle="true" text="已打卡" size="small" />
|
||||
</view>
|
||||
</uni-col>
|
||||
</uni-row>
|
||||
</uni-card>
|
||||
<uni-load-more :status="status" />
|
||||
</uni-section>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import {
|
||||
listRecordView
|
||||
} from '@/api/inspection/record.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
status: 'noMore',
|
||||
// 分栏
|
||||
nvueWidth: 730,
|
||||
// 数据可视化
|
||||
inspectionRecordViewTable: [],
|
||||
cardList: [],
|
||||
weekList: [{
|
||||
text: "全部",
|
||||
value: 0
|
||||
}, {
|
||||
text: "第一周",
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
text: "第二周",
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
text: "第三周",
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
text: "第四周",
|
||||
value: 4
|
||||
}
|
||||
],
|
||||
monthList: [{
|
||||
text: " 一月",
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
text: " 二月",
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
text: " 三月",
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
text: " 四月",
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
text: " 五月",
|
||||
value: 5
|
||||
},
|
||||
{
|
||||
text: " 六月",
|
||||
value: 6
|
||||
},
|
||||
{
|
||||
text: " 七月",
|
||||
value: 7
|
||||
},
|
||||
{
|
||||
text: " 八月",
|
||||
value: 8
|
||||
},
|
||||
{
|
||||
text: " 九月",
|
||||
value: 9
|
||||
},
|
||||
{
|
||||
text: " 十月",
|
||||
value: 10
|
||||
},
|
||||
{
|
||||
text: "十一月",
|
||||
value: 11
|
||||
},
|
||||
{
|
||||
text: "十二月",
|
||||
value: 12
|
||||
}
|
||||
],
|
||||
queryform: {
|
||||
month: 9,
|
||||
weekType: 0,
|
||||
inspectorUser: this.$store.state.user.nickName
|
||||
},
|
||||
avatar: '/static/images/signIn.png',
|
||||
chartData: {},
|
||||
//这里的 opts 是图表类型 type="ring" 的全部配置参数，您可以将此配置复制到 config-ucharts.js 文件中下标为 ['ring'] 的节点中来覆盖全局默认参数。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
|
||||
opts: {
|
||||
timing: "easeOut",
|
||||
duration: 1000,
|
||||
rotate: false,
|
||||
rotateLock: false,
|
||||
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
|
||||
padding: [5, 5, 5, 5],
|
||||
fontSize: 13,
|
||||
fontColor: "#666666",
|
||||
dataLabel: false,
|
||||
dataPointShape: false,
|
||||
dataPointShapeType: "hollow",
|
||||
touchMoveLimit: 60,
|
||||
enableScroll: false,
|
||||
enableMarkLine: false,
|
||||
legend: {
|
||||
show: true,
|
||||
position: "bottom",
|
||||
lineHeight: 25,
|
||||
float: "center",
|
||||
padding: 5,
|
||||
margin: 5,
|
||||
backgroundColor: "rgba(0,0,0,0)",
|
||||
borderColor: "rgba(0,0,0,0)",
|
||||
borderWidth: 0,
|
||||
fontSize: 13,
|
||||
fontColor: "#666666",
|
||||
hiddenColor: "#CECECE",
|
||||
itemGap: 10
|
||||
},
|
||||
title: {
|
||||
name: "已打卡",
|
||||
fontSize: 15,
|
||||
color: "#666666",
|
||||
offsetX: 0,
|
||||
offsetY: 0
|
||||
},
|
||||
subtitle: {
|
||||
name: "30",
|
||||
fontSize: 25,
|
||||
color: "#fbbd08",
|
||||
offsetX: 0,
|
||||
offsetY: 0
|
||||
},
|
||||
extra: {
|
||||
ring: {
|
||||
ringWidth: 30,
|
||||
activeOpacity: 0.5,
|
||||
activeRadius: 10,
|
||||
offsetAngle: 0,
|
||||
labelWidth: 15,
|
||||
border: false,
|
||||
borderWidth: 3,
|
||||
borderColor: "#FFFFFF",
|
||||
centerColor: "#FFFFFF",
|
||||
customRadius: 0,
|
||||
linearType: "none"
|
||||
},
|
||||
tooltip: {
|
||||
showBox: true,
|
||||
showArrow: true,
|
||||
showCategory: false,
|
||||
borderWidth: 0,
|
||||
borderRadius: 0,
|
||||
borderColor: "#000000",
|
||||
borderOpacity: 0.7,
|
||||
bgColor: "#000000",
|
||||
bgOpacity: 0.7,
|
||||
gridType: "solid",
|
||||
dashLength: 4,
|
||||
gridColor: "#CCCCCC",
|
||||
boxPadding: 3,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
fontColor: "#FFFFFF",
|
||||
legendShow: true,
|
||||
legendShape: "auto",
|
||||
splitLine: true,
|
||||
horizentalLine: false,
|
||||
xAxisLabel: false,
|
||||
yAxisLabel: false,
|
||||
labelBgColor: "#FFFFFF",
|
||||
labelBgOpacity: 0.7,
|
||||
labelFontColor: "#666666"
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
const currentDate = new Date();
|
||||
const currentMonth = currentDate.getMonth() + 1; // getMonth() 返回 0-11，所以需要加 1
|
||||
this.queryform.month = currentMonth;
|
||||
listRecordView(this.queryform).then(res => {
|
||||
let data = res.data
|
||||
if (data.clockIn != 0) {
|
||||
let obj = [{
|
||||
"name": data.clockState,
|
||||
"value": data.clockIn + ""
|
||||
}]
|
||||
this.inspectionRecordViewTable = obj
|
||||
} else {
|
||||
this.inspectionRecordViewTable = []
|
||||
}
|
||||
this.cardList = data.inspectionRecordTables
|
||||
})
|
||||
this.getServerData()
|
||||
},
|
||||
//周选择框事件
|
||||
weekTypeSelectChange(e) {
|
||||
this.queryform.weekType = e
|
||||
this.getList()
|
||||
},
|
||||
// 月选择框事件
|
||||
monthSelectChange(e) {
|
||||
this.queryform.month = e
|
||||
this.getList()
|
||||
},
|
||||
// 初始化月份
|
||||
getmonth() {
|
||||
const now = new Date();
|
||||
this.queryform.month = (now.getMonth() + 1);
|
||||
},
|
||||
onClick(e) {
|
||||
console.log(e)
|
||||
},
|
||||
getServerData() {
|
||||
//模拟从服务器获取数据时的延时
|
||||
setTimeout(() => {
|
||||
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
|
||||
let res = {
|
||||
series: [{
|
||||
data: [],
|
||||
}]
|
||||
};
|
||||
// //卡片数据
|
||||
console.log(this.inspectionRecordViewTable);
|
||||
if (this.inspectionRecordViewTable.length > 0) {
|
||||
console.log(true);
|
||||
res.series[0].data = this.inspectionRecordViewTable
|
||||
this.opts.title.name = "本月总打卡"
|
||||
this.opts.subtitle.name = this.inspectionRecordViewTable[0].value + ""
|
||||
} else {
|
||||
this.opts.title.name = "暂无该月份数据"
|
||||
this.opts.subtitle.name = "0"
|
||||
res.series[0].data = []
|
||||
}
|
||||
this.chartData = JSON.parse(JSON.stringify(res));
|
||||
}, 1000);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* #ifndef APP-NVUE */
|
||||
page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
view {
|
||||
font-size: 14px;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
|
||||
.charts-box {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user