动态高度适配

zhangtao
laozt 1 year ago
parent 22095ecff9
commit e2c297a3d2

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 72 KiB

@ -43,7 +43,7 @@
</div> </div>
</div> </div>
<div class="right-view"> <div class="right-view">
<header> <header ref="rightView">
<el-dropdown trigger="click" @visible-change="getDrop"> <el-dropdown trigger="click" @visible-change="getDrop">
<div> <div>
<div class="avatar"></div> <div class="avatar"></div>

@ -104,8 +104,8 @@
<el-table-column <el-table-column
prop="enterpriseId" prop="enterpriseId"
label="统一社会信用代码" label="统一社会信用代码"
width="200"
header-align="center" header-align="center"
width="220"
/> />
<el-table-column <el-table-column
prop="district" prop="district"
@ -122,7 +122,6 @@
<el-table-column <el-table-column
prop="supervisionLarge" prop="supervisionLarge"
label="行业监管大类" label="行业监管大类"
width="180"
header-align="center" header-align="center"
show-overflow-tooltip show-overflow-tooltip
> >
@ -132,13 +131,13 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="安全风险等级" align="center" prop="riskLevel" /> <el-table-column label="安全风险等级" align="center" prop="riskLevel" />
<el-table-column label="标准化等级" align="center" prop="standLevel" /> <el-table-column label="标准化等级" align="center" prop="standLevel" />
<el-table-column <el-table-column
label="上次检查时间" label="上次检查时间"
align="center" align="center"
prop="examineEndTime" prop="examineEndTime"
width="120"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ <span>{{

@ -8,83 +8,86 @@
--> -->
<template> <template>
<div class="container-main" ref="main"> <div class="container-main" ref="main">
<div class="enforce-the-law-title"> <div ref="searchBox">
<div class="filtrate-condition"> <div class="enforce-the-law-title">
<el-form <div class="filtrate-condition">
:model="queryParams" <el-form
ref="queryForm" :model="queryParams"
size="small" ref="queryForm"
:inline="true" size="small"
> :inline="true"
<el-form-item label="年份" prop=""> >
<el-date-picker <el-form-item label="年份" prop="">
v-model="form.plannedYear" <el-date-picker
type="year" v-model="form.plannedYear"
placeholder="请选择" type="year"
value-format="yyyy" placeholder="请选择"
size="small" value-format="yyyy"
/> size="small"
</el-form-item>
<el-form-item label="月份" prop="plannedMonth">
<el-select
v-model="plannedMonth"
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> <el-form-item label="月份" prop="plannedMonth">
<el-form-item label="企业名称" prop=""> <el-select
<el-input v-model="plannedMonth"
v-model="form.enterpriseName" multiple
size="small" collapse-tags
placeholder="请输入企业名称" style="margin-left: 20px"
/> placeholder="请选择"
</el-form-item> @change="multipleChange"
<el-form-item label="行政区划" prop=""> >
<executive <el-option
@quhua="quhua" v-for="item in options"
@quhuadizhi="quhuadizhi" :key="item.value"
:none="true" :label="item.label"
ref="executive" :value="item.value"
></executive> />
</el-form-item> </el-select>
</el-form> </el-form-item>
</div> <el-form-item label="企业名称" prop="">
</div> <el-input
<div class="enforce-the-law-title"> v-model="form.enterpriseName"
<div class="my-checkbox"> size="small"
<el-checkbox-group v-model="checkList" @change="setmealSelect"> placeholder="请输入企业名称"
<el-checkbox label="">全部</el-checkbox> />
<el-checkbox label="1">已检查</el-checkbox> </el-form-item>
<el-checkbox label="0">未检查</el-checkbox> <el-form-item label="行政区划" prop="">
</el-checkbox-group> <executive
</div> @quhua="quhua"
<div style="display: flex"> @quhuadizhi="quhuadizhi"
<div class="export" @click="searchList" style="margin-right: 10px"> :none="true"
<span>搜索</span> ref="executive"
></executive>
</el-form-item>
</el-form>
</div> </div>
<div </div>
class="export" <div class="enforce-the-law-title">
@click="chongzhiList" <div class="my-checkbox">
style="margin-right: 10px; background-color: #fdab5b" <el-checkbox-group v-model="checkList" @change="setmealSelect">
> <el-checkbox label="">全部</el-checkbox>
<span>重置</span> <el-checkbox label="1">已检查</el-checkbox>
<el-checkbox label="0">未检查</el-checkbox>
</el-checkbox-group>
</div> </div>
<div class="export" @click="exportFile"> <div style="display: flex">
<img src="@/assets/images/export.png" alt="" /> <div class="export" @click="searchList" style="margin-right: 10px">
<span>导出excel</span> <span>搜索</span>
</div>
<div
class="export"
@click="chongzhiList"
style="margin-right: 10px; background-color: #fdab5b"
>
<span>重置</span>
</div>
<div class="export" @click="exportFile">
<img src="@/assets/images/export.png" alt="" />
<span>导出excel</span>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="tables"> <div class="tables">
<el-table <el-table
:data="tableData" :data="tableData"
@ -111,6 +114,7 @@
prop="enterpriseName" prop="enterpriseName"
label="企业名称" label="企业名称"
header-align="center" header-align="center"
show-overflow-tooltip
/> />
<el-table-column <el-table-column
prop="district" prop="district"
@ -444,15 +448,28 @@ export default {
this.searchBefore = { ...this.searchBefore, ...this.form }; this.searchBefore = { ...this.searchBefore, ...this.form };
this.getList(); this.getList();
// 100% 125% this.$nextTick(() => {
let screen = window.screen; // 100% 125%
let screenWidth = window.screen.width; let screen = window.screen;
let screenHeight = window.screen.height; let screenWidth = window.screen.width;
if (screenWidth == 1366) { let screenHeight = window.screen.height;
this.tableHeight = 420; let height1 = document.getElementsByTagName("header")[0].clientHeight;
} else { let height2 = this.$refs.searchBox.offsetHeight;
this.tableHeight = detectZoom == 100 ? 600 : 480; this.tableHeight = screenHeight - (height1 + height2) - 230;
} console.log(height1);
console.log(height2);
console.log(screenHeight);
console.log(this.tableHeight);
// let screen = window.screen;
// let screenWidth = window.screen.width;
// let screenHeight = window.screen.height;
// if (screenWidth == 1366) {
// this.tableHeight = 420;
// } else {
// this.tableHeight = detectZoom == 100 ? 600 : 480;
// }
});
}, },
dicts: ["inspection_method", "check_source", "document_type"], dicts: ["inspection_method", "check_source", "document_type"],
methods: { methods: {

@ -1,683 +0,0 @@
<template>
<div class="container-main" ref="main">
<div class="filtrate">
<div class="one-line">
<div class="select-input">
<div class="select-span">行政区划:</div>
<executive
@quhua="quhua"
@quhuadizhi="quhuadizhi"
ref="executive"
></executive>
</div>
<div class="select-input">
<div class="select-span" style="width: 85px">企业名称:</div>
<el-input
v-model="form.enterpriseName"
size="small"
placeholder="请输入企业名称"
></el-input>
</div>
<!-- <div class="select-input">
<div class="select-span">企业规模:</div>
<el-select v-model="form.majorHazardLevel" placeholder="请选择">
<el-option
v-for="item in dict.type.major_hazard_level"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div> -->
<div class="select-input">
<div class="select-span">行业监管大类:</div>
<el-select v-model="form.supervisionLarge" placeholder="请选择">
<el-option
v-for="item in dict.type.category"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</div>
<div class="two-line">
<div class="two-line-left">
<div class="input-input" style="margin-left: 10px">
<div class="select-span">统一社会信用代码:</div>
<el-input
v-model="form.uuitNo"
placeholder="请输入统一社会信用代码"
></el-input>
</div>
</div>
<div class="select-btn" @click="searchList"></div>
<div
class="select-btn"
@click="reset"
style="background-color: #fdab5b"
>
重置
</div>
</div>
</div>
<div class="tables">
<el-table
v-loading="load1"
:data="tableData"
style="width: 100%"
:height="497"
:border="false"
tooltip-effect="light"
:row-class-name="tableRowClassName"
>
<el-table-column
prop="enterpriseName"
label="企业名称"
show-overflow-tooltip
header-align="center"
>
</el-table-column>
<el-table-column
prop="uuitNo"
label="统一社会信用代码"
width="180"
header-align="center"
/>
<el-table-column
prop="majorHazardLevel"
label="行政区划"
width="230"
header-align="center"
show-overflow-tooltip
>
<template slot-scope="scope">
<div>
{{ componendDistrict(scope.row.subdistrict) || "/" }}
</div>
</template>
</el-table-column>
<el-table-column
prop="supervisionLarge"
label="行业监管大类"
width="140"
header-align="center"
show-overflow-tooltip
>
<template slot-scope="scope">
<div>
{{ scope.row.supervisionLarge | supervisionLarge }}
</div>
</template>
</el-table-column>
<el-table-column
prop=""
label="安全风险等级"
width="120"
header-align="center"
/>
<el-table-column
prop=""
label="标准化等级"
width="100"
header-align="center"
/>
<el-table-column
prop=""
label="上次检查时间"
width="120"
header-align="center"
/>
<!-- <el-table-column prop="isPoint" label="是否重点" header-align="center">
<template slot-scope="scope">
<div
style="font-family: 'Alibaba PuHuiTi'"
:class="scope.row.isPoint == '1' ? 'isStyle' : ''"
>
<span v-if="scope.row.isPoint == '1'"></span>
<span v-if="scope.row.isPoint == '0'"></span>
</div>
</template>
</el-table-column> -->
<el-table-column label="操作" header-align="center">
<template slot-scope="scope">
<div class="tabs-btns">
<div class="look" @click="look(scope.row)">
<img src="@/assets/images/lookInfo.png" alt="" />
<span>查看详情</span>
</div>
</div>
</template>
</el-table-column>
</el-table>
</div>
<pagination
v-show="total > 0"
:total="total"
:page.sync="searchBefore.pageNum"
:limit.sync="searchBefore.pageSize"
@pagination="getList"
/>
<!-- 查看 -->
<el-dialog
:visible.sync="addShow"
:show-close="false"
:destroy-on-close="true"
:close-on-click-modal="false"
append-to-body
custom-class="dialog-boxed"
width="50%"
>
<div class="dialog-slot">
<div class="closeClick">
<div class="newplan">
<div class="line"></div>
<div class="span">企业详情</div>
</div>
<img src="@/assets/images/close.png" alt="" @click="shutDownDetail" />
</div>
<div class="content">
<div class="filtrate">
<el-descriptions :column="2" border>
<el-descriptions-item
:label="value"
v-for="(key, value) in elDesLabels"
:key="key"
:span="
key == 'majorProduct' ||
key == 'businessScope' ||
key == 'subdistrict' ||
key == 'rigisterAddress'
? 2
: 1
"
>
{{ infoData[key] || "/" }}
</el-descriptions-item>
</el-descriptions>
</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import { businessList } from "@/api/yingji/keyEnterprise";
import { listNew, getNew, delNew, addNew, updateNew } from "@/api/yingji/new";
import executive from "./echarts/executive";
import dictzh from "@/utils/dictzh.js";
export default {
components: { executive },
name: "Order",
data() {
return {
dictzh: dictzh,
tableData: [],
option: [],
form: {},
xzqh: "",
searchBefore: {
pageSize: 10,
pageNum: 1,
},
xzList: [],
load1: true,
total: 0,
main: {
height: "",
},
elDesLabels: {
企业名称: "enterpriseName",
统一社会信用代码: "uuitNo",
法定代表人: "legalPerson",
法人证件号: "frzjh",
是否规上企业: "aboveDesignated",
企业规模: "aboveDesignatedTwo",
企业类型: "zjEconKind",
生产经营地址: "businessAddress",
行业监管大类: "supervisionLarge",
"所在乡镇(街道)": "subdistrict",
注册地址: "rigisterAddress",
主营业务及产品: "majorProduct",
经营范围: "businessScope",
登记状态: "corpStatus",
// : "county",
办公地址: "enterpriseAddress",
企业规模: "enterpristScale",
固定资产: "fixedAssets",
占地面积: "floorSpace",
上一年经营收入: "lastYearOperatingIncome",
企业上一年投入生产: "lastYeatOnStream",
法人移动电话: "legalPersonCellphone",
法人职务: "legalPersonPost",
法人固定电话: "legalPersonTel",
法人类型: "legalPersonType",
机构编码: "orgCode",
其他名称: "otherName",
登记时间: "registerTime",
登记机关: "registrationOrg",
注册资金: "rigisterFund",
是否上报风险报告: "riskReport",
安全生产投入占比: "safetyProductionInvestment",
申请人: "sqr",
申请人联系方式: "sqrlxfs",
成立时间: "startTime",
有效期起: "termStart",
有效期止: "termEnd",
创建时间: "createTime",
修改时间: "updateTime",
备注: "remark",
// : "htmlText",
// :"updateBy",
// :"updateId",
// :"updater",
// :"userId",
// :"village",
// :"supervisionSmall",
// :"reportHistoryId",
// :"indusTypeClass",
// :"indusTypeLagre",
// :"indusTypeMiddle",
// :"indusTypeSmall",
// :"isDelete",
// :"jhptUpdateTime",
// :"lastPageNumber",
// :"creater",
// :"deptId",
// :"districtCode",
// :"province",
// :"createBy",
// :"createId",
// :"businessScope",
// :"city",
},
addShow: false,
details: null,
subdistrict: [],
infoData: {},
};
},
created() {
this.getList();
},
dicts: [
"economic_categories",
"economic_subcategory",
"special_governance",
"enterprise_status",
"standardization_level",
"safety_level",
"category",
"major_hazard_level",
"entpr_color",
"is_point",
],
filters: {
supervisionLarge: function (value) {
// console.log(value.split(","));
let array = value.split(",");
array.map((item, ind) => {
array[ind] = dictzh[item];
});
// console.log(array.join(","));
return array.join(",") || "/";
},
},
methods: {
supervisionLarge(value) {
// console.log(value.split(","));
let array = value.split(",");
array.map((item, ind) => {
array[ind] = dictzh[item];
});
// console.log(array.join(","));
return array.join(",");
},
//
componendDistrict(district) {
let name;
this.option.map((item) => {
if (item.value == district) {
name = item.label;
} else {
item.children.map((itemTwo) => {
if (itemTwo.value == district) {
name = item.label + "-" + itemTwo.label;
}
});
}
});
return name;
},
//
quhuadizhi(district) {
this.option = district;
},
filterTable1(datas, value) {
if (!value) {
return "/";
}
var actions = [];
datas.forEach((value1, index1) => {
actions.push(value1.raw);
});
let newarr = actions.filter((value2) => {
return value2.dictValue == value;
});
if (newarr.length > 0) {
return newarr[0].dictLabel;
} else {
return "/";
}
},
shutDownDetail() {
this.addShow = false;
},
look(e) {
localStorage.setItem("enterInfo", JSON.stringify(e));
let infoObj = JSON.parse(localStorage.getItem("enterInfo"));
//
this.addShow = true;
infoObj["aboveDesignated"] =
infoObj.aboveDesignated == 1 ? "规上" : "规下";
infoObj["riskReport"] = infoObj.riskReport == 1 ? "是" : "否";
infoObj["aboveDesignatedTwo"] =
infoObj.aboveDesignatedTwo == 1
? "大型"
: infoObj.aboveDesignatedTwo == 2
? "中型"
: infoObj.aboveDesignatedTwo == 3
? "小型"
: infoObj.aboveDesignatedTwo == 4
? "微型"
: "";
infoObj["supervisionLarge"] = this.supervisionLarge(
infoObj.supervisionLarge
);
infoObj["subdistrict"] =
this.componendDistrict(infoObj.subdistrict) || "/";
this.infoData = infoObj;
},
quhua(e) {
this.form.subdistrict = e;
},
searchList() {
this.searchBefore = {
pageSize: 10,
pageNum: 1,
};
this.searchBefore = { ...this.searchBefore, ...this.form };
this.getList();
},
reset() {
this.form = {
subdistrict: "",
frimType: "",
supervisionLarge: "",
// isPoint: "",
majorHazardLevel: "",
entprColor: "",
uuitNo: "",
enterpriseName: "",
};
this.searchBefore = {
pageSize: 10,
pageNum: 1,
};
this.$refs.executive.district = [];
this.getList();
},
//
// pagesChange(pages) {
// this.searchBefore.pageNum = pages.pageNum;
// this.searchBefore.pageSize = pages.pageSize;
// this.getList();
// },
getList() {
this.load1 = true;
businessList(this.searchBefore).then((res) => {
this.tableData = res.rows;
this.total = res.total;
this.load1 = false;
});
},
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 !== 0) {
return "success-row";
}
return "";
},
},
mounted() {},
};
</script>
<style lang="scss" scoped>
.isStyle {
color: #f71052;
}
::v-deep .el-descriptions-row th {
width: 20% !important;
font-size: 14px;
font-family: "Alibaba PuHuiTi";
font-weight: 400;
}
::v-deep .el-descriptions-row td {
width: 30% !important;
font-size: 14px;
font-family: "Alibaba PuHuiTi";
font-weight: 400;
}
.dialog-slot {
.closeClick {
position: absolute;
top: 0;
right: 0;
padding: 10px 20px;
width: 100%;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
text-align: center;
background: #f8f9fa;
box-shadow: 0px 1px 0px 0px #dbe0e8;
background-color: #e0eaf8;
img {
width: 18px;
height: 18px;
cursor: pointer;
}
.newplan {
display: flex;
align-items: center;
.line {
margin-right: 10px;
width: 5px;
height: 16px;
background-color: #1e70de;
}
.span {
font-size: 16px;
font-family: "Alibaba PuHuiTi";
font-weight: bold;
color: #1e70de;
}
}
}
.content {
// padding: 15px 10px;
.filtrate {
padding-bottom: 10px;
}
}
}
.container-main {
// height: calc(100vh - 84px);
height: 100%;
overflow: hidden;
padding: 0 20px;
background-color: #fff;
.filtrate {
padding-bottom: 10px;
.one-line,
.two-line {
display: flex;
align-items: center;
.select-input {
margin-left: 10px;
}
.two-line-left {
display: flex;
align-items: center;
// justify-content: space-between;
padding-right: 50px;
width: 88%;
.input-input {
margin: 10px 0 0 0;
width: 355px;
display: flex;
align-items: center;
.select-span {
font-size: 14px;
font-family: "Alibaba PuHuiTi";
font-weight: 400;
color: #525966;
line-height: 40px;
margin-right: 10px;
}
::v-deep .el-input {
flex: 1;
.el-input__inner {
height: 33px;
}
}
}
}
.select-btn {
padding: 12px 20px;
margin: 10px 0 0 5px;
height: 33px;
background: #2378ec;
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-family: Alibaba PuHuiTi;
font-weight: 500;
color: #ffffff;
cursor: pointer;
}
}
.select-input {
margin-top: 10px;
display: flex;
align-items: center;
.select-span {
font-size: 14px;
font-family: "Alibaba PuHuiTi";
font-weight: 400;
color: #525966;
line-height: 40px;
margin-right: 10px;
}
::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);
}
}
}
}
.tables {
background-color: #eaf2fd;
.tabs-btns {
display: flex;
align-items: center;
justify-content: center;
.look {
display: flex;
align-items: center;
cursor: pointer;
img {
width: 20px;
margin-right: 5px;
}
span {
font-size: 15px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #045ffd;
}
}
}
::v-deep .el-table {
.success-row {
background-color: rgba(234, 242, 253, 0.25);
}
td {
height: 45px;
text-align: center;
font-size: 14px;
font-family: "Alibaba PuHuiTi";
font-weight: 400;
color: #525966;
}
th {
height: 42px;
background-color: #eaf2fd;
font-size: 15px;
font-family: "Alibaba PuHuiTi";
font-weight: bold;
color: #525966;
.el-checkbox {
display: none;
}
}
// .el-table__body-wrapper {
// height: 450px !important;
// overflow-y: auto;
// }
}
::v-deep .el-table::before {
height: 0;
}
}
.pagination {
margin-top: 10px;
}
}
</style>

