Skip to content

A
az-uniapp-wechat-web
Commit 2e811de2 authored by 李智书's avatar 李智书
Browse files
Options

1.新增班级周报页面； 

2.修改打包方式
parent b23aa49d
Show whitespace changes
Inline Side-by-side
Showing with 567 additions and 417 deletions
manifest.json
View file @ 2e811de2
...@@ -84,9 +84,13 @@ ...@@ -84,9 +84,13 @@
"enable" : true "enable" : true
}, },
"h5" : { "h5" : {
"devServer" : {
"port" : 80,
"disableHostCheck" : true
},
"router" : { "router" : {
"mode" : "hash", "mode" : "hash",
"base" : "/" "base" : "./"
}, },
"title" : "安智教育", "title" : "安智教育",
"optimization" : { "optimization" : {
......
pages/ClsWeekReport/ClsWeekReport.vue
View file @ 2e811de2
...@@ -6,16 +6,16 @@ ...@@ -6,16 +6,16 @@
<image src="../../static/images/header.png" mode="aspectFit"></image> <image src="../../static/images/header.png" mode="aspectFit"></image>
</view> </view>
<!-- 班级汇总选择切换 --> <!-- 班级汇总选择切换 -->
<picker class="classpicker" @change="bindPickerChange" :value="index" :range="array"> <picker class="classpicker" @change="bindPickerChange" :value="index" :range="array" range-key="Name">
<view class="selectClass" @click="selectReport"> <view class="selectClass" @click="selectReport">
<view>{{array[index]}}</view> <view>{{array[index].Name||"未知班级名"}}</view>
<image src="../../static/images/Triangle.png" mode="aspectFit"></image> <image src="../../static/images/Triangle.png" mode="aspectFit"></image>
</view> </view>
</picker> </picker>
<!-- 日期展示 --> <!-- 日期展示 -->
<view class="huizong"> <view class="huizong">
<image src="../../static/images/message_1.png" mode="aspectFit"></image> <image src="../../static/images/message_1.png" mode="aspectFit"></image>
<view class="huizongTime">4月1日-4月7日</view> <view class="huizongTime">{{week_desc}}</view>
</view> </view>
<!-- 列表数据 --> <!-- 列表数据 -->
...@@ -24,20 +24,14 @@ ...@@ -24,20 +24,14 @@
<view class="labelbox"> <view class="labelbox">
<image src="../../static/images/Group.png" mode="aspectFit"></image> <image src="../../static/images/Group.png" mode="aspectFit"></image>
<view class="labeltext">{{['每周要点','每周消费趋势','每周消费偏好区域'][index]}}</view> <view class="labeltext">{{['每周要点','每周消费趋势','每周消费偏好区域'][index]}}</view>
<image @click="doubtTips" style="width: 32rpx;height: 32rpx;" v-if="index==2" <image style="width: 32rpx;height: 32rpx;padding-left: 15rpx;" v-if="index==-1"
src="../../static/images/wenhao.png" mode="aspectFit"></image> src="../../static/images/wenhao.png" mode="aspectFit"></image>
</view> </view>
<!-- 展示内容区 --> <!-- 展示内容区 -->
<view class="content"> <view class="content">
<view class="content1" v-if="index==0"> <view class="content1" v-if="index==0">
<view> <view v-for="(item,index) in summary" :key="index">
本周班级人均消费金额低于/高于/等于本周年级人均消费金额； {{item}}
</view>
<view>
本周总共消费{xxx}元，相比上周增加/减少{xxx}元/持平；
</view>
<view>
本周有{xxx}人、总计{xxx}次未就餐
</view> </view>
</view> </view>
<view class="content2" v-if="index==1"> <view class="content2" v-if="index==1">
...@@ -56,7 +50,44 @@ ...@@ -56,7 +50,44 @@
</view> </view>
<!-- 就餐情况表格 --> <!-- 就餐情况表格 -->
<view class="bgmbox2"> <view class="bgmbox2">
AZSd <view class="labelbox">
<image src="../../static/images/Group.png" mode="aspectFit"></image>
<view class="labeltext">未就餐学生情况</view>
<image @click="doubtTips" style="width: 32rpx;height: 32rpx;padding-left: 15rpx;"
src="../../static/images/wenhao.png" mode="aspectFit"></image>
</view>
<!-- 表格数据 -->
<view class="uni-table-box">
<view class="table">
<view class="table-head">
<view>日期</view>
<view>学生姓名</view>
<view>次数</view>
</view>
<view v-for="(item,index) in unconsume_table.List" :key="index">
<!-- -->
<view class="table-body" v-for="(item2,index2) in item.List" :key="index2">
<view>{{item2.date}}</view>
<view>{{item2.student_name}}</view>
<view>{{item2.cnt}}</view>
</view>
<!-- 总计 -->
<view class="table-body total">
<view>总计 {{index+1}}</view>
<view>/</view>
<view>{{item.total}}</view>
</view>
</view>
<!-- 总计 -->
<view class="table-body zongji">
<view>总计</view>
<view>/</view>
<view>{{unconsume_table.total}}</view>
</view>
</view>
</view>
</view> </view>
</view> </view>
...@@ -70,16 +101,42 @@ ...@@ -70,16 +101,42 @@
if (window.location.protocol != "https:") { if (window.location.protocol != "https:") {
gHost = "https://fpdev.xiaopay.net"; gHost = "https://fpdev.xiaopay.net";
} }
//获取参数
function getQueryParams(params) {
let href = window.location.href
let query = href.substring(href.indexOf('?') + 1);
let vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
let pair = vars[i].split("=");
if (pair[0] == params) {
return pair[1];
}
}
return (false);
}
let icon = {
'0': 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAh0lEQVQoU2NkYGBg0Njaq8bwl7GdgZHBBcRn+M+wh4H5f+UN7+JbjCBJxn8MJxgYGAXBknDw//1/JgYLRo1NfWsZGRmCGBj+b/jxjzkDJM/B9HcGAwNjwP//DOsYNTb3fWRkYOD78Y9J4r5/wUuQAsWNE8Q5mP69+M/A8IkIBQStIORIQt4EAOTOTgf3b2UWAAAAAElFTkSuQmCC',
'1': 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAhUlEQVQoU2NkYGBgCHz9RI35P0M7A+N/FxCf4T/jnr+MDJXrRWVuMYIlGRhOMDAwCIIlEeD9XwYGC8aQV0/WMjAyBP1nZNzw+y9LBkielfnPDMb//wMY/jOsYwx5/fgjAwMj369/rBKbxMVfghT4vXwpzsb0+wUDw/9PRCggZAVBRxLyJgBtFlJZuXamlAAAAABJRU5ErkJggg==',
'2': 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAe0lEQVQoU4WPvQnCUACEv3u1BKy0VnAGB3AAcYqs4ARZIUskOEAGcAbBpNVK8rB+Fx42du+64477EcDT8RCgMZwyFwwJrntVD2VRcAfWWfzDx3DU5NgZLoKbCfUvIbWGs6DX6DgDFYTtTqt3Noz+biC9gFg2FCuKI0s3F9F1Rmtx2vOzAAAAAElFTkSuQmCC',
}
export default { export default {
name: "ClsWeekReport", name: "ClsWeekReport",
data() { data() {
return { return {
title: 'picker', title: 'picker',
array: ['101班周消费报告', '102班周消费报告', '103班周消费报告', '104班周消费报告'], array: [{
DepId: '',
Name: ""
}],
index: 0, index: 0,
time: '12:01', time: '12:01',
token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiJwZW5nemhpbG9uZyIsImNvcnBJZCI6Ind3NGY1ZjRkMzgwYjYwYjMzNCIsInNjaG9vbElkIjoxLCJ1c2VyVHlwZSI6MSwiZXhwIjoxNzA1NzI3MDI3LCJpc3MiOiJhZG1pbiIsIm5iZiI6MTYxOTMyNjAyN30.fCjz_vrol6T1jdsZedLyyBRbrqdngW2JrBw--G0t0Eg', token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiJwZW5nemhpbG9uZyIsImNvcnBJZCI6Ind3NGY1ZjRkMzgwYjYwYjMzNCIsInNjaG9vbElkIjoxLCJ1c2VyVHlwZSI6MywiZXhwIjoxNzA3MDM3NDQ2LCJpc3MiOiJhZG1pbiIsIm5iZiI6MTYyMDYzNjQ0Nn0.GnvWd800Zi1rKUEDjNgnqmjmSsKyS7n21_wFBwzyZwI",
weekid: -1, weekid: -1,
consume_prefs: [],
consume_trend: [],
summary: [],
unconsume_table: {},
week_desc: ''
} }
}, },
onLoad() { onLoad() {
...@@ -100,6 +157,10 @@ ...@@ -100,6 +157,10 @@
bindPickerChange: function(e) { bindPickerChange: function(e) {
console.log('picker发送选择改变，携带值为', e.target.value) console.log('picker发送选择改变，携带值为', e.target.value)
this.index = e.target.value this.index = e.target.value
// 切换班级获取报告
this.QueryClsReport(this.array[e.target.value].DepId)
}, },
// 切换班级选择汇总 // 切换班级选择汇总
async selectReport() { async selectReport() {
...@@ -127,317 +188,159 @@ ...@@ -127,317 +188,159 @@
}); });
}, },
// 二维码加密内容转tokenqrcode2Token // 二维码加密内容转tokenqrcode2Token
async tokenqrcode2Token(){ async tokenqrcode2Token() {
return new Promise((resolve, reject) => {
} // 二维码加密内容获取token
},
mounted: function() {
let this_ = this;
$.ajax({ $.ajax({
url: gHost + '/qyapp/qrcode2Token', url: gHost + '/qyxp/qyapp/qrcode2Token',
type: "POST", type: "get",
timeout: 8000, timeout: 8000,
contentType: "application/x-www-form-urlencoded", contentType: "application/x-www-form-urlencoded",
data: { data: {
hex: "sdfSDfsdfSAdfdfsdfasd" hex: getQueryParams('hex')
}, },
success: function(res) { success: function(res) {
if (res.code == 10000) {
}, resolve(res)
error: function() { } else {
resolve(res)
} uni.showToast({
icon: "none",
title: res.message
}) })
// return
option = {
//设置主副标题
title: {
show: true,
text: "企业数量", //主标题
left: "auto",
top: "40%",
z: 0,
zlevel: 100,
textStyle: { //设置主标题的 样式
textAlign: "center",
color: '#29B38E',
fontSize: 14
}
},
grid: {
show: false,
containLabel: false,
},
tooltip: {
show: false,
triggerOn: 'none',
trigger: 'item',
appendToBody: true
},
legend: {
top: '30%',
right: '10',
orient: 'vertical',
formatter: function(name) {
console.log(name);
return 'Legend ' + name;
},
textStyle: {
fontWeight: 'bold'
},
itemWidth: 8, // 图例图形宽度
itemHeight: 8, // 图例图形高度
// icon: 'image:// data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAKCAYAAAC5Sw6hAAABe0lEQVQoU32SPyxkURTGv+8+TGRCYgtRKAjFPJ1K1IoVCSpUWjqRjcgmmomWmYhClJstCM2uGRESFUIUFBJs/C02CqIxJoY38+4nb5IR2Z2Z053z/fLLybmXCEpiJBkfITkiqA1iisSWZzF93f/tKkBaf8+20dClVR0ceiT++qby6KpnLBXkDCTu+twyoKG89FMJSAHs9n2FHaOW/3LS82xm47Z/6p6RRGyU5OK/UKEX8GChaSPkijLk85/MwQrdROwYZHspUTC3wgKhk1LMm6PN4DYvBKrLiQT9grBVivF9/5CRRPyeRH15EZYg7ZRichXapZuM/wQwXOZGVlZREg/FGB+S/5pbYctavLXS4IhAbTFQ5A9JO5SqiuUWOr3om9hjEEaSM52kswSh6eO1JEvDxfO78Hhzw+OXkKnuglRTyINNCJxdHKf3EY3avCj/4TbmQ47NfjWAC5gUlN0+7528/NhidcBpDnc0Vni2TiHj2XTu7mbw+1MhfwfutKIPjPKX9gAAAABJRU5ErkJggg=='
data: [{
name: '食堂',
// 强制设置图形为圆。
icon: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAh0lEQVQoU2NkYGBg0Njaq8bwl7GdgZHBBcRn+M+wh4H5f+UN7+JbjCBJxn8MJxgYGAXBknDw//1/JgYLRo1NfWsZGRmCGBj+b/jxjzkDJM/B9HcGAwNjwP//DOsYNTb3fWRkYOD78Y9J4r5/wUuQAsWNE8Q5mP69+M/A8IkIBQStIORIQt4EAOTOTgf3b2UWAAAAAElFTkSuQmCC',
// 设置文本为红色
textStyle: {
itemStyle: {
// color: "#aa0000"
}
}
},
{
name: '超市',
// 强制设置图形为圆。
icon: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAhUlEQVQoU2NkYGBgCHz9RI35P0M7A+N/FxCf4T/jnr+MDJXrRWVuMYIlGRhOMDAwCIIlEeD9XwYGC8aQV0/WMjAyBP1nZNzw+y9LBkielfnPDMb//wMY/jOsYwx5/fgjAwMj369/rBKbxMVfghT4vXwpzsb0+wUDw/9PRCggZAVBRxLyJgBtFlJZuXamlAAAAABJRU5ErkJggg==',
// 设置文本为红色
textStyle: {
itemStyle: {
itemStyle: {
// color: "#4fb331"
}
}
}
},
{
name: '其它',
// 强制设置图形为圆。
icon: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAe0lEQVQoU4WPvQnCUACEv3u1BKy0VnAGB3AAcYqs4ARZIUskOEAGcAbBpNVK8rB+Fx42du+64477EcDT8RCgMZwyFwwJrntVD2VRcAfWWfzDx3DU5NgZLoKbCfUvIbWGs6DX6DgDFYTtTqt3Noz+biC9gFg2FCuKI0s3F9F1Rmtx2vOzAAAAAElFTkSuQmCC',
// 设置文本为红色
textStyle: {
itemStyle: {
// color: "#4fb331"
}
}
}
]
},
series: [{
name: '访问来源',
type: 'pie',
// 设置成相对的百分比
center: ['30%', '45%'],
radius: ['40%', '70%'],
avoidLabelOverlap: false,
legendHoverLink: false, //移入leged不显示在中间
textAlign: "center",
label: {
show: false,
fontSize: '15',
fontWeight: 'bold',
formatter: '{b}: {@name}',
position: 'center',
color: '#29B38E',
itemStyle: {
} }
}, },
emphasis: { error: function(error) {
itemStyle: {}, reject(error)
label: {
show: false,
fontSize: '15',
fontWeight: 'bold'
} }
})
})
}, },
select: { // 埋点接口，用户点击班级周消费报告推送消息后调用此接口
label: { async CaptureEvent() {
show: true return new Promise((resolve, reject) => {
}, // 二维码加密内容获取token
labelLine: {}, $.ajax({
itemStyle: { url: gHost + '/qyxp/qyapp/CaptureEvent',
color: '#29B38E' type: "post",
} dataType: 'json',
}, contentType: 'application/json; charset=UTF-8',
labelLine: { cache: false,
show: false data: JSON.stringify({
}, "event": "view_week_report",
data: [{ "hex": getQueryParams('hex'),
value: 1048, "qyToken": this.token,
name: '食堂', "weekId": 0
itemStyle: { }),
normal: { success: function(res) {
color: "#29B38E" if (res.code == 10000) {
} resolve(res)
} else {
resolve(res)
uni.showToast({
icon: "none",
title: res.message
})
} }
}, },
{ error: function(error) {
value: 735, reject(error)
name: '超市',
itemStyle: {
normal: {
color: "#54EBE4"
}
} }
})
})
}, },
{ // 获取管理的班级列表
value: 580, async QueryAdminCls() {
name: '其它', return new Promise((resolve, reject) => {
itemStyle: { // 二维码加密内容获取token
normal: { $.ajax({
color: "#DEFFF2" url: gHost + '/qyxp/qyapp/QueryAdminCls',
} type: "post",
} dataType: 'json',
contentType: 'application/json; charset=UTF-8',
cache: false,
data: JSON.stringify({
qyToken: this.token
}),
success: function(res) {
if (res.code == 10000) {
resolve(res)
} else {
resolve(res)
uni.showToast({
icon: "none",
title: res.message
})
} }
]
}]
};
let option2 = {
//设置主副标题
title: {
show: true,
text: "企业数量", //主标题
subtext: "sadf", //副标题：企业数量值，此处用标题方式来显示
left: "center",
top: "40%",
z: 0,
zlevel: 100,
textStyle: { //设置主标题的 样式
textAlign: "center",
color: "rgba(145,213,255,0.85)",
fontSize: 14
}, },
subtextStyle: { //设置副标题的样式 error: function(error) {
textAlign: "center", reject(error)
color: "#fff",
fontSize: 30,
fontWeight: 600
} }
})
})
}, },
// 获取班级周消费报告
tooltip: { async QueryClsReport(clsId) {
show: false, //需要关闭默认的鼠标悬浮显示样式 let this_ = this;
}, return new Promise((resolve, reject) => {
//图例 // 二维码加密内容获取token
legend: { $.ajax({
show: false url: gHost + '/qyxp/qyapp/QueryClsReport',
}, type: "post",
//设置图表撑满整个画布 dataType: 'json',
grid: { contentType: 'application/json; charset=UTF-8',
left: "0%", cache: false,
right: "0%", data: JSON.stringify({
bottom: "0%", "clsId": clsId + '',
containLabel: true "qyToken": this_.token,
}, "weekId": -1
}),
series: [{ success: function(res) {
name: "企业数量", if (res.code == 10000) {
type: "pie", let {
//自定义颜色 consume_prefs,
color: "#54EBE4", consume_trend,
radius: ["60%", "90%"], //饼图大小 summary,
avoidLabelOverlap: false, unconsume_table,
legendHoverLink: false, //移入leged不显示在中间 week_desc
textAlign: "center", } = res.results
this_.consume_prefs = consume_prefs
label: { this_.consume_trend = consume_trend
normal: { this_.summary = summary
show: true, this_.unconsume_table = unconsume_table
position: "center", //文字显示在中间 this_.week_desc = week_desc
align: "center", // 折线图重新渲染
verticalAlign: "middle", this_.Linechart()
textStyle: { // 饼图渲染
//设置文字样式 this_.piechart()
fontSize: "0" resolve(res)
} else {
resolve(res)
uni.showToast({
icon: "none",
title: res.message
})
} }
}, },
emphasis: { error: function(error) {
show: true, //文字至于中间时，这里需为true reject(error)
textStyle: {
//设置文字样式
fontSize: "14",
color: "rgba(145,213,255,0.85)"
},
formatter: function({
data
}) {
//此处重点，其中定义的 b,c,d 是用于下面的 rich来单独设置样式，因为这里不支持 HTML标签
let html =
`{b| ${data.name}} \n {c|${data.value}} {d|${data.percent}}`;
return html;
},
//样式设置
rich: {
b: {
//name 文字样式
lineHeight: 20,
fontSize: 14,
textAlign: "center",
color: "rgba(145,213,255,0.85)"
},
c: {
//value 文字样式
lineHeight: 36,
color: "#fff",
fontSize: 30,
fontWeight: 600
},
d: {
//百分比样式
fontSize: 12,
color: "rgba(145,213,255,0.85)"
}
}
} }
})
})
}, },
itemStyle: { // 折线图渲染
borderWidth: 2, async Linechart() {
borderColor: "#2E3E62" let this_ = this;
},
labelLine: {
show: false
},
data: [{
name: "sd",
value: "value",
percent: "244"
}, {
name: "sd",
value: "value",
percent: "244"
}, {
name: "sd",
value: "value",
percent: "244"
}, {
name: "sd",
value: "value",
percent: "244"
}, {
name: "sd",
value: "value",
percent: "244"
}, {
name: "sd",
value: "value",
percent: "244"
}]
}]
};
this.$nextTick(function() { this.$nextTick(function() {
let zhexianchartDom = document.getElementById('zhexian'); let zhexianchartDom = document.getElementById('zhexian');
console.log(zhexianchartDom); console.log(zhexianchartDom);
myChartzhexian = echarts.init(zhexianchartDom); myChartzhexian = echarts.init(zhexianchartDom);
myChartzhexian.setOption({ myChartzhexian.setOption({
grid: { grid: {
left: "12%", left: '3%',
containLabel: false, right: '4%',
bottom: '3%',
containLabel: true
}, },
legend: { legend: {
...@@ -448,17 +351,21 @@ ...@@ -448,17 +351,21 @@
label: { label: {
show: false, show: false,
// 高亮时标签的文字 // 高亮时标签的文字
formatter: '高亮时显示的标签内容' formatter: ''
} }
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
extraCssText: 'width: 35%;text-align: center;border-radius: 0px 100px 100px 200px;', // 额外附加到浮层的 css 样式
borderWidth: 0,
backgroundColor: '#729487', // 提示框浮层的背景颜色。
formatter: function(name) { formatter: function(name) {
console.log(name[0].data); // console.log(name[0].data);
return name[0].data.name + ' ' + name[0].value + '次'; return name[0].data.name + ' ' + name[0].value + '次';
}, },
textStyle: { textStyle: {
fontWeight: 'bold' fontWeight: 'bold',
color: "#F1F4F3"
}, },
axisPointer: { //坐标轴指示器，坐标轴触发有效， axisPointer: { //坐标轴指示器，坐标轴触发有效，
type: 'shadow', //默认为line，line直线，cross十字准星，shadow阴影 type: 'shadow', //默认为line，line直线，cross十字准星，shadow阴影
...@@ -484,7 +391,9 @@ ...@@ -484,7 +391,9 @@
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: ['15日', '16日', '17日', '18日', '19日', '20日', '21日'] data: this_.consume_trend.map(v => {
return v.Date
})
}, },
yAxis: { yAxis: {
type: 'value' type: 'value'
...@@ -497,76 +406,239 @@ ...@@ -497,76 +406,239 @@
} }
} }
}, },
data: [{ data: this_.consume_trend.map(v => {
name: "4/15", return {
value: 820, name: v.Date,
value: v.Amount,
itemStyle: { itemStyle: {
normal: { normal: {
color: "#29B38E" color: "#29B38E"
} }
} }
}
}),
type: 'line',
smooth: true,
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 1,
color: '#E4F6EF' // 0% 处的颜色
}, { }, {
name: "4/15", offset: 0,
value: 932, color: '#34e7b5' // 100% 处的颜色
itemStyle: { }],
normal: { global: false // 缺省为 false
color: "#29B38E" },
opacity: 0.3
} }
}],
media: {
minHeight: 200
} }
}, { });
name: "4/15", })
value: 901, },
itemStyle: { // 饼图渲染
normal: { async piechart() {
color: "#29B38E" let this_ = this;
let pieChartData = [{
value: 1,
name: '系统工具'
},
{
value: 3,
name: '课程表'
},
{
value: 0,
name: '意见反馈'
},
{
value: 43,
name: '其他'
} }
]
this.$nextTick(function() {
let chartDom = document.getElementById('mychars');
myChart = echarts.init(chartDom);
let sum = 0,
obj = {};
this_.consume_prefs.forEach(ele => {
obj[ele.scene] = parseInt(ele.amount)
sum += parseInt(ele.amount);
})
myChart.setOption({
//设置主副标题
title: {
show: false,
text: sum.toFixed(2), //主标题
left: "23%",
top: "40%",
z: 0,
zlevel: 100,
textStyle: { //设置主标题的 样式
textAlign: "center",
color: '#29B38E',
fontSize: 14
} }
}, { },
name: "4/15", grid: {
value: 934, show: false,
itemStyle: { containLabel: false,
normal: { },
color: "#29B38E" tooltip: {
show: false,
triggerOn: 'none',
trigger: 'item',
appendToBody: true
},
legend: {
top: '35%',
right: '0',
orient: 'vertical',
selector: false,
formatter: function(name) {
console.log(name);
return `{a|${name}}: {x|共花费${obj[name]}元}`;
},
textStyle: {
fontWeight: 'normal',
rich: {
a: {
fontWeight: 'bold',
padding: [0, 0, 0, 15]
},
b: {
},
x: {
} }
} }
}, { },
name: "4/15", itemWidth: 10, // 图例图形宽度
value: 500, itemHeight: 10, // 图例图形高度
data: this_.consume_prefs.map((v, index) => {
return {
name: v.scene,
// 强制设置图形为圆。
icon: icon[index + '0'],
// 设置文本为红色
textStyle: {
itemStyle: { itemStyle: {
normal: { // color: "#aa0000"
color: "#29B38E"
} }
} }
}, { }
name: "4/15", })
value: 820, },
series: [{
name: '访问来源',
type: 'pie',
// 设置成相对的百分比
center: ['30%', '45%'],
radius: ['40%', '55%'],
avoidLabelOverlap: false,
legendHoverLink: false, //移入leged不显示在中间
textAlign: "center",
label: {
show: true,
fontSize: '15',
fontWeight: 'bold',
formatter: '{@name}元',
position: 'center',
color: '#29B38E',
itemStyle: { itemStyle: {
normal: {
color: "#29B38E"
} }
},
emphasis: {
itemStyle: {},
label: {
show: true,
fontSize: '15',
fontWeight: 'bold'
} }
}, { },
name: "4/15", select: {
value: 900, label: {
show: true
},
labelLine: {},
itemStyle: {
color: '#29B38E'
}
},
labelLine: {
show: false
},
data: this_.consume_prefs.map((v, index) => {
console.log(this_.consume_prefs);
return {
value: parseInt(v.amount),
name: v.scene,
itemStyle: { itemStyle: {
normal: { normal: {
color: "#29B38E" color: ["#29B38E", "#54EBE4", "#DEFFF2"][
index
]
} }
} }
}],
type: 'line',
smooth: true
}],
media: {
minHeight: 200
} }
})
}]
}); });
// console.log(this_.$jweixin);
let chartDom = document.getElementById('mychars');
console.log(chartDom);
myChart = echarts.init(chartDom);
myChart.setOption(option);
}) })
},
// 初始化
async init_() {
try {
// await this.tokenqrcode2Token();
let AdminCls = await this.QueryAdminCls();
if (AdminCls.results) {
this.array = AdminCls.results
// this.array = [{
// DepId: 39,
// Name: "未知班级姓名"
// }, {
// DepId: 40,
// Name: "101班周消费报告 "
// }, {
// DepId: 41,
// Name: "102班周消费报告 "
// }]
}
await this.QueryClsReport(AdminCls.results[0].DepId);
// await this.CaptureEvent()
} catch (e) {
//TODO handle the exception
uni.showModal({
title: "系统提示",
showCancel: false,
content: e.message,
})
}
}
},
mounted: function() {
let this_ = this;
if (!getQueryParams('hex')) {
return uni.showModal({
title: "系统提示",
showCancel: false,
content: "hex参数错误",
})
}
this_.init_()
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
this.$nextTick(function() { this.$nextTick(function() {
myChartzhexian.resize() myChartzhexian.resize()
...@@ -595,7 +667,7 @@ ...@@ -595,7 +667,7 @@
.container { .container {
padding-top: 26rpx; padding-top: 26rpx;
padding-bottom: 268rpx; padding-bottom: 26rpx;
} }
.container image { .container image {
...@@ -647,16 +719,22 @@ ...@@ -647,16 +719,22 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
background-attachment: fixed; background-attachment: fixed;
box-shadow: 0rpx 12rpx 14rpx 0rpx rgba(0, 171, 207, 0.58); box-shadow: 0rpx 6rpx 7rpx 0rpx rgba(0, 171, 207, 0.58);
margin: 0 auto; margin: 0 auto;
padding-bottom: 50rpx; padding-bottom: 50rpx;
} }
.bgmbox2 { .bgmbox2 {
width: 670rpx; width: 670rpx;
height: 718rpx; /* height: 718rpx; */
box-shadow: 0rpx 12rpx 14rpx 0rpx rgba(0, 171, 207, 0.58); box-shadow: 0rpx 6rpx 7rpx 0rpx rgba(0, 171, 207, 0.58);
margin: 0 auto; margin: 0 auto;
padding-bottom: 50rpx;
}
.bgmbox2>.labelbox {
padding-top: 40rpx;
} }
.huizong { .huizong {
...@@ -668,7 +746,7 @@ ...@@ -668,7 +746,7 @@
} }
.huizongTime { .huizongTime {
width: 204rpx; /* width: 204rpx; */
height: 42rpx; height: 42rpx;
font-size: 30rpx; font-size: 30rpx;
font-family: PingFang-SC-Regular, PingFang-SC; font-family: PingFang-SC-Regular, PingFang-SC;
...@@ -685,6 +763,7 @@ ...@@ -685,6 +763,7 @@
width: 32rpx; width: 32rpx;
height: 32rpx; height: 32rpx;
padding-right: 10rpx; padding-right: 10rpx;
top: -5rpx;
} }
.labelbox { .labelbox {
...@@ -710,7 +789,7 @@ ...@@ -710,7 +789,7 @@
} }
.content1 { .content1 {
height: 280rpx; /* height: 280rpx; */
} }
.content1, .content1,
...@@ -725,7 +804,7 @@ ...@@ -725,7 +804,7 @@
font-family: PingFang-SC-Regular, PingFang-SC; font-family: PingFang-SC-Regular, PingFang-SC;
font-weight: 400; font-weight: 400;
color: #3D3D3D; color: #3D3D3D;
line-height: 40rpx; line-height: 50rpx;
} }
...@@ -736,4 +815,71 @@ ...@@ -736,4 +815,71 @@
.content1 view:not(:first-child) { .content1 view:not(:first-child) {
margin-top: 40rpx; margin-top: 40rpx;
} }
.table-head,
.table-body {
width: 616rpx;
height: 62rpx;
line-height: 62rpx;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.table-body {
height: 80rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #3D3D3D;
line-height: 80rpx;
}
.table-body view {
width: 120rpx;
text-align: center;
}
.table-head {
background-color: #F3F3F3;
color: #3D3D3D;
margin-top: 44rpx;
font-size: 30rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
}
.table-head view {
padding-left: 34rpx;
padding-right: 36rpx;
}
.total {
height: 72rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #3D3D3D;
line-height: 72rpx;
background-color: #D7F6F4;
}
.zongji {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #29B38E;
}
.zongji view {
width: 130rpx;
text-align: center;
}
.table-head,
.total {
border-radius: 10rpx;
}
</style> </style>
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