|
|
|
|
@ -2,18 +2,51 @@
|
|
|
|
|
<div class="mainBox">
|
|
|
|
|
<div class="select-nav">
|
|
|
|
|
<div class="left-nav">
|
|
|
|
|
<div class="navText">年份:</div>
|
|
|
|
|
<el-date-picker
|
|
|
|
|
v-model="ruleForm.plannedYear"
|
|
|
|
|
type="year"
|
|
|
|
|
size="mini"
|
|
|
|
|
value-format="yyyy"
|
|
|
|
|
placeholder="请选择年份"
|
|
|
|
|
<el-form
|
|
|
|
|
:model="queryParams"
|
|
|
|
|
ref="queryForm"
|
|
|
|
|
size="small"
|
|
|
|
|
:inline="true"
|
|
|
|
|
>
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
<div class="export" @click="searchList">
|
|
|
|
|
<span>搜索</span>
|
|
|
|
|
</div>
|
|
|
|
|
<el-form-item label="年份:" prop="plannedYear">
|
|
|
|
|
<el-date-picker
|
|
|
|
|
v-model="queryParams.plannedYear"
|
|
|
|
|
type="year"
|
|
|
|
|
size="mini"
|
|
|
|
|
value-format="yyyy"
|
|
|
|
|
placeholder="请选择年份"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="月份:" prop="plannedMouth">
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="queryParams.plannedMouth"
|
|
|
|
|
multiple
|
|
|
|
|
collapse-tags
|
|
|
|
|
style="margin-left: 20px"
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
@change="multipleChange"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in options"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item class="btn-group">
|
|
|
|
|
<el-button class="btn-search" size="mini" @click="handleQuery"
|
|
|
|
|
>搜索</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button class="btn-reset" size="mini" @click="resetQuery"
|
|
|
|
|
>重置</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button class="btn-export" size="small">
|
|
|
|
|
<i class="el-icon-devops" /><span>导出excel</span>
|
|
|
|
|
</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="rightBigNav">
|
|
|
|
|
<div class="right-nav">
|
|
|
|
|
@ -97,16 +130,66 @@
|
|
|
|
|
import completePlan from "./echarts/completePlan";
|
|
|
|
|
import finishRate from "./echarts/finishRate";
|
|
|
|
|
import executionPlan from "./echarts/executionPlan";
|
|
|
|
|
import myPagination from "@/views/components/myPagination/index";
|
|
|
|
|
import executive from "./echarts/executive";
|
|
|
|
|
import { indexRegionalism } from "@/api/yingji/home.js";
|
|
|
|
|
// import myPagination from "@/views/components/myPagination/index";
|
|
|
|
|
// import executive from "./echarts/executive";
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
ruleForm: {
|
|
|
|
|
plannedYear: "",
|
|
|
|
|
queryParams: {
|
|
|
|
|
plannedYear: null,
|
|
|
|
|
plannedMouth: null,
|
|
|
|
|
},
|
|
|
|
|
options: [
|
|
|
|
|
{
|
|
|
|
|
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月",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
options1: [
|
|
|
|
|
{
|
|
|
|
|
name: "表格",
|
|
|
|
|
@ -133,35 +216,43 @@ export default {
|
|
|
|
|
completePlan,
|
|
|
|
|
finishRate,
|
|
|
|
|
executionPlan,
|
|
|
|
|
myPagination,
|
|
|
|
|
executive,
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.getHomeList();
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
mounted() {},
|
|
|
|
|
methods: {
|
|
|
|
|
searchList() {
|
|
|
|
|
this.beforeParams = { ...this.beforeParams, ...this.ruleForm };
|
|
|
|
|
this.getHomeList();
|
|
|
|
|
multipleChange(e) {
|
|
|
|
|
// console.log(e.join(','));
|
|
|
|
|
this.queryParams.plannedMouth = e.join(",");
|
|
|
|
|
},
|
|
|
|
|
getHomeList() {
|
|
|
|
|
this.load1 = true;
|
|
|
|
|
this.loadS = true;
|
|
|
|
|
indexRegionalism(this.beforeParams).then((res) => {
|
|
|
|
|
this.tableData = res.rows;
|
|
|
|
|
this.newTable = res.rows;
|
|
|
|
|
res.rows.forEach((value1, index1) => {
|
|
|
|
|
if (value1.institutionName == "苏州市") {
|
|
|
|
|
let arr1 = this.tableData.slice(index1, index1 + 1);
|
|
|
|
|
this.tableData.splice(index1, 1);
|
|
|
|
|
this.tableData.unshift(arr1[0]);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
this.load1 = false;
|
|
|
|
|
this.loadS = false;
|
|
|
|
|
});
|
|
|
|
|
handleQuery() {},
|
|
|
|
|
resetQuery() {},
|
|
|
|
|
// 获取列表数据
|
|
|
|
|
getList(){
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
// searchList() {
|
|
|
|
|
// this.beforeParams = { ...this.beforeParams, ...this.ruleForm };
|
|
|
|
|
// this.getHomeList();
|
|
|
|
|
// },
|
|
|
|
|
// getHomeList() {
|
|
|
|
|
// this.load1 = true;
|
|
|
|
|
// this.loadS = true;
|
|
|
|
|
// indexRegionalism(this.beforeParams).then((res) => {
|
|
|
|
|
// this.tableData = res.rows;
|
|
|
|
|
// this.newTable = res.rows;
|
|
|
|
|
// res.rows.forEach((value1, index1) => {
|
|
|
|
|
// if (value1.institutionName == "苏州市") {
|
|
|
|
|
// let arr1 = this.tableData.slice(index1, index1 + 1);
|
|
|
|
|
// this.tableData.splice(index1, 1);
|
|
|
|
|
// this.tableData.unshift(arr1[0]);
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
// this.load1 = false;
|
|
|
|
|
// this.loadS = false;
|
|
|
|
|
// });
|
|
|
|
|
// },
|
|
|
|
|
active(e) {
|
|
|
|
|
this.activeIndex = e;
|
|
|
|
|
},
|
|
|
|
|
@ -175,23 +266,54 @@ export default {
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.export {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
padding: 6px 19px;
|
|
|
|
|
background-color: #2378ec;
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
user-select: none;
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
span {
|
|
|
|
|
.btn-group {
|
|
|
|
|
.btn-search {
|
|
|
|
|
background: #2378ec;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-family: "Alibaba PuHuiTi";
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
font-family: Alibaba PuHuiTi;
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
border: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-reset {
|
|
|
|
|
background: #fdab5b;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
font-family: Alibaba PuHuiTi;
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
border: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-export {
|
|
|
|
|
background: #2378ec;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
font-family: Alibaba PuHuiTi;
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
border: none;
|
|
|
|
|
|
|
|
|
|
::v-deep .el-icon-devops {
|
|
|
|
|
background: url("../../assets/images/export.png") center no-repeat; // 注意此处的url，在这里引入自己的图片
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
background-size: cover;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::v-deep .el-icon-devops:before {
|
|
|
|
|
content: "替";
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
visibility: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
span{
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-button--small {
|
|
|
|
|
padding: 7px 13px !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.inputs {
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
@ -272,23 +394,11 @@ export default {
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
.select-nav {
|
|
|
|
|
// height: 38px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
// align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
.left-nav {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.navText {
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
color: #525966;
|
|
|
|
|
font-family: "Alibaba PuHuiTi";
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rightBigNav {
|
|
|
|
|
padding: 2px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
@ -323,34 +433,34 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::v-deep .el-select {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
width: 210px;
|
|
|
|
|
.el-input__inner {
|
|
|
|
|
height: 33px;
|
|
|
|
|
}
|
|
|
|
|
.el-input .el-input__suffix .el-input__suffix-inner .el-icon-arrow-up {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
// border-radius: 2px;
|
|
|
|
|
.el-input
|
|
|
|
|
.el-input__suffix
|
|
|
|
|
.el-input__suffix-inner
|
|
|
|
|
.el-icon-arrow-up::before {
|
|
|
|
|
content: "";
|
|
|
|
|
background: url(../../assets/images/down2.png) center center no-repeat;
|
|
|
|
|
background-size: cover;
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 10px;
|
|
|
|
|
height: 7px;
|
|
|
|
|
// top: 50%;
|
|
|
|
|
// left: 50%;
|
|
|
|
|
// transform: translate(-50%, -50%);
|
|
|
|
|
transform: rotate(180deg);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// ::v-deep .el-select {
|
|
|
|
|
// background-color: transparent;
|
|
|
|
|
// width: 210px;
|
|
|
|
|
// .el-input__inner {
|
|
|
|
|
// height: 33px;
|
|
|
|
|
// }
|
|
|
|
|
// .el-input .el-input__suffix .el-input__suffix-inner .el-icon-arrow-up {
|
|
|
|
|
// display: flex;
|
|
|
|
|
// align-items: center;
|
|
|
|
|
// justify-content: center;
|
|
|
|
|
// }
|
|
|
|
|
// // border-radius: 2px;
|
|
|
|
|
// .el-input
|
|
|
|
|
// .el-input__suffix
|
|
|
|
|
// .el-input__suffix-inner
|
|
|
|
|
// .el-icon-arrow-up::before {
|
|
|
|
|
// content: "";
|
|
|
|
|
// background: url(../../assets/images/down2.png) center center no-repeat;
|
|
|
|
|
// background-size: cover;
|
|
|
|
|
// position: absolute;
|
|
|
|
|
// width: 10px;
|
|
|
|
|
// height: 7px;
|
|
|
|
|
// // top: 50%;
|
|
|
|
|
// // left: 50%;
|
|
|
|
|
// // transform: translate(-50%, -50%);
|
|
|
|
|
// transform: rotate(180deg);
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
.bodyBox {
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
laozt
1 year ago