Skip to content

frontend / qqxb-self-service

Go to a project
Commit 98d56d80 by 展昭
Options

update

parent affbeb43
Inline Side-by-side
Showing with 234 additions and 208 deletions
package-lock.json
......@@ -958,6 +958,14 @@
"integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==",
"dev": true
},
"@types/echarts": {
"version": "4.6.1",
"resolved": "https://registry.npmjs.org/@types/echarts/-/echarts-4.6.1.tgz",
"integrity": "sha512-oeekc7CQASQzRCbx8ixVQw4U4AmnjF2/fEyptqeUYeQnsEubr87Yde8nw6AxWTsEtWSNB/Pp0B/FTgGNHqkAUQ==",
"requires": {
"@types/zrender": "*"
}
},
"@types/events": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz",
......@@ -1015,6 +1023,11 @@
"integrity": "sha512-67ZgZpAlhIICIdfQrB5fnDvaKFcDxpKibxznfYRVAT4mQE41Dido/3Ty+E3xGBmTogc5+0Qb8tWhna+5B8z1iQ==",
"dev": true
},
"@types/zrender": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/@types/zrender/-/zrender-4.0.0.tgz",
"integrity": "sha512-s89GOIeKFiod2KSqHkfd2rzx+T2DVu7ihZCBEBnhFrzvQPUmzvDSBot9Fi1DfMQm9Odg+rTqoMGC38RvrwJK2w=="
},
"@vant/icons": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@vant/icons/-/icons-1.2.1.tgz",
......@@ -3970,6 +3983,14 @@
"safer-buffer": "^2.1.0"
}
},
"echarts": {
"version": "4.8.0",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-4.8.0.tgz",
"integrity": "sha512-YwShpug8fWngj/RlgxDaYrLBoD+LsZUArrusjNPHpAF+is+gGe38xx4W848AwWMGoi745t3OXM52JedNrv+F6g==",
"requires": {
"zrender": "4.3.1"
}
},
"ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
......@@ -7145,7 +7166,8 @@
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
"integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
"dev": true
"dev": true,
"optional": true
},
"pify": {
"version": "4.0.1",
......@@ -11072,6 +11094,11 @@
"dev": true
}
}
},
"zrender": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.1.tgz",
"integrity": "sha512-CeH2TpJeCdG0TAGYoPSAcFX2ogdug1K7LIn9UO/q9HWqQ54gWhrMAlDP9AwWYMUDhrPe4VeazQ4DW3msD96nUQ=="
}
}
}
package.json
......@@ -8,11 +8,13 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@types/echarts": "^4.6.1",
"@types/fastclick": "^1.0.29",
"@types/qs": "^6.9.3",
"amfe-flexible": "^2.2.1",
"axios": "^0.19.2",
"core-js": "^2.6.11",
"echarts": "^4.8.0",
"fastclick": "^1.0.6",
"moment": "^2.26.0",
"oidc-client": "^1.10.1",
......
src/main.ts
......@@ -8,6 +8,7 @@ import server from '@/services/install'
import '@/assets/css/index.less'
import * as filters from "@/utils/filters";
Vue.config.productionTip = false;
// FastClick.attach(document.body);
Object.keys(filters).forEach((key: string) => {
......@@ -16,6 +17,7 @@ Object.keys(filters).forEach((key: string) => {
Vue.use(server)
new Vue({
router,
store,
......
src/views/PaySlips.vue
......@@ -16,7 +16,7 @@
<li class="option-item" optionVal="2020">2020</li>
<li class="option-item" optionVal="2019">2019</li>
</ul>
<div id="chart" style="height: 20rem;width: 100%"></div>
<div ref="chart" style="height: 20rem;width: 100%"></div>
</div>
<div class="slips-bottom">
<h3>收入记录</h3>
......@@ -48,7 +48,7 @@
<script lang="ts">
import "../assets/css/labor.css";
import "../assets/js/echarts.min.js";
import echarts from "echarts";
import Vue from "vue";
import { Button } from "vant";
import { Component } from "vue-property-decorator";
......@@ -61,166 +61,224 @@ import { Component } from "vue-property-decorator";
export default class PaySlips extends Vue {
private obj: any = {};
private getSalaryInfo(): void {
let params = {
edId: this.$route.query.ed_id
};
this.$server.EmployeeService.getSalaryInfo(params)
.then(res => {
console.log("res=" + JSON.stringify(res)+'工资条信息');
console.log("res=" + JSON.stringify(res) + "工资条信息");
this.obj = res;
})
.catch(error => {});
}
// @ts-ignore
private transData(data: any, cur_year: any) {
let columnData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
let obj = [];
let yearList = [];
for (const item in data) {
if (data.hasOwnProperty(item)) {
const element = data[item];
if (element.pay_time) {
const year = element.pay_time.substr(0, 4);
if (year == cur_year) {
yearList.push(year);
}
}
}
}
created() {
yearList = [...new Set(yearList)];
if (yearList.length < 1) {
return;
}
for (const year of yearList) {
const o = { year: year, list: [] };
obj.push(o);
}
for (const yObj of obj) {
const oy = yObj.year;
const set = new Set();
for (const item of data) {
const iy = item.pay_time.substr(0, 4);
if (oy === iy) {
const month = item.pay_time.substr(5, 2);
set.add(month);
}
}
set.forEach(m => {
// @ts-ignore
yObj.list.push({ month: m, sum: 0, list: [] });
});
}
}
for (const y of obj) {
const yl = y.list;
for (const m of yl) {
// @ts-ignore
const month = m.month;
let sum = 0;
for (const item of data) {
if (item.pay_time.indexOf(month) > -1) {
// @ts-ignore
m.list.push(item);
sum += item.current_real_wage;
}
}
let mon = parseInt(month);
columnData[mon] = sum;
// @ts-ignore
m.sum = sum;
}
}
// var myChart = echarts.init(document.getElementById("chart"));
// var dataAxis = [
// "01",
// "02",
// "03",
// "04",
// "05",
// "06",
// "07",
// "08",
// "09",
// "10",
// "11",
// "12"
// ];
// var columnData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 10000];
// var yMax = 15000;
// var dataShadow = [];
// var date = new Date();
// var cur_year = date.getFullYear();
// for (var i = 0; i < columnData.length; i++) {
// dataShadow.push(yMax);
// }
// option = {
// xAxis: {
// offset: 10,
// name: "元",
// nameLocation: "start",
// nameTextStyle: {
// padding: [45, -10, 0, 0]
// },
// data: dataAxis,
// axisLabel: {
// inside: false,
// textStyle: {
// color: "#BABFC2"
// }
// },
// axisTick: {
// show: false
// },
// axisLine: {
// show: false
// },
// z: 10
// },
// yAxis: {
// name: "月/",
// nameLocation: "start",
// nameTextStyle: {
// padding: [2, 55, 0, 0]
// },
// axisLine: {
// show: false
// },
// splitLine: {
// // grid 分割线设置
// show: false
// },
// axisTick: {
// show: false
// },
// axisLabel: {
// textStyle: {
// color: "#BABFC2"
// }
// }
// },
// grid: {
// bottom: "30%",
// top: "10%",
// width: "82%",
// left: "15%"
// },
// // dataZoom: [
// // {
// // type: 'inside'
// // }
// // ],
// series: [
// {
// // For shadow
// type: "bar",
// itemStyle: {
// normal: { color: "rgba(0,0,0,0.05)" }
// },
// barGap: "-100%",
// barCategoryGap: "40%",
// data: dataShadow,
// animation: false
// },
// {
// type: "bar",
// barWidth: 8,
// itemStyle: {
// normal: {
// barBorderRadius: [50, 50, 0, 0],
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: "#33CD8B" },
// { offset: 0.5, color: "#22BD7A" },
// { offset: 1, color: "#22BD7A" }
// ])
// },
// emphasis: {
// barBorderRadius: [50, 50, 0, 0],
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: "#33CD8B" },
// { offset: 0.5, color: "#22BD7A" },
// { offset: 1, color: "#22BD7A" }
// ]),
// label: {
// show: true,
// position: "top",
// rich: {},
// textStyle: {
// // color: '#FC8936',
// color: "#FFFFFF"
// },
// backgroundColor: {
// image: "../assets/images/echart_backgorund.png"
// },
// padding: [10, 12, 12, 8]
// }
// }
// },
// data: columnData
// }
// ]
// };
return obj;
}
// function init() {
// option.series[1].data = columnData;
// myChart.setOption(option);
private init() {
// @ts-ignore
option.series[1].data = columnData;
// @ts-ignore
myChart.setOption(option);
// @ts-ignore
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: 12
});
}
// myChart.dispatchAction({
// type: "highlight",
// seriesIndex: 0,
// dataIndex: 12
// });
// }
created() {
var myChart = echarts.init(this.$refs.chart as HTMLCanvasElement);
var dataAxis = [
"01",
"02",
"03",
"04",
"05",
"06",
"07",
"08",
"09",
"10",
"11",
"12"
];
var columnData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 10000];
var yMax = 15000;
var dataShadow = [];
var date = new Date();
var cur_year = date.getFullYear();
for (var i = 0; i < columnData.length; i++) {
dataShadow.push(yMax);
}
const option: any = {
xAxis: {
offset: 10,
name: "元",
nameLocation: "start",
nameTextStyle: {
padding: [45, -10, 0, 0]
},
data: dataAxis,
axisLabel: {
inside: false,
textStyle: {
color: "#BABFC2"
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
z: 10
},
yAxis: {
name: "月/",
nameLocation: "start",
nameTextStyle: {
padding: [2, 55, 0, 0]
},
axisLine: {
show: false
},
splitLine: {
// grid 分割线设置
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: "#BABFC2"
}
}
},
grid: {
bottom: "30%",
top: "10%",
width: "82%",
left: "15%"
},
series: [
{
type: "bar",
itemStyle: {
normal: { color: "rgba(0,0,0,0.05)" }
},
barGap: "-100%",
barCategoryGap: "40%",
data: dataShadow,
animation: false
},
{
type: "bar",
barWidth: 8,
itemStyle: {
normal: {
barBorderRadius: [50, 50, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#33CD8B" },
{ offset: 0.5, color: "#22BD7A" },
{ offset: 1, color: "#22BD7A" }
])
},
emphasis: {
barBorderRadius: [50, 50, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#33CD8B" },
{ offset: 0.5, color: "#22BD7A" },
{ offset: 1, color: "#22BD7A" }
]),
label: {
show: true,
position: "top",
rich: {},
textStyle: {
color: "#FFFFFF"
},
backgroundColor: {
image: "../assets/images/echart_backgorund.png"
},
padding: [10, 12, 12, 8]
}
}
},
data: columnData
}
]
};
}
}
// window.onresize = function() {
// myChart.resize();
......@@ -262,69 +320,6 @@ export default class PaySlips extends Vue {
// .addClass("rotate1")
// .removeClass("rotate");
// });
// function transData(data, cur_year) {
// columnData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
// let obj = [];
// let yearList = [];
// for (const item in data) {
// if (data.hasOwnProperty(item)) {
// const element = data[item];
// if (element.pay_time) {
// const year = element.pay_time.substr(0, 4);
// if (year == cur_year) {
// yearList.push(year);
// }
// }
// }
// }
// yearList = [...new Set(yearList)];
// if (yearList.length < 1) {
// return;
// }
// for (const year of yearList) {
// const o = { year: year, list: [] };
// obj.push(o);
// }
// for (const yObj of obj) {
// const oy = yObj.year;
// const set = new Set();
// for (const item of data) {
// const iy = item.pay_time.substr(0, 4);
// if (oy === iy) {
// const month = item.pay_time.substr(5, 2);
// set.add(month);
// }
// }
// set.forEach(m => {
// yObj.list.push({ month: m, sum: 0, list: [] });
// });
// }
// for (const y of obj) {
// const yl = y.list;
// for (const m of yl) {
// const month = m.month;
// let sum = 0;
// for (const item of data) {
// if (item.pay_time.indexOf(month) > -1) {
// m.list.push(item);
// sum += item.current_real_wage;
// }
// }
// let mon = parseInt(month);
// columnData[mon] = sum;
// m.sum = sum;
// }
// }
// return obj;
// }
</script>
<style lang="less">
......
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 sign in to comment