|
|
|
|
@ -21,7 +21,7 @@
|
|
|
|
|
>
|
|
|
|
|
</el-input>
|
|
|
|
|
<div class="top_search_button">
|
|
|
|
|
<i class="el-icon-search"></i>
|
|
|
|
|
<i class="el-icon-search" @click="getData_icon()"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="top_add_btn">
|
|
|
|
|
@ -33,7 +33,7 @@
|
|
|
|
|
<ul>
|
|
|
|
|
<li v-for="item in company_data" :key="item.id">
|
|
|
|
|
<img :src="item.picUrl" alt="" />
|
|
|
|
|
<span class="company_name"> {{ item.companyName }} </span>
|
|
|
|
|
<span class="company_name"> {{ item.name }} </span>
|
|
|
|
|
<div class="company_label">
|
|
|
|
|
<div
|
|
|
|
|
class="company_label_data"
|
|
|
|
|
@ -43,7 +43,7 @@
|
|
|
|
|
{{ val }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="company_unit"> {{ item.companyAddress }}</span>
|
|
|
|
|
<span class="company_unit"> {{ item.unit }}</span>
|
|
|
|
|
<!-- 遮罩层 -->
|
|
|
|
|
<div class="image_mask">
|
|
|
|
|
<div class="btn">
|
|
|
|
|
@ -60,10 +60,11 @@
|
|
|
|
|
<!-- 分页区域 -->
|
|
|
|
|
<div class="footer">
|
|
|
|
|
<el-pagination
|
|
|
|
|
@size-change="handleSizeChange"
|
|
|
|
|
:background="true"
|
|
|
|
|
@current-change="handleCurrentChange"
|
|
|
|
|
:page-sizes="[6]"
|
|
|
|
|
:page-size="100"
|
|
|
|
|
:page-size="pageSize"
|
|
|
|
|
:current-page="pageNum"
|
|
|
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
|
|
|
:total="total"
|
|
|
|
|
>
|
|
|
|
|
@ -80,6 +81,7 @@
|
|
|
|
|
import CompanyDataDialog from "./components/companyDataDialog";
|
|
|
|
|
import ClearDialog from "./components/clearDialog";
|
|
|
|
|
import { getCompanyList } from "@/api/systemManagement";
|
|
|
|
|
import { debounce } from "@/utils/publicMethod_lxy/debounce.js";
|
|
|
|
|
export default {
|
|
|
|
|
name: "companyList",
|
|
|
|
|
components: {
|
|
|
|
|
@ -89,18 +91,7 @@ export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
searchCompany: "",
|
|
|
|
|
company_data: [
|
|
|
|
|
{
|
|
|
|
|
value: "1",
|
|
|
|
|
name: "宁波镇海兴达化工有限公司",
|
|
|
|
|
unit: "宁波镇海兴达化工有限公司工业园",
|
|
|
|
|
},
|
|
|
|
|
{ value: "2" },
|
|
|
|
|
{ value: "3" },
|
|
|
|
|
{ value: "4" },
|
|
|
|
|
{ value: "5" },
|
|
|
|
|
{ value: "6" },
|
|
|
|
|
],
|
|
|
|
|
company_data: [],
|
|
|
|
|
pageSize: 6,
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
total: "",
|
|
|
|
|
@ -125,11 +116,40 @@ export default {
|
|
|
|
|
const params = {
|
|
|
|
|
pageSize: this.pageSize,
|
|
|
|
|
pageNum: this.pageNum,
|
|
|
|
|
companyName: this.searchCompany, // 查询框条件
|
|
|
|
|
};
|
|
|
|
|
getCompanyList(params).then((res) => {
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
console.log("res.data", res);
|
|
|
|
|
this.company_data = res.data;
|
|
|
|
|
this.total = res.total;
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.warnning(res.msg);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 放大镜点击查询防恶意点击
|
|
|
|
|
getData_icon: debounce(function () {
|
|
|
|
|
const params = {
|
|
|
|
|
pageSize: this.pageSize,
|
|
|
|
|
pageNum: this.pageNum,
|
|
|
|
|
companyName: this.searchCompany, // 查询框条件
|
|
|
|
|
};
|
|
|
|
|
console.log("params", params);
|
|
|
|
|
getCompanyList(params).then((res) => {
|
|
|
|
|
console.log("res.data", res.data);
|
|
|
|
|
// this.company_data = res.data;
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
console.log("res.data", res);
|
|
|
|
|
this.company_data = res.data;
|
|
|
|
|
this.total = res.total;
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.warnning(res.msg);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}, 300),
|
|
|
|
|
handleCurrentChange(val) {
|
|
|
|
|
console.log(`当前页: ${val}`);
|
|
|
|
|
this.pageNum = val;
|
|
|
|
|
this.getData();
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
@ -189,7 +209,7 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.top_search_button {
|
|
|
|
|
width: 10%;
|
|
|
|
|
width: 7%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
border-radius: 0px 4px 4px 0px;
|
|
|
|
|
background: #0e3936;
|
|
|
|
|
@ -198,7 +218,7 @@ export default {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
.el-icon-search {
|
|
|
|
|
color: #fff;
|
|
|
|
|
padding: 12% 0;
|
|
|
|
|
padding: 11% 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.top_search_button:focus,
|
|
|
|
|
@ -214,13 +234,13 @@ export default {
|
|
|
|
|
border: 1px solid #4a6072;
|
|
|
|
|
color: #fff;
|
|
|
|
|
border-radius: 0px !important;
|
|
|
|
|
background: #323f43;
|
|
|
|
|
background: url("~@/assets/companyFile/btn05.png") no-repeat !important;
|
|
|
|
|
background-size: 100% 100% !important;
|
|
|
|
|
}
|
|
|
|
|
.el-button:focus,
|
|
|
|
|
.el-button:hover {
|
|
|
|
|
color: #34e1b3;
|
|
|
|
|
background: url("~@/assets/companyFile/891771.png") no-repeat !important;
|
|
|
|
|
background-size: 100% 100% !important;
|
|
|
|
|
text-shadow: 0 0 9px #34e1b3;
|
|
|
|
|
filter: brightness(150%);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -245,16 +265,18 @@ export default {
|
|
|
|
|
img {
|
|
|
|
|
margin-left: 1%;
|
|
|
|
|
margin-top: 1.2%;
|
|
|
|
|
width: 98%;
|
|
|
|
|
height: 97%;
|
|
|
|
|
width: 99%;
|
|
|
|
|
height: 98.4%;
|
|
|
|
|
}
|
|
|
|
|
/* 公司图片相关信息区域 */
|
|
|
|
|
.company_name {
|
|
|
|
|
position: absolute;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
color: #fff;
|
|
|
|
|
text-shadow: 0 0 9px #ffe6d9;
|
|
|
|
|
left: 10px;
|
|
|
|
|
bottom: 70px;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
}
|
|
|
|
|
.company_label {
|
|
|
|
|
display: flex;
|
|
|
|
|
@ -268,7 +290,7 @@ export default {
|
|
|
|
|
padding: 0px 5px 0px 5px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
color: #34e1b3;
|
|
|
|
|
background: url("~@/assets/companyFile/891771.png") no-repeat !important;
|
|
|
|
|
background: url("~@/assets/companyFile/btn04.png") no-repeat !important;
|
|
|
|
|
background-size: 100% 100% !important;
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
}
|
|
|
|
|
@ -287,7 +309,7 @@ export default {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
background: rgba(101, 101, 101, 0.6);
|
|
|
|
|
background: rgba(73, 72, 72, 0.6);
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
opacity: 0;
|
|
|
|
|
/* 图片鼠标经过按钮 */
|
|
|
|
|
@ -297,32 +319,38 @@ export default {
|
|
|
|
|
button {
|
|
|
|
|
height: 40px;
|
|
|
|
|
margin-right: 25px;
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
border: 1px;
|
|
|
|
|
border-radius: 0px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
button.check {
|
|
|
|
|
background: #126a58;
|
|
|
|
|
background: url("~@/assets/companyFile/btn05.png") no-repeat !important;
|
|
|
|
|
background-size: 100% 100% !important;
|
|
|
|
|
}
|
|
|
|
|
/* 点击高亮 */
|
|
|
|
|
button.check:hover,
|
|
|
|
|
button.check:focus {
|
|
|
|
|
background: #29b397;
|
|
|
|
|
filter: brightness(150%);
|
|
|
|
|
}
|
|
|
|
|
button.change {
|
|
|
|
|
background: rgb(7, 72, 92);
|
|
|
|
|
background: url("~@/assets/companyFile/btn06.png") no-repeat !important;
|
|
|
|
|
background-size: 100% 100% !important;
|
|
|
|
|
}
|
|
|
|
|
/* 点击高亮 */
|
|
|
|
|
button.change:hover,
|
|
|
|
|
button.change:focus {
|
|
|
|
|
background: rgb(19, 125, 158);
|
|
|
|
|
filter: brightness(150%);
|
|
|
|
|
}
|
|
|
|
|
button.clear {
|
|
|
|
|
background: rgb(107, 14, 14);
|
|
|
|
|
background: url("~@/assets/companyFile/btn07.png") no-repeat !important;
|
|
|
|
|
background-size: 100% 100% !important;
|
|
|
|
|
}
|
|
|
|
|
/* 点击高亮 */
|
|
|
|
|
button.clear:hover,
|
|
|
|
|
button.clear:focus {
|
|
|
|
|
background: rgb(151, 28, 28);
|
|
|
|
|
filter: brightness(150%);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -331,12 +359,21 @@ export default {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
cursor: default;
|
|
|
|
|
}
|
|
|
|
|
li:hover .company_label_data {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
li:hover span {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
/* 底部分页展示区域 */
|
|
|
|
|
.footer {
|
|
|
|
|
.el-pagination {
|
|
|
|
|
margin-left: 82%;
|
|
|
|
|
margin-left: 59%;
|
|
|
|
|
/deep/.el-pagination__total {
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
/deep/.el-input__inner {
|
|
|
|
|
border-radius: 0px;
|
|
|
|
|
background: #3c4b4a;
|
|
|
|
|
|