@ -1,6 +1,6 @@
<template> <template>
<div class="container-main"> <div class="container-main">
<div class="filtrate"> <div ref="searchBox" class="filtrate">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
<el-form-item label="行政区划" prop="district"> <el-form-item label="行政区划" prop="district">
<executive <executive
@ -98,7 +98,6 @@
<el-table-column <el-table-column
prop="enterpriseId" prop="enterpriseId"
label="统一社会信用代码" label="统一社会信用代码"
width="180"
header-align="center" header-align="center"
/> />
<el-table-column <el-table-column
@ -364,15 +363,28 @@ export default {
}, },
created() { created() {
this.getList(); this.getList();
// 100% 125% this.$nextTick(() => {
let screen = window.screen; // 100% 125%
let screenWidth = window.screen.width; let screen = window.screen;
let screenHeight = window.screen.height; let screenWidth = window.screen.width;
if (screenWidth == 1366) { let screenHeight = window.screen.height;
this.tableHeight = 420; let height1 = document.getElementsByTagName("header")[0].clientHeight;
} else { let height2 = this.$refs.searchBox.offsetHeight;
this.tableHeight = detectZoom == 100 ? 600 : 480; this.tableHeight = screenHeight - (height1 + height2) - 230;
} console.log(height1);
console.log(height2);
console.log(screenHeight);
console.log(this.tableHeight);
// let screen = window.screen;
// let screenWidth = window.screen.width;
// let screenHeight = window.screen.height;
// if (screenWidth == 1366) {
// this.tableHeight = 420;
// } else {
// this.tableHeight = detectZoom == 100 ? 600 : 480;
// }
});
}, },
methods: { methods: {
/** 查询企业新列表 */ /** 查询企业新列表 */

@ -1,727 +0,0 @@
<!--
* @Descripttion:
* @version:
* @Author: JC9527
* @Date: 2023-09-04 10:20:06
* @LastEditors: 张涛
* @LastEditTime: 2023-10-20 09:25:30
-->
<template>
<div class="plan-management">
<div class="plan-topBox">
<div class="drup-downs">
<div class="year">
<div class="year-span">年月:</div>
<el-date-picker
v-model="form.plannedYear"
type="month"
format="yyyy-MM"
:clearable="false"
value-format="yyyy-MM"
placeholder="请选择年月"
>
</el-date-picker>
</div>
<div class="area">
<div class="area-span" style="width: 85px">企业名称:</div>
<el-input
v-model="form.enterpriseName"
size="small"
placeholder="请输入企业名称"
></el-input>
</div>
<div class="area">
<div class="area-span">行政区划:</div>
<executive @quhua="quhua" @quhuadizhi="quhuadizhi" ref="executive" />
</div>
<div class="select-btn reset" @click="reset"></div>
</div>
<div class="btns">
<div class="export" @click="exportFile">
<img src="@/assets/images/export.png" alt="" />
<span>导出excel</span>
</div>
<div class="newProject" @click="newProject">
<img src="@/assets/images/newProject.png" alt="" />
<span>新增计划</span>
</div>
</div>
</div>
<div class="plan-bottomBox">
<div class="tables">
<el-table
:data="tableData"
:border="false"
:height="484"
v-loading="loading"
tooltip-effect="light"
@selection-change="handleSelectionChange"
row-key="id"
:row-class-name="tableRowClassName"
>
<el-table-column
prop="plannedYear"
label="计划年月"
width="180"
header-align="center"
/>
<el-table-column
prop="district"
label="行政区划"
show-overflow-tooltip
width="180"
header-align="center"
>
<template slot-scope="scope">
<span>{{ componendDistrict(scope.row.district) || "/" }}</span>
</template>
</el-table-column>
<el-table-column
prop="enterpriseName"
label="企业名称"
header-align="center"
/>
<el-table-column
prop="createTime"
label="创建时间"
header-align="center"
>
<template slot-scope="scope">
<span>{{
scope.row.createTime
? scope.row.createTime.split(" ")[0]
: scope.row.createTime
}}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="250" header-align="center">
<template slot-scope="scope">
<div class="tabs-btns">
<div class="look" @click="look(scope.row)">
<img src="@/assets/images/look.png" alt="" />
<span>查看</span>
</div>
<div class="change" @click="change(scope.row)">
<img src="@/assets/images/change.png" alt="" />
<span>修改</span>
</div>
<div class="delete" @click="deleteItem(scope.row)">
<img src="@/assets/images/delete.png" alt="" />
<span>删除</span>
</div>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="pagination">
<my-pagination
:total="total"
@pagesChange="pagesChange"
ref="mypagination"
></my-pagination>
</div>
</div>
<my-dialog ref="myDialog" v-on:close="padlockOne"></my-dialog>
<my-dialogtwo ref="myDialogTwo"></my-dialogtwo>
<temp-dialog ref="tempDialog" v-on:close="padlock"></temp-dialog>
</div>
</template>
<script>
import myPagination from "@/views/components/myPagination/index.vue";
import myDialog from "@/views/components/AddDialog/index.vue";
import myDialogtwo from "@/views/components/dialogTwo/index.vue";
import tempDialog from "@/views/components/tempDialog/index.vue";
import { Loading } from "element-ui";
import { mapState } from "vuex";
import executive from "./echarts/executive.vue";
export default {
components: { myPagination, myDialog, myDialogtwo, tempDialog, executive },
data() {
return {
optionsyear: [],
options: [],
myDistrict: [],
form: {
district: [],
plannedYear: "",
enterpriseName: "",
},
district: [],
mydistrict: "",
props: {
value: "subdistrict",
label: "institutionName",
checkStrictly: true,
},
tableData: [],
pages: {
pageSize: 10,
pageNum: 1,
},
total: 0,
loading: false,
disabled: false,
//
isExpandAll: true,
//
refreshTable: true,
county: false,
multipleSelection: [],
};
},
computed: {
...mapState({
dept: (state) => state.user.dept,
}),
},
watch: {
form: {
handler(newForm) {
this.pages.pageNum = 1;
this.pages.pageSize = 10;
this.$refs.mypagination.defaultPages();
let obj;
// console.log(newForm, "newForm");
//
if (!this.disabled) {
if (Array.isArray(newForm.district)) {
if (newForm.district.length == 2) {
this.district = this.form.district[1].slice(0, 10);
obj = { ...this.pages, ...this.form, district: this.district };
} else if (newForm.district.length == 1) {
this.district = this.form.district[0].slice(0, 7);
obj = { ...this.pages, ...this.form, district: this.district };
} else {
obj = { ...this.pages, ...this.form };
}
//
} else {
//
if (this.county) {
this.district = this.form.district.slice(0, 7);
obj = { ...this.pages, ...this.form, district: this.district };
} else {
this.district = this.form.district.slice(0, 10);
obj = { ...this.pages, ...this.form, district: this.district };
}
}
} else {
//
this.district = this.form.district;
obj = { ...this.pages, ...this.form, district: this.district };
}
// console.log(obj,'obj')
this.getList(obj);
},
deep: true,
},
},
methods: {
quhua(e) {
this.form.district = e;
},
//
quhuadizhi(district) {
this.option = district;
},
//
componendDistrict(district) {
// console.log(district)
// console.log(this.myDistrict)
let name;
this.myDistrict.map((item) => {
if (item.county == district) {
name = item.institutionName;
} else {
item.children.map((itemTwo) => {
if (itemTwo.subdistrict == district) {
name = item.institutionName + "-" + itemTwo.institutionName;
}
});
}
});
return name;
},
//
pagesChange(pages) {
// console.log('123123')
this.pages = pages;
let district;
this.getList({ ...pages, ...this.form, district: this.district });
},
//
handleSelectionChange(val) {
//
this.multipleSelection = val;
},
//
exportFile() {
// this.multipleSelection.length > 0 ? `` :
this.$confirm(`确认根据您的搜索条件导出搜索之后的数据吗?`, "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.download(
"/pharmaceuticals/bPlanEnterprise/exportplan",
{
...this.form,
district: this.district,
},
`计划管理.xlsx`
);
})
.catch(() => {});
},
//
newProject() {
this.$refs.myDialog.openDialog("newlyIncreased", this.dept);
},
//
reset() {
// let obj
this.district = [];
if (this.dept.ancestors.split(",").length == 1) {
this.form = {
plannedYear: "",
district: "",
enterpriseName: "",
};
// obj = this.pages
} else {
let { district } = this.form;
this.form.plannedYear = "";
this.form.enterpriseName = "";
this.form.district = this.mydistrict;
// obj = {...this.pages,district}
}
// this.getList(obj)
},
// dialog
padlock() {
// let { district} = this.form;
this.pages.pageNum = 1;
this.pages.pageSize = 10;
this.$refs.mypagination.defaultPages();
let obj;
if (!this.disabled) {
if (Array.isArray(this.form.district)) {
if (this.form.district.length == 2) {
let district = this.form.district[1].slice(0, 10);
obj = { ...this.pages, ...this.form, district };
} else if (this.form.district.length == 1) {
let district = this.form.district[0].slice(0, 7);
obj = { ...this.pages, ...this.form, district };
} else {
obj = { ...this.pages, ...this.form };
}
//
} else {
//
if (this.county) {
let district = this.form.district.slice(0, 7);
obj = { ...this.pages, ...this.form, district };
} else {
let district = this.form.district.slice(0, 10);
obj = { ...this.pages, ...this.form, district };
}
}
} else {
//
let district = this.form.district;
obj = { ...this.pages, ...this.form, district };
}
// console.log('obj',obj)
this.getList(obj);
},
// dialog
padlockOne() {
this.pages.pageNum = 1;
this.pages.pageSize = 10;
this.$refs.mypagination.defaultPages();
let obj;
if (!this.disabled) {
if (Array.isArray(this.form.district)) {
if (this.form.district.length == 2) {
let district = this.form.district[1].slice(0, 10);
obj = { ...this.pages, ...this.form, district };
} else if (this.form.district.length == 1) {
let district = this.form.district[0].slice(0, 7);
obj = { ...this.pages, ...this.form, district };
} else {
obj = { ...this.pages, ...this.form };
}
//
} else {
//
if (this.county) {
let district = this.form.district.slice(0, 7);
obj = { ...this.pages, ...this.form, district };
} else {
let district = this.form.district.slice(0, 10);
obj = { ...this.pages, ...this.form, district };
}
}
} else {
//
let district = this.form.district;
obj = { ...this.pages, ...this.form, district };
}
// console.log('obj',obj)
this.getList(obj);
// if (this.dept.ancestors.split(",").length == 1) {
// if (this.form.district.length == 0 || this.form.plannedYear == "") {
// this.getList(this.pages);
// } else {
// this.form.district = [];
// this.form.plannedYear = "";
// }
// } else {
// if (
// this.form.district == this.mydistrict ||
// this.form.plannedYear == ""
// ) {
// this.getList(this.pages);
// } else {
// this.form.district = this.mydistrict;
// this.form.plannedYear = "";
// }
// }
},
//
handleChange(value) {},
//
look(row) {
this.$refs.tempDialog.open(row, 2);
},
//
change(row) {
this.$refs.tempDialog.open(row, 1);
},
//
deleteItem(row) {
let idList = [];
idList.push(row.id);
this.$modal
.confirm("你确认要删除该条数据吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(async () => {
this.loading = true;
try {
let downloadLoadingInstance = Loading.service({
text: "正在删除计划,请稍候",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
});
let data = await this.$api.yingji.bPlanEnterprise("delete", _, {
idList: idList.join(","),
});
if (data.code == 200) {
this.loading = false;
downloadLoadingInstance.close();
this.$message({
message: "删除成功",
type: "success",
});
// let { district} = this.form;
let district;
if (this.dept.ancestors.split(",").length == 2) {
district = this.form.district.slice(0, 7);
} else if (this.dept.ancestors.split(",").length == 3) {
district = this.form.district;
} else {
if (this.form.district.length == 1) {
district = this.form.district.slice(0, 7);
} else {
district = this.form.district;
}
}
let obj = { ...this.pages, district };
this.getList(obj);
}
} catch (error) {
downloadLoadingInstance.close();
console.log(error);
}
})
.catch(() => {
console.log("取消删除");
});
},
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 !== 0) {
return "success-row";
}
return "";
},
// list
async getList(pages) {
this.loading = true;
let res = await this.$api.yingji.planmx(pages);
if (res.code == 200) {
this.loading = false;
this.tableData = res.data.list;
this.total = res.data.total;
}
},
commentData(item, dept) {
item.map((item) => {
item.children.map((itemTwo) => {
if (itemTwo.children.length == 0) {
delete itemTwo.children;
}
itemTwo.county = itemTwo.subdistrict;
});
});
// }
this.options = item;
if (dept.ancestors.split(",").length == 2) {
this.options = this.options.filter((item) => {
return item.institutionName == dept.deptName;
});
this.options.map((item) => {
if (item.institutionName == dept.deptName) {
this.form.district = item.subdistrict;
this.mydistrict = item.subdistrict;
this.county = true;
}
});
} else if (dept.ancestors.split(",").length == 3) {
this.options.map((item) => {
item.children.map((itemTwo) => {
if (itemTwo.institutionName == dept.deptName) {
this.form.district = itemTwo.subdistrict;
this.mydistrict = itemTwo.subdistrict;
this.county = false;
}
});
});
this.disabled = true;
}
},
},
async created() {
// let data = await this.$api.yingji.tree();
// this.myDistrict = data.data;
let treeData = JSON.parse(localStorage.getItem("TREE_DATA"));
this.myDistrict = treeData;
this.commentData(treeData, this.dept);
if (this.dept.ancestors.split(",").length == 1) {
this.getList(this.pages);
}
},
};
</script>
<style lang="scss" scoped>
.plan-management {
padding: 0 20px;
background-color: #fff;
height: 100%;
.plan-topBox {
display: flex;
justify-content: space-between;
padding: 31px 0 12px 0;
// background-color: yellow;
.drup-downs {
display: flex;
align-items: center;
flex: 1;
.year {
display: flex;
align-items: center;
// margin-right: 200px;
.year-span {
font-size: 14px;
font-family: "Alibaba PuHuiTi";
font-weight: 400;
color: #525966;
line-height: 40px;
margin-right: 10px;
}
}
.area {
display: flex;
align-items: center;
// justify-content: center;
// flex: 1;
.area-span {
margin-left: 10px;
font-size: 14px;
font-family: "Alibaba PuHuiTi";
font-weight: 400;
color: #525966;
line-height: 40px;
margin-right: 10px;
}
::v-deep .el-cascader {
background-color: transparent;
width: 180px;
.el-input__inner {
height: 33px;
}
.el-input
.el-input__suffix
.el-input__suffix-inner
.el-icon-arrow-down::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%);
}
}
}
::v-deep .el-select {
background-color: transparent;
width: 276px;
.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);
}
}
.select-btn {
width: 120px;
height: 34px;
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-family: "Alibaba PuHuiTi";
font-weight: 500;
color: #ffffff;
cursor: pointer;
background: #fdab5b;
margin-left: 20px;
}
}
.btns {
display: flex;
align-items: center;
.export,
.newProject {
display: flex;
align-items: center;
justify-content: center;
padding: 6px 19px;
cursor: pointer;
img {
width: 22px;
margin-right: 10px;
}
span {
color: #ffffff;
font-size: 14px;
font-family: "Alibaba PuHuiTi";
font-weight: 400;
}
}
.export {
background-color: #2378ec;
margin-right: 30px;
}
.newProject {
background-color: #28b384;
}
}
}
.plan-bottomBox {
margin-top: 10px;
.tables {
::v-deep .el-table {
.success-row {
background-color: rgba(234, 242, 253, 0.25);
}
td {
height: 42px;
box-sizing: border-box;
text-align: center;
font-size: 14px;
font-family: "Alibaba PuHuiTi";
font-weight: 400;
color: #525966;
}
th {
height: 45px;
background-color: #eaf2fd;
font-size: 15px;
font-family: "Alibaba PuHuiTi";
font-weight: bold;
color: #525966;
.el-checkbox {
display: none;
}
}
}
::v-deep .el-table::before {
height: 0;
}
.tabs-btns {
display: flex;
align-items: center;
justify-content: center;
.look,
.change,
.delete {
display: flex;
align-items: center;
margin-right: 30px;
cursor: pointer;
img {
width: 20px;
margin-right: 5px;
}
span {
font-size: 15px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #045ffd;
}
}
.delete {
margin-right: 0;
span {
color: #f71052;
}
}
}
}
.pagination {
margin-top: 40px;
}
}
}
</style>

