Commit 3c40b99c authored by 姬鋆屾's avatar 姬鋆屾

tui

parent d6057f55
<template>
<div>
<div :id="id" :style="styleObj"></div>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: "",
},
id: {
type: String,
default: "",
},
legendName: {
type: String,
default: "",
},
styleObj: {
type: Object,
default: () => {},
},
},
data() {
return {};
},
watch: {
title(val) {
console.log(val);
this.drawLine();
},
},
mounted() {
this.drawLine();
},
methods: {
drawLine() {
// 基于dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById(this.id));
// 绘制图表
myChart.setOption({
title: {
text: this.title,
left: this.legendName == "旷工率" ? "center" : "left",
textStyle: {
fontSize: this.legendName == "旷工率" ? 24 : 18,
},
},
color:'#6e98ed',
legend: {
orient: "horizontal",
right: "50px",
top: "0",
itemWidth: 20,
itemHeight: 10,
icon: "roundRect",
textStyle: {
fontSize: "14px",
color: "#000",
},
},
tooltip: {},
xAxis: {
data:
this.title == "申诉次数部门排名TOP20"
? [
"部门1",
"部门2",
"部门3",
"部门4",
"部门5",
"部门6",
"部门7",
"部门8",
"部门9",
"部门10",
"部门11",
"部门12",
"部门13",
"部门14",
"部门15",
"部门16",
"部门17",
"部门18",
"部门19",
"部门20",
]
: this.title == "申诉次数个人排名TOP20"
? [
"个人1",
"个人2",
"个人3",
"个人4",
"个人5",
"个人6",
"个人7",
"个人8",
"个人9",
"个人10",
"个人11",
"个人12",
"个人13",
"个人14",
"个人15",
"个人16",
"个人17",
"个人18",
"个人19",
"个人20",
]
: [
"规则1",
"规则2",
"规则3",
"规则4",
"规则5",
"规则6",
"规则7",
"规则8",
"规则9",
"规则10",
"规则11",
"规则12",
"规则13",
"规则14",
"规则15",
"规则16",
"规则17",
"规则18",
"规则19",
"规则20",
],
},
grid: {
left: "5%",
right: "4%",
bottom: "2%",
containLabel: true,
},
// color:[ "#61a0a8",],
yAxis: {},
series: [
{
name: this.legendName,
type: "bar",
data: [
1200,
1100,
900,
800,
1122,
1234,
1050,
1155,
1120,
1136,
1110,
1110,
1120,
1020,
1212,
1233,
1111,
1000,
1111,
1024,
],
itemStyle: {
// normal: {
// //这里是重点
// color: function(params) {
// //注意,如果颜色太少的话,后面颜色不会自动循环,最好多定义几个颜色
// var colorList = ["#6e98ed"];
// return colorList[params.dataIndex];
// },
// },
lineStyle: {
type: "dotted", //'dotted'虚线 'solid'实线
},
},
},
],
});
},
},
};
</script>
<style lang="less" scoped></style>
<template>
<div class="page">
<LayoutTable :data="tableData" :config="tableConfig">
</LayoutTable>
<drawer-show ref="drawerform" @ok="getData" />
</div>
</template>
<script>
/** 表单弹出框模式需引入 */
import drawerShow from "./drawershow";
import table from "@/assets/mixins/table";
export default {
name: "PerformAttendAppealList",
components: {
drawerShow
},
mixins: [table],
created() {
},
methods: {
renderTable(tableData) {
return (
<el-table stripe data={tableData} class="total-table">
{this.columnSet.map((item) => this.renderTableColumn(item))}
</el-table>
);
},
renderTableColumn(options) {
return (
<el-table-column
prop={options.prop}
label={options.label}
width={options.width}
formatter={options.formatter}
>
</el-table-column>
);
},
/** 重写新增方法 */
toAdd(row) {
this.$refs.drawerform.add(row);
},
/** 重写编辑方法 */
toEdit(row) {
this.$refs.drawerform.edit(row);
},
/** 重写查看方法 */
toView(row) {
this.$refs.drawerform.view(row);
},
},
data() {
return {
/** 子表列元素 */
columnSet:[
{label: "申诉Id", prop: "appealId", formatter: this.formatter},
{label: "文件名称", prop: "fileName"},
{label: "文件地址", prop: "filePath"},
],
config: {
isshowTabPane:false,
search: [
],
columns: [
{type: "selection", width: 60},
{type: "index",label: "序号",width: 50},
{label: "姓名", prop: "staffName"},
{label: "窗口工号", prop: "workNum"},
{label: "所属部门", prop: "deptName"},
{label: "违规类型", prop: "ruleName"},
{label: "绩效规则", prop: "ruleName"},
{label: "扣分方式", prop: "subMethod",formatter: this.formatter},
{label: "扣分时间", prop: "attendanceDate" , formatter: this.formatterDate },
{label: "扣分分值", prop: "score", formatter: this.formatter},
{label: "申诉时间", prop: "appealTime", formatter: this.formatterDate},
{label: "处理状态", prop: "processStatus",formatter: this.formatter},
/* {label: "绩效记录申诉附件信息",
width: 120,
prop: "subColumns",
formatter: (row) => {
let widthsize = this.columnSet.reduce((pre, cur) => {
return pre + Number(cur.width);
}, 50);
return (
<el-popover placement="right" width={widthsize} trigger="click">
{this.renderTable(row.performAttendAppealFilesList)}
<el-button type="text" slot="reference">详细</el-button>
</el-popover>
);
},
},*/
{
label: "操作",
width: 240,
formatter: row => {
return (
<table-buttons noAdd row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} />
);
}
}
]
}
};
}
};
</script>
<template> <template>
<div class="page"> <div class="page">
<LayoutTable :data="tableData" :config="tableConfig"> <el-tabs v-model="activeName">
<el-tab-pane label="未处理" name="1">
<LayoutTable :data="tableData" notAdd notDel :config="tableConfig">
</LayoutTable> </LayoutTable>
</el-tab-pane>
<el-tab-pane label="已处理" name="2">
<LayoutTable :data="tableData" notAdd notDel :config="tableConfig">
</LayoutTable>
</el-tab-pane>
<el-tab-pane label="数据分析" name="3">
<div class="content">
<div class="search_box">
<div class="search">
<el-select
v-model="dateValue"
placeholder="请选择"
style="margin: 0 10px;"
>
<el-option
v-for="item in optionsMonths"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-button type="primary">搜索</el-button>
</div>
</div>
<div class="data_box">
<div class="top">
<div class="box">
<bar-charts
:title="'申诉次数部门排名TOP20'"
:id="'dept_20'"
:legendName="'申诉次数'"
:styleObj="{ width: '800px', height: '360px' }"
/>
</div>
<div class="box">
<bar-charts
:title="'申诉次数个人排名TOP20'"
:id="'person_20'"
:legendName="'申诉次数'"
:styleObj="{ width: '800px', height: '360px' }"
/>
</div>
</div>
<div class="down">
<bar-charts
:title="'申诉次数规则排名TOP20'"
:id="'rule_20'"
:legendName="'申诉次数'"
:styleObj="{ width: '1800px', height: '320px' }"
/>
</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
<!-- <bar-charts
:title="'部门扣分排名TOP10'"
:id="'koufen_10'"
:legendName="'部门扣分分值'"
:styleObj="{ width: '100%', height: '300px' }"
/> -->
<drawer-show ref="drawerform" @ok="getData" /> <drawer-show ref="drawerform" @ok="getData" />
</div> </div>
</template> </template>
<script> <script>
/** 表单弹出框模式需引入 */ /** 表单弹出框模式需引入 */
import drawerShow from "./drawershow"; import drawerShow from "./drawershow";
import table from "@/assets/mixins/table"; import table from "@/assets/mixins/table";
export default { import BarCharts from "./components/BarCharts.vue";
export default {
name: "PerformAttendAppealList", name: "PerformAttendAppealList",
components: { components: {
drawerShow drawerShow,
}, BarCharts,
mixins: [table],
created() {
}, },
mixins: [table],
created() {},
methods: { methods: {
renderTable(tableData) { renderTable(tableData) {
return ( return (
...@@ -35,8 +98,7 @@ ...@@ -35,8 +98,7 @@
label={options.label} label={options.label}
width={options.width} width={options.width}
formatter={options.formatter} formatter={options.formatter}
> ></el-table-column>
</el-table-column>
); );
}, },
/** 重写新增方法 */ /** 重写新增方法 */
...@@ -51,43 +113,52 @@ ...@@ -51,43 +113,52 @@
toView(row) { toView(row) {
this.$refs.drawerform.view(row); this.$refs.drawerform.view(row);
}, },
}, },
data() { data() {
return { return {
/** 子表列元素 */ /** 子表列元素 */
columnSet:[ columnSet: [
{label: "申诉Id", prop: "appealId", formatter: this.formatter}, { label: "申诉Id", prop: "appealId", formatter: this.formatter },
{label: "文件名称", prop: "fileName"}, { label: "文件名称", prop: "fileName" },
{label: "文件地址", prop: "filePath"}, { label: "文件地址", prop: "filePath" },
], ],
config: { config: {
isshowTabPane:false, isshowTabPane: false,
search: [ search: [],
],
columns: [ columns: [
{type: "selection", width: 60}, { type: "selection", width: 60 },
{type: "index",label: "序号",width: 50}, { type: "index", label: "序号", width: 50 },
{label: "姓名", prop: "staffName"}, { label: "姓名", prop: "staffName" },
{label: "窗口工号", prop: "workNum"}, { label: "窗口工号", prop: "workNum" },
{label: "所属部门", prop: "deptName"}, { label: "所属部门", prop: "deptName" },
{label: "违规类型", prop: "ruleName"}, { label: "违规类型", prop: "ruleName" },
{label: "绩效规则", prop: "ruleName"}, { label: "绩效规则", prop: "ruleName" },
{label: "扣分方式", prop: "subMethod",formatter: this.formatter}, { label: "扣分方式", prop: "subMethod", formatter: this.formatter },
{label: "扣分时间", prop: "attendanceDate" , formatter: this.formatterDate }, {
label: "扣分时间",
{label: "扣分分值", prop: "score", formatter: this.formatter}, prop: "attendanceDate",
formatter: this.formatterDate,
},
{ label: "扣分分值", prop: "score", formatter: this.formatter },
{label: "申诉时间", prop: "appealTime", formatter: this.formatterDate}, {
label: "申诉时间",
prop: "appealTime",
formatter: this.formatterDate,
},
{label: "处理状态", prop: "processStatus",formatter: this.formatter}, {
label: "处理状态",
prop: "processStatus",
formatter: this.formatter,
},
/* {label: "绩效记录申诉附件信息", /* {label: "绩效记录申诉附件信息",
width: 120, width: 120,
...@@ -107,15 +178,109 @@ ...@@ -107,15 +178,109 @@
{ {
label: "操作", label: "操作",
width: 240, width: 240,
formatter: row => { formatter: (row) => {
return ( return (
<table-buttons noAdd row={row} onEdit={this.toEdit} onView={this.toView} onDel={this.toDel} /> <table-buttons
noAdd
row={row}
onEdit={this.toEdit}
onView={this.toView}
onDel={this.toDel}
/>
); );
},
},
],
},
activeName: "1",
optionsMonths: [
{
value: "1",
label: "1月",
},
{
value: "2",
label: "2月",
},
{
value: "3",
label: "3月",
},
{
value: "4",
label: "4月",
},
{
value: "5",
label: "5月",
},
{
value: "6",
label: "6月",
},
{
value: "7",
label: "7月",
},
{
value: "8",
label: "8月",
},
{
value: "9",
label: "9月",
},
{
value: "10",
label: "10月",
},
{
value: "11",
label: "11月",
},
{
value: "12",
label: "12月",
},
],
dateValue: "1",
};
},
};
</script>
<style lang="less" scoped>
.page {
width: 100%;
height: 100%;
overflow: hidden;
/deep/.el-tabs__item {
width: 120px;
font-size: 18px;
text-align: center;
} }
.content {
width: 100%;
height: 730px;
overflow: hidden;
.search_box {
width: 100%;
height: auto;
text-align: right;
} }
] .data_box {
width: 100%;
height: 100%;
.top {
width: 100%;
height: 380px;
display: flex;
justify-content: space-between;
.box {
width: 49%;
height: 100%;
} }
};
} }
}; }
</script> }
}
</style>
<template>
<div>qwe</div>
</template>
<script>
export default {
name: "AdminList",
data() {
return {};
},
mounted() {},
methods: {},
};
</script>
<style lang="less" scoped></style>
...@@ -50,18 +50,19 @@ export default { ...@@ -50,18 +50,19 @@ export default {
fontSize: this.legendName == "旷工率" ? 24 : 18, fontSize: this.legendName == "旷工率" ? 24 : 18,
}, },
}, },
// legend: { color:'#6e98ed',
// orient: "horizontal", legend: {
// right: "10px", orient: "horizontal",
// top: "0", right: "50px",
// itemWidth: 20, top: "0",
// itemHeight: 10, itemWidth: 20,
// icon: "roundRect", itemHeight: 10,
// textStyle: { icon: "roundRect",
// fontSize: "14px", textStyle: {
// color: "#000", fontSize: "14px",
// }, color: "#000",
// }, },
},
tooltip: {}, tooltip: {},
xAxis: { xAxis: {
data: ["部门1", "部门2", "部门3", "部门4", "部门5", "部门6"], data: ["部门1", "部门2", "部门3", "部门4", "部门5", "部门6"],
...@@ -80,22 +81,7 @@ export default { ...@@ -80,22 +81,7 @@ export default {
type: "bar", type: "bar",
data: [5, 20, 36, 10, 10, 20], data: [5, 20, 36, 10, 10, 20],
itemStyle: { itemStyle: {
normal: {
//这里是重点
color: function(params) {
//注意,如果颜色太少的话,后面颜色不会自动循环,最好多定义几个颜色
var colorList = [
"#c23531",
"#2f4554",
"#61a0a8",
"#d48265",
"#91c7ae",
"#749f83",
"#ca8622",
];
return colorList[params.dataIndex];
},
},
lineStyle: { lineStyle: {
type: "dotted", //'dotted'虚线 'solid'实线 type: "dotted", //'dotted'虚线 'solid'实线
}, },
......
...@@ -56,7 +56,7 @@ export default { ...@@ -56,7 +56,7 @@ export default {
}, },
}, },
tooltip: {}, tooltip: {},
color:[ "#61a0a8",], color:'#6e98ed',
xAxis: { xAxis: {
type: "category", type: "category",
data: ["部门1", "部门2", "部门3", "部门4", "部门5", "部门6"], data: ["部门1", "部门2", "部门3", "部门4", "部门5", "部门6"],
......
...@@ -55,6 +55,7 @@ export default { ...@@ -55,6 +55,7 @@ export default {
color: "#000", color: "#000",
}, },
}, },
// color:'#6e98ed',
tooltip: { tooltip: {
trigger: "item", trigger: "item",
}, },
......
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