664 lines
16 KiB
Vue
664 lines
16 KiB
Vue
<template>
|
||
<div>
|
||
<container title="月度工作计划">
|
||
<div class="wrap">
|
||
<el-row class="content1">
|
||
<el-col :span="24">
|
||
<div style="height: 270px; margin: 14px 0 8px">
|
||
<div style="height: 100%; width: 100%" ref="chart"></div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="24" style="margin: 20px 0">
|
||
<div style="text-align: right; margin-right: 30px">
|
||
<el-date-picker
|
||
style="width: 30%"
|
||
v-model="value"
|
||
value-format="yyyy-MM"
|
||
type="month"
|
||
size="mini"
|
||
placeholder="选择月"
|
||
:clearable="false"
|
||
:editable="false"
|
||
@change="initLine"
|
||
>
|
||
</el-date-picker>
|
||
</div>
|
||
<div style="height: 270px; margin: 14px 0 8px">
|
||
<div style="height: 100%; width: 100%" ref="chart2"></div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="24" style="margin-bottom: 1px">
|
||
<el-row
|
||
style="
|
||
height: 42px;
|
||
line-height: 42px;
|
||
background: rgba(0, 255, 255, 0.3);
|
||
"
|
||
>
|
||
<!-- <el-col style="text-align: center" :span="3">序号</el-col> -->
|
||
<el-col style="text-align: center" :span="5">名称</el-col>
|
||
<el-col style="text-align: center" :span="5">部门</el-col>
|
||
<el-col style="text-align: center" :span="7">时间</el-col>
|
||
<el-col style="text-align: center" :span="4">完成情况</el-col>
|
||
</el-row>
|
||
</el-col>
|
||
<vue-seamless-scroll
|
||
:data="listData"
|
||
class="warp-scroll"
|
||
:class-option="{
|
||
singleHeight: 43,
|
||
}"
|
||
>
|
||
<ul class="item">
|
||
<li v-for="item in listData" :key="item.id">
|
||
<el-row>
|
||
<!-- <el-col style="text-align: center" :span="3">{{
|
||
item.id
|
||
}}</el-col> -->
|
||
<el-col
|
||
style="text-align: center"
|
||
:title="item.planName"
|
||
:span="5"
|
||
>{{ item.planName }}</el-col
|
||
>
|
||
<el-col
|
||
style="text-align: center"
|
||
:title="item.deptName"
|
||
:span="5"
|
||
>{{ item.deptName }}</el-col
|
||
>
|
||
<el-col style="text-align: center" :span="7">{{
|
||
item.todayDate
|
||
}}</el-col>
|
||
<el-col style="text-align: center" :span="4">
|
||
<section class="box">
|
||
<span
|
||
v-if="item.completed == '已完成'"
|
||
style="
|
||
color: #6fd1b4;
|
||
font-size: 25px;
|
||
margin-right: 3px;
|
||
"
|
||
>·</span
|
||
>
|
||
<span
|
||
v-else
|
||
style="
|
||
color: #f64f58;
|
||
font-size: 25px;
|
||
margin-right: 3px;
|
||
"
|
||
>·</span
|
||
>
|
||
<span v-if="item.completed == '已完成'">已完成</span>
|
||
<span v-else>未完成</span>
|
||
</section>
|
||
</el-col>
|
||
</el-row>
|
||
</li>
|
||
</ul>
|
||
</vue-seamless-scroll>
|
||
</el-row>
|
||
</div>
|
||
</container>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import rocketTit from "../components/rocketTit/index.vue";
|
||
import container from "./components/container/index.vue";
|
||
import bigScreenTabs from "../components/bigScreenTabs/index.vue";
|
||
import progressBar from "@/views/bigScreen/components/progress/index.vue";
|
||
import colorList from "@/utils/colorPalette";
|
||
import vueSeamlessScroll from "vue-seamless-scroll";
|
||
|
||
// import {Liquid} from '@antv/g2plot';
|
||
// import resize from '../../dashboard/mixins/resize'
|
||
import echarts from "echarts";
|
||
require("echarts/theme/macarons"); // echarts theme
|
||
export default {
|
||
// mixins: [resize],
|
||
name: "left1",
|
||
components: {
|
||
rocketTit,
|
||
container,
|
||
bigScreenTabs,
|
||
progressBar,
|
||
vueSeamlessScroll,
|
||
},
|
||
data() {
|
||
return {
|
||
chart: null,
|
||
value: new Date().getFullYear() + "-" + new Date().getMonth() + 1,
|
||
chart2: null,
|
||
data: [
|
||
{ value: 154, name: "类别一" },
|
||
{ value: 775, name: "类别二" },
|
||
{ value: 679, name: "类别三" },
|
||
{ value: 679, name: "类别四" },
|
||
{ value: 679, name: "类别五" },
|
||
{ value: 679, name: "类别六" },
|
||
{ value: 679, name: "类别七" },
|
||
{ value: 679, name: "类别八" },
|
||
],
|
||
colorList,
|
||
listData: [],
|
||
scrollList: [
|
||
{
|
||
id: 1,
|
||
name: "计划一",
|
||
level: "一级",
|
||
status: 1,
|
||
},
|
||
{
|
||
id: 2,
|
||
name: "计划二",
|
||
level: "二级",
|
||
status: 3,
|
||
},
|
||
{
|
||
id: 3,
|
||
name: "计划三",
|
||
level: "三级",
|
||
status: 3,
|
||
},
|
||
{
|
||
id: 4,
|
||
name: "计划四",
|
||
level: "二级",
|
||
status: 1,
|
||
},
|
||
{
|
||
id: 5,
|
||
name: "计划五",
|
||
level: "三级",
|
||
status: 3,
|
||
},
|
||
],
|
||
};
|
||
},
|
||
// computed:{
|
||
// value(){
|
||
// return new Date().getFullYear() + "-" + new Date().getMonth() + 1,
|
||
// }
|
||
// },
|
||
mounted() {
|
||
this.$nextTick(() => {
|
||
this.initChart();
|
||
this.initLine();
|
||
});
|
||
},
|
||
methods: {
|
||
getData() {
|
||
this.request({
|
||
url: "/hx/informationManagement/getHxPlanCompletedListPic",
|
||
method: "get",
|
||
}).then(({ data }) => {
|
||
this.listData = data;
|
||
});
|
||
},
|
||
initChart() {
|
||
this.request({
|
||
url: "/hx/informationManagement/getHxPlanCompletedPic",
|
||
method: "get",
|
||
}).then(({ data }) => {
|
||
this.chart = echarts.init(this.$refs.chart);
|
||
this.setOptions(data);
|
||
});
|
||
},
|
||
setOptions(resData) {
|
||
let month = [];
|
||
let total = [];
|
||
let rate = [];
|
||
for (let i = 0; i < resData.length; i++) {
|
||
const item = resData[i];
|
||
month.push(item.month);
|
||
total.push(item.data.total);
|
||
rate.push(item.data.rate);
|
||
}
|
||
this.chart.setOption({
|
||
tooltip: {
|
||
trigger: "axis",
|
||
// formatter: '{a1}<br/>{b1}：{c1}',
|
||
},
|
||
legend: {
|
||
data: ["数量", "完成率"],
|
||
textStyle: {
|
||
color: "#fff", //legend字体颜色
|
||
},
|
||
// selectedMode: false,
|
||
},
|
||
grid: {
|
||
containLabel: true,
|
||
left: 20,
|
||
right: 10,
|
||
top: 30,
|
||
bottom: 50,
|
||
},
|
||
xAxis: {
|
||
data: month,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "rgb(255, 255, 255)",
|
||
},
|
||
},
|
||
},
|
||
// dataZoom: {
|
||
// type: 'slider',
|
||
// start: 0,
|
||
// end: this.dataZoomEnd(month.length, 5),
|
||
// textStyle: {
|
||
// color: '#fff',
|
||
// },
|
||
// },
|
||
dataZoom: [
|
||
{
|
||
type: "slider",
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
startValue: this.dataZoomStart(month.length, 4, "start"),
|
||
endValue: this.dataZoomStart(month.length, 4, "end"),
|
||
},
|
||
{
|
||
type: "inside",
|
||
},
|
||
],
|
||
color: ["#ccc", "red"],
|
||
yAxis: [
|
||
{
|
||
name: "件",
|
||
splitLine: {
|
||
show: true,
|
||
// 改变轴线颜色
|
||
lineStyle: {
|
||
// 使用深浅的间隔色
|
||
color: ["rgba(255, 255, 255,.5)"],
|
||
},
|
||
},
|
||
axisLabel: {
|
||
formatter: "{value}",
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "rgb(255, 255, 255)",
|
||
},
|
||
},
|
||
},
|
||
{
|
||
type: "value",
|
||
min: 0,
|
||
max: 100,
|
||
interval: 20,
|
||
axisLabel: {
|
||
formatter: "{value} %",
|
||
},
|
||
splitLine: {
|
||
show: false, //不显示网格线
|
||
},
|
||
splitArea: {
|
||
show: false, //不显示网格区域
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "rgb(255, 255, 255)",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
// {
|
||
// name: "完成率",
|
||
// type: "bar",
|
||
// z: "-1",
|
||
// barGap: "-75%",
|
||
// barWidth: 30,
|
||
// itemStyle: {
|
||
// color: "rgba(85, 197, 162, .3)",
|
||
// },
|
||
// yAxisIndex: 1,
|
||
// data: rate,
|
||
// },
|
||
{
|
||
name: "完成率",
|
||
type: "line",
|
||
z: "-1",
|
||
itemStyle: {
|
||
color: "#ffee8a",
|
||
},
|
||
yAxisIndex: 1,
|
||
data: rate,
|
||
},
|
||
{
|
||
name: "数量",
|
||
type: "bar",
|
||
barWidth: 15,
|
||
position: [0, 0],
|
||
itemStyle: {
|
||
color: "rgba(90, 216, 166, 0.85)",
|
||
},
|
||
data: total,
|
||
},
|
||
// {
|
||
// name: '目标',
|
||
// type: 'scatter',
|
||
// symbol: 'rect',
|
||
// symbolSize: [30, 4],
|
||
// symbolOffset: [3, 0],
|
||
// position: [0, 0],
|
||
// itemStyle: {
|
||
// color: '#F6D97E',
|
||
// },
|
||
// data: [20, 30, 45, 20, 20, 30, 20, 30, 40, 20, 90, 90],
|
||
// },
|
||
],
|
||
});
|
||
},
|
||
initLine() {
|
||
this.request({
|
||
url: "/hx/informationManagement/getHxPlanCompletedByMonthPic",
|
||
method: "get",
|
||
params: {
|
||
month: this.value,
|
||
},
|
||
}).then(({ data }) => {
|
||
this.chart2 = echarts.init(this.$refs.chart2);
|
||
this.setOptions2(data);
|
||
});
|
||
},
|
||
setOptions2(resData) {
|
||
let deptName = [];
|
||
let total = [];
|
||
let rate = [];
|
||
for (let i = 0; i < resData.length; i++) {
|
||
const item = resData[i];
|
||
deptName.push(item.deptName);
|
||
total.push(item.total);
|
||
rate.push(item.rate);
|
||
}
|
||
|
||
this.chart2.setOption({
|
||
tooltip: {
|
||
trigger: "axis",
|
||
// formatter: '{a1}<br/>{b1}：{c1}',
|
||
},
|
||
legend: {
|
||
data: ["数量", "完成率"],
|
||
textStyle: {
|
||
color: "#fff", //legend字体颜色
|
||
},
|
||
// selectedMode: false,
|
||
},
|
||
grid: {
|
||
containLabel: true,
|
||
left: 20,
|
||
right: 10,
|
||
top: 30,
|
||
bottom: 50,
|
||
},
|
||
xAxis: {
|
||
data: deptName,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "rgb(255, 255, 255)",
|
||
},
|
||
},
|
||
},
|
||
// dataZoom: {
|
||
// type: "slider",
|
||
// start: 0,
|
||
// end: this.dataZoomEnd(deptName.length, 5),
|
||
// textStyle: {
|
||
// color: "#fff",
|
||
// },
|
||
// },
|
||
dataZoom: [
|
||
{
|
||
type: "slider",
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
startValue: this.dataZoomStart(deptName.length, 4, "start"),
|
||
endValue: this.dataZoomStart(deptName.length, 4, "end"),
|
||
},
|
||
{
|
||
type: "inside",
|
||
},
|
||
],
|
||
color: ["#ccc", "red"],
|
||
yAxis: [
|
||
{
|
||
name: "个",
|
||
splitLine: {
|
||
show: true,
|
||
// 改变轴线颜色
|
||
lineStyle: {
|
||
// 使用深浅的间隔色
|
||
color: ["rgba(255, 255, 255,.5)"],
|
||
},
|
||
},
|
||
axisLabel: {
|
||
formatter: "{value}",
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "rgb(255, 255, 255)",
|
||
},
|
||
},
|
||
},
|
||
{
|
||
type: "value",
|
||
min: 0,
|
||
max: 100,
|
||
interval: 20,
|
||
axisLabel: {
|
||
formatter: "{value} %",
|
||
},
|
||
splitLine: {
|
||
show: false, //不显示网格线
|
||
},
|
||
splitArea: {
|
||
show: false, //不显示网格区域
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "rgb(255, 255, 255)",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
// {
|
||
// name: '目标',
|
||
// type: 'bar',
|
||
// z: '-1',
|
||
// barGap: '-75%',
|
||
// barWidth: 30,
|
||
// itemStyle: {
|
||
// color: 'rgba(85, 197, 162, .3)',
|
||
// },
|
||
// data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95],
|
||
// },
|
||
{
|
||
name: "数量",
|
||
type: "bar",
|
||
barGap: "-100%",
|
||
barWidth: 30,
|
||
position: [0, 0],
|
||
data: total,
|
||
itemStyle: {
|
||
color: {
|
||
type: "linear", // 线性渐变
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: "#9AF0D5",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#61DDAA",
|
||
},
|
||
],
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: "完成率",
|
||
type: "scatter",
|
||
symbol: "rect",
|
||
symbolSize: [30, 4],
|
||
symbolOffset: [0, 0],
|
||
position: [0, 0],
|
||
itemStyle: {
|
||
color: "#F64F58",
|
||
},
|
||
yAxisIndex: 1,
|
||
data: rate,
|
||
},
|
||
],
|
||
});
|
||
},
|
||
},
|
||
created() {
|
||
const month = new Date().getMonth() + 1;
|
||
let prevMonth = "";
|
||
if (month === 1) {
|
||
prevMonth = "12";
|
||
} else if (month <= 10) {
|
||
prevMonth = `0${month - 1}`;
|
||
} else {
|
||
prevMonth = `${month - 1}`;
|
||
}
|
||
this.value = `${new Date().getFullYear()}-${prevMonth}`;
|
||
this.getData();
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
::v-deep .el-progress-bar__inner {
|
||
background: linear-gradient(180deg, #fad961 0%, #f76b1c 100%) !important;
|
||
}
|
||
|
||
::v-deep .el-date-editor {
|
||
border-radius: 0;
|
||
box-shadow: none !important;
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
vertical-align: middle;
|
||
color: #fff;
|
||
background-color: transparent;
|
||
.el-range-input,
|
||
.el-range-separator {
|
||
color: #fff;
|
||
}
|
||
.el-range-editor.is-active {
|
||
border-color: #fff !important;
|
||
}
|
||
|
||
input {
|
||
background-color: transparent;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.warp-scroll {
|
||
height: 215px;
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
overflow: hidden;
|
||
ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0 auto;
|
||
li,
|
||
a {
|
||
display: block;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 15px;
|
||
}
|
||
li {
|
||
display: block;
|
||
height: 42px;
|
||
line-height: 42px;
|
||
background: #2a437d;
|
||
opacity: 0.6;
|
||
// box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
|
||
margin-bottom: 1px;
|
||
img {
|
||
vertical-align: sub;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
|
||
.content1 {
|
||
// height: 200px;
|
||
height: 100%;
|
||
|
||
.chart1 {
|
||
margin: 0 auto;
|
||
width: 100%;
|
||
height: 192px;
|
||
background: transparent;
|
||
}
|
||
}
|
||
.box {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.num {
|
||
font-size: 30px;
|
||
font-family: Roboto-BlackItalic, Roboto;
|
||
font-weight: normal;
|
||
color: #91d5fe;
|
||
vertical-align: sub;
|
||
// margin-right: 3px;
|
||
}
|
||
|
||
.content2 {
|
||
padding: 20px;
|
||
flex: 1;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.chart2 {
|
||
height: 100%;
|
||
}
|
||
|
||
.tit {
|
||
font-size: 16px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #ffffff;
|
||
line-height: 22px;
|
||
position: relative;
|
||
padding-left: 15px;
|
||
}
|
||
.tit::after {
|
||
content: "";
|
||
display: block;
|
||
position: absolute;
|
||
top: 3px;
|
||
left: 0px;
|
||
width: 4px;
|
||
height: 16px;
|
||
background: #00ffff;
|
||
}
|
||
}
|
||
</style>
|