@ -4,11 +4,11 @@
* @Author: JC9527 * @Author: JC9527
* @Date: 2023-09-04 10:20:06 * @Date: 2023-09-04 10:20:06
* @LastEditors: laozt 2721205210@qq.com * @LastEditors: laozt 2721205210@qq.com
* @LastEditTime: 2024-01-05 15:18:54 * @LastEditTime: 2024-01-15 09:30:39
--> -->
<template> <template>
<div class="plan-management"> <div class="plan-management">
<div class="search-box"> <div ref="searchBox" class="search-box">
<el-form <el-form
:model="queryParams" :model="queryParams"
ref="queryForm" ref="queryForm"
@ -137,7 +137,12 @@
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="行政区划" align="center" prop="district"> <el-table-column
label="行政区划"
align="center"
prop="district"
show-overflow-tooltip
>
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ componendDistrict(scope.row.district) || "/" }}</span> <span>{{ componendDistrict(scope.row.district) || "/" }}</span>
</template> </template>
@ -146,6 +151,7 @@
label="企业名称" label="企业名称"
align="center" align="center"
prop="enterpriseName" prop="enterpriseName"
show-overflow-tooltip
/> />
<!-- <el-table-column label="是否省重点" align="center" prop="isPoint"> <!-- <el-table-column label="是否省重点" align="center" prop="isPoint">
<template slot-scope="scope"> <template slot-scope="scope">
@ -547,15 +553,24 @@ export default {
// //
this.getList(); this.getList();
// 100% 125% this.$nextTick(() => {
let screen = window.screen; // 100% 125%
let screenWidth = window.screen.width; let screen = window.screen;
let screenHeight = window.screen.height; let screenWidth = window.screen.width;
if (screenWidth == 1366) { let screenHeight = window.screen.height;
this.tableHeight = 400; let height1 = document.getElementsByTagName("header")[0].clientHeight;
} else { let height2 = this.$refs.searchBox.offsetHeight;
this.tableHeight = detectZoom == 100 ? 600 : 450; this.tableHeight = screenHeight - (height1 + height2) - 230;
} console.log(height1);
console.log(height2);
console.log(screenHeight);
console.log(this.tableHeight);
// if (screenWidth == 1366) {
// this.tableHeight = 400;
// } else {
// this.tableHeight = detectZoom == 100 ? 600 : 450;
// }
});
}, },
}; };
</script> </script>

Loading…
Cancel
Save