Commit 4631ae09 authored by 王启林's avatar 王启林

parent 19df62ff
...@@ -21,8 +21,12 @@ export default { ...@@ -21,8 +21,12 @@ export default {
}, },
styleObj: { styleObj: {
type: Object, type: Object,
default: () => {}, default: () => { },
}, },
chartsData: {
type: Array,
default: ""
}
}, },
data() { data() {
return {}; return {};
...@@ -32,6 +36,9 @@ export default { ...@@ -32,6 +36,9 @@ export default {
console.log(val); console.log(val);
this.drawLine(); this.drawLine();
}, },
chartsData(val) {
this.drawLine();
}
}, },
mounted() { mounted() {
this.drawLine(); this.drawLine();
...@@ -50,7 +57,7 @@ export default { ...@@ -50,7 +57,7 @@ export default {
fontSize: this.legendName == "旷工率" ? 24 : 18, fontSize: this.legendName == "旷工率" ? 24 : 18,
}, },
}, },
color:'#6e98ed', color: '#6e98ed',
legend: { legend: {
orient: "horizontal", orient: "horizontal",
right: "50px", right: "50px",
...@@ -65,75 +72,78 @@ export default { ...@@ -65,75 +72,78 @@ export default {
}, },
tooltip: {}, tooltip: {},
xAxis: { xAxis: {
data: data: this.chartsData.map(i => {
this.title == "申诉次数部门排名TOP20" console.log(i)
? [ return i.ruleName ? i.ruleName : i.depName ? i.depName : i.staffName
"部门1", })
"部门2", // this.title == "申诉次数部门排名TOP20"
"部门3", // ? [
"部门4", // "部门1",
"部门5", // "部门2",
"部门6", // "部门3",
"部门7", // "部门4",
"部门8", // "部门5",
"部门9", // "部门6",
"部门10", // "部门7",
"部门11", // "部门8",
"部门12", // "部门9",
"部门13", // "部门10",
"部门14", // "部门11",
"部门15", // "部门12",
"部门16", // "部门13",
"部门17", // "部门14",
"部门18", // "部门15",
"部门19", // "部门16",
"部门20", // "部门17",
] // "部门18",
: this.title == "申诉次数个人排名TOP20" // "部门19",
? [ // "部门20",
"个人1", // ]
"个人2", // : this.title == "申诉次数个人排名TOP20"
"个人3", // ? [
"个人4", // "个人1",
"个人5", // "个人2",
"个人6", // "个人3",
"个人7", // "个人4",
"个人8", // "个人5",
"个人9", // "个人6",
"个人10", // "个人7",
"个人11", // "个人8",
"个人12", // "个人9",
"个人13", // "个人10",
"个人14", // "个人11",
"个人15", // "个人12",
"个人16", // "个人13",
"个人17", // "个人14",
"个人18", // "个人15",
"个人19", // "个人16",
"个人20", // "个人17",
] // "个人18",
: [ // "个人19",
"规则1", // "个人20",
"规则2", // ]
"规则3", // : [
"规则4", // "规则1",
"规则5", // "规则2",
"规则6", // "规则3",
"规则7", // "规则4",
"规则8", // "规则5",
"规则9", // "规则6",
"规则10", // "规则7",
"规则11", // "规则8",
"规则12", // "规则9",
"规则13", // "规则10",
"规则14", // "规则11",
"规则15", // "规则12",
"规则16", // "规则13",
"规则17", // "规则14",
"规则18", // "规则15",
"规则19", // "规则16",
"规则20", // "规则17",
], // "规则18",
// "规则19",
// "规则20",
// ],
}, },
grid: { grid: {
left: "5%", left: "5%",
...@@ -147,28 +157,9 @@ export default { ...@@ -147,28 +157,9 @@ export default {
{ {
name: this.legendName, name: this.legendName,
type: "bar", type: "bar",
data: [ data: this.chartsData.map(i => {
1200, return i.number
1100, }),
900,
800,
1122,
1234,
1050,
1155,
1120,
1136,
1110,
1110,
1120,
1020,
1212,
1233,
1111,
1000,
1111,
1024,
],
itemStyle: { itemStyle: {
// normal: { // normal: {
// //这里是重点 // //这里是重点
......
...@@ -13,48 +13,27 @@ ...@@ -13,48 +13,27 @@
<div class="content"> <div class="content">
<div class="search_box"> <div class="search_box">
<div class="search"> <div class="search">
<el-select <el-select v-model="dateValue" placeholder="请选择" style="margin: 0 10px;">
v-model="dateValue" <el-option v-for="item in optionsMonths" :key="item.value" :label="item.label" :value="item.value">
placeholder="请选择"
style="margin: 0 10px;"
>
<el-option
v-for="item in optionsMonths"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option> </el-option>
</el-select> </el-select>
<el-button type="primary">搜索</el-button> <el-button type="primary" @click="getChartsData">搜索</el-button>
</div> </div>
</div> </div>
<div class="data_box"> <div class="data_box">
<div class="top"> <div class="top">
<div class="box"> <div class="box">
<bar-charts <bar-charts :title="'申诉次数部门排名TOP20'" :id="'dept_20'" :legendName="'申诉次数'"
:title="'申诉次数部门排名TOP20'" :styleObj="{ width: '800px', height: '360px' }" :chartsData="depChartsData" />
:id="'dept_20'"
:legendName="'申诉次数'"
:styleObj="{ width: '800px', height: '360px' }"
/>
</div> </div>
<div class="box"> <div class="box">
<bar-charts <bar-charts :title="'申诉次数个人排名TOP20'" :id="'person_20'" :legendName="'申诉次数'"
:title="'申诉次数个人排名TOP20'" :styleObj="{ width: '800px', height: '360px' }" :chartsData="personChartsData" />
:id="'person_20'"
:legendName="'申诉次数'"
:styleObj="{ width: '800px', height: '360px' }"
/>
</div> </div>
</div> </div>
<div class="down"> <div class="down">
<bar-charts <bar-charts :title="'申诉次数规则排名TOP20'" :id="'rule_20'" :legendName="'申诉次数'"
:title="'申诉次数规则排名TOP20'" :styleObj="{ width: '1800px', height: '320px' }" :chartsData="depChartsData" />
:id="'rule_20'"
:legendName="'申诉次数'"
:styleObj="{ width: '1800px', height: '320px' }"
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -92,14 +71,28 @@ export default { ...@@ -92,14 +71,28 @@ export default {
getData() { getData() {
this.activeName == 1 || this.activeName == 2 this.activeName == 1 || this.activeName == 2
? this.$post("/perform/attend/appeal/list", { ? this.$post("/perform/attend/appeal/list", {
processStatus: this.activeName, processStatus: this.activeName,
}).then((res) => { }).then((res) => {
console.log(res); console.log(res);
if (res.code == 1) { if (res.code == 1) {
this.tableData = res.data; this.tableData = res.data;
} }
}) })
: ""; : this.getChartsData();
},
getChartsData() {
this.$post('/perform/attend/appeal/stat', { appealTimeStart: this.dateValue, statType: 1 }).then(res => {
console.log(res)
this.depChartsData = res.data
})
this.$post('/perform/attend/appeal/stat', { appealTimeStart: this.dateValue, statType: 2 }).then(res => {
console.log(res)
this.personChartsData = res.data
})
this.$post('/perform/attend/appeal/stat', { appealTimeStart: this.dateValue, statType: 3 }).then(res => {
console.log(res)
this.ruleChartsData = res.data
})
}, },
renderTable(tableData) { renderTable(tableData) {
return ( return (
...@@ -133,6 +126,9 @@ export default { ...@@ -133,6 +126,9 @@ export default {
}, },
data() { data() {
return { return {
depChartsData: [],
personChartsData: [],
ruleChartsData: [],
/** 子表列元素 */ /** 子表列元素 */
columnSet: [ columnSet: [
{ label: "申诉Id", prop: "appealId", formatter: this.formatter }, { label: "申诉Id", prop: "appealId", formatter: this.formatter },
...@@ -246,7 +242,57 @@ export default { ...@@ -246,7 +242,57 @@ export default {
], ],
}, },
activeName: "1", activeName: "1",
dateValue: "2023-01-00 00:00:00", optionsMonths: [
{
value: "2023-01-01 00:00:00",
label: "1月",
},
{
value: "2023-02-01 00:00:00",
label: "2月",
},
{
value: "2023-03-01 00:00:00",
label: "3月",
},
{
value: "2023-04-01 00:00:00",
label: "4月",
},
{
value: "2023-05-01 00:00:00",
label: "5月",
},
{
value: "2023-06-01 00:00:00",
label: "6月",
},
{
value: "2023-07-01 00:00:00",
label: "7月",
},
{
value: "2023-08-01 00:00:00",
label: "8月",
},
{
value: "2023-09-01 00:00:00",
label: "9月",
},
{
value: "2023-10-01 00:00:00",
label: "10月",
},
{
value: "2023-11-01 00:00:00",
label: "11月",
},
{
value: "2023-12-01 00:00:00",
label: "12月",
},
],
dateValue: '2023-07-01 00:00:00',
}; };
}, },
}; };
......
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