lukeyan
2 years ago
parent
9e5f1ac296
commit
af6aae9649
@ -1,257 +1,277 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="cardBox">
|
<div class="cardBox">
|
||||||
<div class="cardContent">
|
<div class="cardContent">
|
||||||
<!-- 卡片展示 -->
|
<!-- 卡片展示 -->
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="6" class="cardCol" v-for="(i, index) in cardListArr" :key="index" @click.native="goArchives(i)">
|
<el-col
|
||||||
<div class="cardList">
|
:span="6"
|
||||||
<div class="cardListHead">
|
class="cardCol"
|
||||||
<span>{{ i.companyName }}</span>
|
v-for="(i, index) in cardListArr"
|
||||||
</div>
|
:key="index"
|
||||||
<div class="cardListBody">
|
@click.native="goArchives(i)"
|
||||||
<div class="bodySign" :style="{ 'background': 'url('+ i.picUrl +')' }">
|
>
|
||||||
<!-- <img :src="i.picUrl"/> -->
|
<div class="cardList">
|
||||||
<!-- 中间标签 -->
|
<div class="cardListHead">
|
||||||
<div class="sign">
|
<span>{{ i.companyName }}</span>
|
||||||
<div class="impBtnList">
|
</div>
|
||||||
<div
|
<div class="cardListBody">
|
||||||
:class="{
|
<div
|
||||||
shewei: a == '剧毒' || a == '易制毒',
|
class="bodySign"
|
||||||
zhongdian: a == '消防重点' || a == '所管消防',
|
:style="{ background: 'url(' + i.picUrl + ')' }"
|
||||||
zhibao: a == '放射源' || a == '易制爆',
|
>
|
||||||
zhian: a == '治安重点' || a == '创安单位',
|
<!-- <img :src="i.picUrl"/> -->
|
||||||
}"
|
<!-- 中间标签 -->
|
||||||
v-for="a in i.companyTypes"
|
<div class="sign">
|
||||||
:key="a"
|
<div class="impBtnList">
|
||||||
>
|
<div
|
||||||
{{ a }}
|
:class="{
|
||||||
</div>
|
shewei: a == '剧毒' || a == '易制毒',
|
||||||
</div>
|
zhongdian: a == '消防重点' || a == '所管消防',
|
||||||
</div>
|
zhibao: a == '放射源' || a == '易制爆',
|
||||||
</div>
|
zhian: a == '治安重点' || a == '创安单位',
|
||||||
</div>
|
}"
|
||||||
<div class="cardListFoot">
|
v-for="a in i.companyTypes"
|
||||||
<el-descriptions class="margin-top" :column="2">
|
:key="a"
|
||||||
<el-descriptions-item label="企业员工">{{ i.staffCount || 0}} 人</el-descriptions-item>
|
>
|
||||||
<el-descriptions-item label="是否有过处罚">
|
{{ a }}
|
||||||
<span v-if="i.caseCount == 13">是</span>
|
|
||||||
<span v-else>否</span>
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="企业安全责任人电话">{{ i.emergencyContactPhone }}</el-descriptions-item>
|
|
||||||
</el-descriptions>
|
|
||||||
<div class="address">
|
|
||||||
<img src="@/assets/enterpriseArchives/address.png" alt="">
|
|
||||||
<span>{{ i.companyAddress }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</div>
|
||||||
</el-row>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cardListFoot">
|
||||||
|
<el-descriptions class="margin-top" :column="2">
|
||||||
|
<el-descriptions-item label="企业员工"
|
||||||
|
>{{ i.staffCount || 0 }} 人</el-descriptions-item
|
||||||
|
>
|
||||||
|
<el-descriptions-item label="是否有过处罚">
|
||||||
|
<span v-if="i.caseCount == 13">是</span>
|
||||||
|
<span v-else>否</span>
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="企业安全责任人电话">{{
|
||||||
|
i.emergencyContactPhone
|
||||||
|
}}</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
<div class="address">
|
||||||
|
<img src="@/assets/enterpriseArchives/address.png" alt="" />
|
||||||
|
<span>{{ i.companyAddress }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props:{
|
props: {
|
||||||
cardList:{
|
cardList: {
|
||||||
type:Array,
|
type: Array,
|
||||||
default:()=> []
|
default: () => [],
|
||||||
}
|
|
||||||
},
|
|
||||||
watch:{
|
|
||||||
cardList:{
|
|
||||||
handler(val){
|
|
||||||
this.cardListArr =val
|
|
||||||
},
|
|
||||||
immediate:true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
cardListArr:[]
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
created() {
|
},
|
||||||
|
watch: {
|
||||||
|
cardList: {
|
||||||
},
|
handler(val) {
|
||||||
mounted(){
|
this.cardListArr = val;
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
},
|
},
|
||||||
methods: {
|
},
|
||||||
goArchives(val) {
|
data() {
|
||||||
console.log(val,'val');
|
return {
|
||||||
sessionStorage.setItem('companyID', val.id)
|
cardListArr: [],
|
||||||
sessionStorage.setItem('companyName', val.companyName)
|
};
|
||||||
this.$router.push({
|
},
|
||||||
name: 'archives',
|
created() {},
|
||||||
|
mounted() {},
|
||||||
})
|
methods: {
|
||||||
},
|
goArchives(val) {
|
||||||
|
console.log(val, "val");
|
||||||
|
sessionStorage.setItem("companyID", val.id);
|
||||||
|
sessionStorage.setItem("companyName", val.companyName);
|
||||||
|
this.$router.push({
|
||||||
|
name: "archives",
|
||||||
|
});
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.cardBox{
|
.cardBox {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
border: 0.1px solid #495e70;
|
||||||
|
height: 65vh;
|
||||||
|
.cardContent {
|
||||||
|
width: 80%;
|
||||||
|
height: 60vh;
|
||||||
|
// border:4px solid #fff;
|
||||||
|
}
|
||||||
|
.cardCol {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
.cardContent {
|
margin-bottom: 2vh;
|
||||||
width: 80%;
|
}
|
||||||
|
.cardList {
|
||||||
|
width: 20vw;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 30vh;
|
||||||
|
background: url("~@/assets/enterpriseArchives/cardBg.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
.cardListHead {
|
||||||
|
height: 39px;
|
||||||
|
z-index: 99;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
background: url("~@/assets/enterpriseArchives/cardTitle.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 382px;
|
||||||
}
|
}
|
||||||
.cardCol{
|
.cardListHead span {
|
||||||
display: flex;
|
color: #ffffff;
|
||||||
justify-content: center;
|
display: inline-block;
|
||||||
margin-bottom: 2vh;
|
margin-top: 2px;
|
||||||
}
|
}
|
||||||
.cardList {
|
.cardListBody {
|
||||||
width: 382px;
|
width: 20vw;
|
||||||
cursor: pointer;
|
display: flex;
|
||||||
height: 291px;
|
height: 200px;
|
||||||
background: url("~@/assets/enterpriseArchives/cardBg.png") no-repeat;
|
justify-content: center;
|
||||||
.cardListHead {
|
}
|
||||||
height: 39px;
|
.bodySign {
|
||||||
z-index: 99;
|
width: 95%;
|
||||||
text-align: center;
|
// background: url("~@/assets/enterpriseArchives/build.jpg") no-repeat;
|
||||||
position: absolute;
|
background-size: cover;
|
||||||
background: url(data:image/png;base64,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) no-repeat;
|
position: relative;
|
||||||
width: 382px;
|
.sign {
|
||||||
}
|
position: absolute;
|
||||||
.cardListHead span{
|
bottom: 5px;
|
||||||
color: #FFFFFF;
|
width: 100%;
|
||||||
display: inline-block;
|
color: #fff;
|
||||||
margin-top: 2px;
|
display: flex;
|
||||||
}
|
justify-content: space-around;
|
||||||
.cardListBody{
|
.impBtnList {
|
||||||
width: 100%;
|
height: 40px;
|
||||||
display: flex;
|
width: 100%;
|
||||||
height: 200px;
|
display: flex;
|
||||||
justify-content: center;
|
align-items: center;
|
||||||
}
|
overflow: hidden;
|
||||||
.bodySign {
|
white-space: nowrap; //禁止换行
|
||||||
width: 95%;
|
|
||||||
// background: url("~@/assets/enterpriseArchives/build.jpg") no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
position: relative;
|
|
||||||
.sign {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 5px;
|
|
||||||
width: 100%;
|
|
||||||
color: #fff;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
.impBtnList {
|
|
||||||
height: 40px;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap; //禁止换行
|
|
||||||
|
|
||||||
text-overflow: ellipsis; //...
|
text-overflow: ellipsis; //...
|
||||||
//margin-bottom: 5px;
|
//margin-bottom: 5px;
|
||||||
|
|
||||||
.shewei {
|
.shewei {
|
||||||
height: 26px;
|
height: 26px;
|
||||||
line-height: 26px;
|
line-height: 26px;
|
||||||
width: auto;
|
width: auto;
|
||||||
background: url("~@/assets/companyFile/编组 11991.png")
|
background: url("~@/assets/companyFile/编组 11991.png") no-repeat;
|
||||||
no-repeat;
|
background-size: 100% 100%;
|
||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #b5ebff;
|
color: #b5ebff;
|
||||||
letter-spacing: 0.44px;
|
letter-spacing: 0.44px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.zhongdian {
|
.zhongdian {
|
||||||
height: 26px;
|
height: 26px;
|
||||||
line-height: 26px;
|
line-height: 26px;
|
||||||
width: auto;
|
width: auto;
|
||||||
background: url("~@/assets/companyFile/编组 11222221.png")
|
background: url("~@/assets/companyFile/编组 11222221.png") no-repeat;
|
||||||
no-repeat;
|
background-size: 100% 100%;
|
||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #e3deff;
|
color: #e3deff;
|
||||||
letter-spacing: 0.44px;
|
letter-spacing: 0.44px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.zhibao {
|
.zhibao {
|
||||||
height: 26px;
|
height: 26px;
|
||||||
line-height: 26px;
|
line-height: 26px;
|
||||||
width: auto;
|
width: auto;
|
||||||
background: url("~@/assets/companyFile/编组 11991备份 10.png")
|
background: url("~@/assets/companyFile/编组 11991备份 10.png")
|
||||||
no-repeat;
|
no-repeat;
|
||||||
padding: 0 5px;
|
background-size: 100% 100%;
|
||||||
font-size: 14px;
|
padding: 0 5px;
|
||||||
color: #e3deff;
|
font-size: 14px;
|
||||||
letter-spacing: 0.44px;
|
color: #e3deff;
|
||||||
font-weight: 400;
|
letter-spacing: 0.44px;
|
||||||
background-size: 100% 100%;
|
font-weight: 400;
|
||||||
margin-right: 10px;
|
background-size: 100% 100%;
|
||||||
}
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
.zhian {
|
.zhian {
|
||||||
height: 26px;
|
height: 26px;
|
||||||
line-height: 26px;
|
line-height: 26px;
|
||||||
width: auto;
|
width: auto;
|
||||||
background: url("~@/assets/companyFile/编组 11991备份 21.png")
|
background: url("~@/assets/companyFile/编组 11991备份 21.png")
|
||||||
no-repeat;
|
no-repeat;
|
||||||
padding: 0 5px;
|
background-size: 100% 100%;
|
||||||
font-size: 14px;
|
padding: 0 5px;
|
||||||
color: #e3deff;
|
font-size: 14px;
|
||||||
letter-spacing: 0.44px;
|
color: #e3deff;
|
||||||
font-weight: 400;
|
letter-spacing: 0.44px;
|
||||||
background-size: 100% 100%;
|
font-weight: 400;
|
||||||
margin-right: 10px;
|
background-size: 100% 100%;
|
||||||
}
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
.signGreen{
|
|
||||||
font-size: 14px;
|
|
||||||
background: url("~@/assets/enterpriseArchives/signGreen.png") no-repeat;
|
|
||||||
}
|
|
||||||
.signRed{
|
|
||||||
background: url("~@/assets/enterpriseArchives/signRed.png") no-repeat;
|
|
||||||
}.signBlue{
|
|
||||||
background: url("~@/assets/enterpriseArchives/signBlue.png") no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
padding: 3px;
|
|
||||||
padding-left: 6px;
|
|
||||||
padding-right: 6px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.cardListFoot{
|
.signGreen {
|
||||||
color: #fff;
|
font-size: 14px;
|
||||||
padding: 0 10px 0 10px;
|
background: url("~@/assets/enterpriseArchives/signGreen.png")
|
||||||
margin-top: 5px;
|
no-repeat;
|
||||||
.address{
|
background-size: 100% 100%;
|
||||||
font-size: 14px;
|
|
||||||
margin-top: 4px;
|
|
||||||
img{
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
::v-deep .el-descriptions{
|
.signRed {
|
||||||
width: 80%!important;
|
background: url("~@/assets/enterpriseArchives/signRed.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
::v-deep .el-descriptions__body{
|
.signBlue {
|
||||||
color: #fff;
|
background: url("~@/assets/enterpriseArchives/signBlue.png") no-repeat;
|
||||||
background-color: transparent!important;
|
background-size: 100% 100%;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 3px;
|
||||||
|
padding-left: 6px;
|
||||||
|
padding-right: 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
::v-deep .el-descriptions-item__cell{
|
}
|
||||||
padding-bottom: 3px!important;
|
}
|
||||||
|
.cardListFoot {
|
||||||
|
color: #fff;
|
||||||
|
padding: 0 10px 0 10px;
|
||||||
|
margin-top: 5px;
|
||||||
|
.address {
|
||||||
|
font-size: 14px;
|
||||||
|
margin-top: 4px;
|
||||||
|
img {
|
||||||
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
::v-deep .el-descriptions {
|
||||||
|
width: 80% !important;
|
||||||
|
}
|
||||||
|
::v-deep .el-descriptions__body {
|
||||||
|
color: #fff;
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
::v-deep .el-descriptions-item__cell {
|
||||||
|
padding-bottom: 3px !important;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -0,0 +1,224 @@
|
|||||||
|
<template>
|
||||||
|
<div class="card_box">
|
||||||
|
<div
|
||||||
|
class="card_box_item"
|
||||||
|
v-for="(i, index) in cardList"
|
||||||
|
:key="index"
|
||||||
|
@click="change_item(i)"
|
||||||
|
>
|
||||||
|
<!-- 盒子头部企业公司名 -->
|
||||||
|
<div class="card_head" :title="i.companyName">
|
||||||
|
{{ i.companyName }}
|
||||||
|
</div>
|
||||||
|
<!-- 企业图片展示区域 -->
|
||||||
|
<div class="card_company">
|
||||||
|
<img :src="i.picUrl" alt="" @error="setDefaultImage" />
|
||||||
|
<!-- 企业类型标签 -->
|
||||||
|
<div class="company_type">
|
||||||
|
<div
|
||||||
|
:class="{
|
||||||
|
shewei: val == '剧毒' || val == '易制毒',
|
||||||
|
zhongdian: val == '消防重点' || val == '所管消防',
|
||||||
|
zhibao: val == '放射源' || val == '易制爆',
|
||||||
|
zhian:
|
||||||
|
val == '治安重点' || val == '创安单位' || val == '外资合资',
|
||||||
|
}"
|
||||||
|
v-for="(val, index) in i.companyTypes"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
{{ val }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 企业信息展示 -->
|
||||||
|
<div class="card_text">
|
||||||
|
<el-descriptions class="margin-top" :column="2">
|
||||||
|
<el-descriptions-item label="企业员工"
|
||||||
|
>{{ i.staffCount || 0 }} 人</el-descriptions-item
|
||||||
|
>
|
||||||
|
<el-descriptions-item label="是否有过处罚">
|
||||||
|
<span v-if="i.caseCount == 13">是</span>
|
||||||
|
<span v-else>否</span>
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="企业安全责任人电话">{{
|
||||||
|
i.emergencyContactPhone
|
||||||
|
}}</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
<div class="address">
|
||||||
|
<i class="el-icon-location-outline"></i>
|
||||||
|
<span>{{ i.companyAddress }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import defaultImage from "@/assets/companyFile/default.png";
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
// 公司相关详情数据
|
||||||
|
cardList: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
cardListArr: [],
|
||||||
|
massage_title: "",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setDefaultImage(e) {
|
||||||
|
// 加载失败默认图片
|
||||||
|
e.target.src = defaultImage;
|
||||||
|
},
|
||||||
|
// 跳转公司详情页
|
||||||
|
change_item(val) {
|
||||||
|
sessionStorage.setItem("companyID", val.id);
|
||||||
|
sessionStorage.setItem("companyName", val.companyName);
|
||||||
|
this.$router.push({
|
||||||
|
name: "archives",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.card_box {
|
||||||
|
width: 76vw;
|
||||||
|
height: 58vh;
|
||||||
|
margin-top: 2vh;
|
||||||
|
margin-left: 12vw;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.card_box_item {
|
||||||
|
width: 17.5vw;
|
||||||
|
height: 27vh;
|
||||||
|
margin-top: 1vh;
|
||||||
|
margin-left: 1.2vw;
|
||||||
|
background: url("~@/assets/enterpriseArchives/cardBg.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
.card_head {
|
||||||
|
width: 17.5vw;
|
||||||
|
height: 4vh;
|
||||||
|
background: url("~@/assets/enterpriseArchives/cardTitle.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
color: aliceblue;
|
||||||
|
text-align: center;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.card_company {
|
||||||
|
width: 17.5vw;
|
||||||
|
height: 15vh;
|
||||||
|
position: relative;
|
||||||
|
img {
|
||||||
|
width: 17.5vw;
|
||||||
|
height: 15vh;
|
||||||
|
}
|
||||||
|
.company_type {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 10;
|
||||||
|
left: 10px;
|
||||||
|
width: 16.4vw;
|
||||||
|
bottom: 5px;
|
||||||
|
background: #161325;
|
||||||
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
.shewei {
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
width: 60px;
|
||||||
|
background: url("~@/assets/companyFile/编组 11991.png") no-repeat;
|
||||||
|
padding: 0 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #b5ebff;
|
||||||
|
letter-spacing: 0.44px;
|
||||||
|
font-weight: 400;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zhongdian {
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
width: 80px;
|
||||||
|
background: url("~@/assets/companyFile/编组 11222221.png") no-repeat;
|
||||||
|
padding: 0 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #e3deff;
|
||||||
|
letter-spacing: 0.44px;
|
||||||
|
font-weight: 400;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zhibao {
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
width: 60px;
|
||||||
|
background: url("~@/assets/companyFile/编组 11991备份 10.png")
|
||||||
|
no-repeat;
|
||||||
|
padding: 0 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #e3deff;
|
||||||
|
letter-spacing: 0.44px;
|
||||||
|
font-weight: 400;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zhian {
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
width: 80px;
|
||||||
|
background: url("~@/assets/companyFile/编组 11991备份 21.png")
|
||||||
|
no-repeat;
|
||||||
|
padding: 0 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #e3deff;
|
||||||
|
letter-spacing: 0.44px;
|
||||||
|
font-weight: 400;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.card_text {
|
||||||
|
margin-left: 0.5vw;
|
||||||
|
width: 17vw;
|
||||||
|
height: 8vh;
|
||||||
|
color: #fff;
|
||||||
|
.address {
|
||||||
|
font-size: 14px;
|
||||||
|
margin-top: 4px;
|
||||||
|
height: 2vh;
|
||||||
|
line-height: 2vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
::v-deep .el-descriptions {
|
||||||
|
width: 80% !important;
|
||||||
|
}
|
||||||
|
::v-deep .el-descriptions__body {
|
||||||
|
color: #fff;
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
::v-deep .el-descriptions-item__cell {
|
||||||
|
padding-bottom: 3px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,266 +1,295 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<div class="searchMain" v-show="!isShow">
|
<div class="searchMain" v-show="!isShow">
|
||||||
<div class="searchBox">
|
<div class="searchBox">
|
||||||
<div class="searchBody" >
|
<div class="searchBody">
|
||||||
<div class="topLogo">
|
<div class="topLogo">
|
||||||
<img src="../../assets/companyFile/档案981.png" alt="">
|
<img src="../../assets/companyFile/档案981.png" alt="" />
|
||||||
企业档案
|
企业档案
|
||||||
</div>
|
</div>
|
||||||
<div class="totalNum">
|
<div class="totalNum">
|
||||||
<span>共有</span><i class="numItem" v-for="(item, index) in numList" :key="index">{{ item
|
<span>共有</span
|
||||||
}}</i><span>家企业</span>
|
><i class="numItem" v-for="(item, index) in numList" :key="index">{{
|
||||||
</div>
|
item
|
||||||
<div class="zhcxBox"><input type="text" class="zhcxBoxIPT" placeholder="请输入企业名称/员工姓名/车牌号检索"
|
}}</i
|
||||||
v-model.trim="searchVal">
|
><span>家企业</span>
|
||||||
<el-button type="primary" icon="el-icon-search" class="ssBtn" @click="showResult(searchVal)"><span>搜索</span>
|
</div>
|
||||||
</el-button>
|
<div class="zhcxBox">
|
||||||
</div>
|
<input
|
||||||
<div class="zjssBox">
|
type="text"
|
||||||
<span style="color: #37FDC7;">最近搜索 </span>
|
class="zhcxBoxIPT"
|
||||||
<div class="ssgs" v-for="(item, index) in historyList" :key="index"><span class="hisSpan" @click="showResult(item)">{{
|
placeholder="请输入企业名称/员工姓名/车牌号检索"
|
||||||
item }}</span></div>
|
v-model.trim="searchVal"
|
||||||
</div>
|
/>
|
||||||
</div>
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-search"
|
||||||
|
class="ssBtn"
|
||||||
|
@click="showResult(searchVal)"
|
||||||
|
><span>搜索</span>
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="zjssBox">
|
||||||
|
<span style="color: #37fdc7">最近搜索 </span>
|
||||||
|
<div class="ssgs" v-for="(item, index) in historyList" :key="index">
|
||||||
|
<span class="hisSpan" @click="showResult(item)">{{ item }}</span>
|
||||||
</div>
|
</div>
|
||||||
<card :cardList="cardList"></card>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<result :searchVal="searchVal" :total="total" :historyList="historyList" :resultList="resultList"
|
</div>
|
||||||
@clearInput="clearInput()" v-if="isShow">
|
<!-- <card :cardList="cardList"></card> -->
|
||||||
</result>
|
<CardBox ref="cardBox" :cardList="cardList"></CardBox>
|
||||||
</div>
|
</div>
|
||||||
|
<result
|
||||||
|
:searchVal="searchVal"
|
||||||
|
:total="total"
|
||||||
|
:historyList="historyList"
|
||||||
|
:resultList="resultList"
|
||||||
|
@clearInput="clearInput()"
|
||||||
|
v-if="isShow"
|
||||||
|
>
|
||||||
|
</result>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import result from './result.vue'
|
import result from "./result.vue";
|
||||||
import card from './componets/card.vue'
|
import CardBox from "./componets/cardBox"
|
||||||
import { listTotal, historyList, searchList,cardLists } from '@/api/enterpriseArchives'
|
// import card from "./componets/card.vue";
|
||||||
|
import {
|
||||||
|
listTotal,
|
||||||
|
historyList,
|
||||||
|
searchList,
|
||||||
|
cardLists,
|
||||||
|
} from "@/api/enterpriseArchives";
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
result,
|
result,
|
||||||
card
|
// card,
|
||||||
|
CardBox
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
cardList: [],
|
||||||
|
numList: [],
|
||||||
|
totalNum: "",
|
||||||
|
searchVal: "",
|
||||||
|
isShow: false,
|
||||||
|
resultList: [],
|
||||||
|
historyList: [],
|
||||||
|
resultList1: [],
|
||||||
|
total: 0,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getlistTotal();
|
||||||
|
this.gethistoryList();
|
||||||
|
this.resultList1 = JSON.parse(JSON.stringify(this.resultList));
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getCardList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getCardList() {
|
||||||
|
//卡片列表
|
||||||
|
this.cardList = [];
|
||||||
|
cardLists().then((res) => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
this.cardList = res.data;
|
||||||
|
}
|
||||||
|
});
|
||||||
},
|
},
|
||||||
data() {
|
showResult(val) {
|
||||||
return {
|
if (!val) {
|
||||||
cardList:[],
|
this.$message.warning("请输入要查询的关键词");
|
||||||
numList: [],
|
return;
|
||||||
totalNum: '',
|
}
|
||||||
searchVal: '',
|
this.searchVal = val;
|
||||||
isShow: false,
|
searchList({ searchValue: val }).then((res) => {
|
||||||
resultList: [],
|
if (res.total || res.data.length) {
|
||||||
historyList: [],
|
this.resultList = res.data;
|
||||||
resultList1: [],
|
this.total = res.total;
|
||||||
total: 0,
|
this.isShow = true;
|
||||||
|
} else {
|
||||||
|
this.$message.warning("未查询到相关数据");
|
||||||
}
|
}
|
||||||
|
});
|
||||||
},
|
},
|
||||||
created() {
|
clearInput() {
|
||||||
this.getlistTotal()
|
this.resultList = JSON.parse(JSON.stringify(this.resultList1));
|
||||||
this.gethistoryList()
|
this.isShow = false;
|
||||||
this.resultList1 = JSON.parse(JSON.stringify(this.resultList))
|
this.gethistoryList();
|
||||||
|
this.getCardList();
|
||||||
},
|
},
|
||||||
mounted(){
|
getlistTotal() {
|
||||||
this.getCardList()
|
listTotal().then((res) => {
|
||||||
|
this.totalNum = res.data;
|
||||||
|
this.numList = this.totalNum.toString().split("");
|
||||||
|
});
|
||||||
},
|
},
|
||||||
methods: {
|
gethistoryList() {
|
||||||
getCardList(){//卡片列表
|
historyList().then((res) => {
|
||||||
this.cardList = []
|
this.historyList = res.data;
|
||||||
cardLists().then((res) => {
|
this.historyList = this.historyList.filter((item, index) => {
|
||||||
if(res.code == 200) {
|
if (index < 5) {
|
||||||
this.cardList = res.data
|
return item;
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
},
|
});
|
||||||
showResult(val) {
|
|
||||||
if (!val) {
|
|
||||||
this.$message.warning('请输入要查询的关键词')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.searchVal = val
|
|
||||||
searchList({ searchValue: val }).then(res => {
|
|
||||||
if (res.total || res.data.length) {
|
|
||||||
this.resultList = res.data
|
|
||||||
this.total = res.total
|
|
||||||
this.isShow = true
|
|
||||||
} else {
|
|
||||||
this.$message.warning('未查询到相关数据')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
clearInput() {
|
|
||||||
this.resultList = JSON.parse(JSON.stringify(this.resultList1))
|
|
||||||
this.isShow = false
|
|
||||||
this.gethistoryList()
|
|
||||||
this.getCardList()
|
|
||||||
},
|
|
||||||
getlistTotal() {
|
|
||||||
listTotal().then((res) => {
|
|
||||||
this.totalNum = res.data
|
|
||||||
this.numList = this.totalNum.toString().split('')
|
|
||||||
})
|
|
||||||
},
|
|
||||||
gethistoryList() {
|
|
||||||
historyList().then((res) => {
|
|
||||||
this.historyList = res.data
|
|
||||||
this.historyList = this.historyList.filter((item, index) => {
|
|
||||||
if (index < 5) {
|
|
||||||
return item
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.main {
|
.main {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 80px);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/deep/.el-scrollbar__view {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/.el-scrollbar__wrap {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.searchMain {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100% - 80px);
|
}
|
||||||
|
.searchBox {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.searchBody {
|
||||||
|
width: 1050px;
|
||||||
|
height: 28vh;
|
||||||
|
// margin-top: 160px;
|
||||||
|
margin-top: 20px;
|
||||||
|
// border: 0.1px solid #495e70;
|
||||||
|
// border-bottom: 1px solid #6C8097;
|
||||||
|
|
||||||
/deep/.el-scrollbar__view {
|
.topLogo {
|
||||||
padding: 0
|
width: 260px;
|
||||||
}
|
height: 5vh;
|
||||||
|
margin: 0 auto;
|
||||||
|
font-size: 36px;
|
||||||
|
color: aliceblue;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
letter-spacing: 5px;
|
||||||
|
|
||||||
/deep/.el-scrollbar__wrap {
|
img {
|
||||||
margin: 0;
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.searchMain {
|
}
|
||||||
width: 100%;
|
.totalNum {
|
||||||
}
|
margin-top: 2.5vh;
|
||||||
.searchBox {
|
width: 100%;
|
||||||
display: flex;
|
height: 5vh;
|
||||||
width: 100%;
|
color: rgba(248, 251, 255, 0.7);
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.searchBody {
|
|
||||||
width: 1050px;
|
|
||||||
height: 320px;
|
|
||||||
// margin-top: 160px;
|
|
||||||
margin-top: 60px;
|
|
||||||
// border-bottom: 1px solid #6C8097;
|
|
||||||
|
|
||||||
.topLogo {
|
font-size: 22px;
|
||||||
width: 260px;
|
word-spacing: 5px;
|
||||||
height: 50px;
|
display: flex;
|
||||||
margin: 0 auto;
|
align-items: center;
|
||||||
font-size: 36px;
|
justify-content: center;
|
||||||
color: aliceblue;
|
letter-spacing: 10px;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
letter-spacing: 5px;
|
|
||||||
|
|
||||||
img {
|
.numItem {
|
||||||
width: 35px;
|
width: 25px;
|
||||||
height: 35px;
|
height: 40px;
|
||||||
margin-right: 10px;
|
display: inline-block;
|
||||||
}
|
background-image: linear-gradient(
|
||||||
}
|
180deg,
|
||||||
|
rgba(234, 241, 248, 0.1) 0%,
|
||||||
|
rgba(208, 222, 238, 0.1) 100%
|
||||||
|
);
|
||||||
|
border: 1px solid #33cccc;
|
||||||
|
font-family: DS-Digital-Bold;
|
||||||
|
font-size: 40px;
|
||||||
|
color: rgba(248, 251, 255, 0.89);
|
||||||
|
text-align: center;
|
||||||
|
line-height: 38px;
|
||||||
|
text-shadow: 0 0 8px rgba(44, 254, 211, 0.69);
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
|
margin-right: 10px;
|
||||||
|
letter-spacing: 0;
|
||||||
}
|
}
|
||||||
.totalNum {
|
}
|
||||||
margin-top: 30px;
|
|
||||||
width: 100%;
|
|
||||||
height: 50px;
|
|
||||||
color: rgba(248, 251, 255, 0.7);
|
|
||||||
|
|
||||||
font-size: 22px;
|
.zhcxBox {
|
||||||
word-spacing: 5px;
|
width: 100%;
|
||||||
display: flex;
|
height: 54px;
|
||||||
align-items: center;
|
margin-top: 30px;
|
||||||
justify-content: center;
|
display: flex;
|
||||||
letter-spacing: 10px;
|
|
||||||
|
|
||||||
.numItem {
|
.zhcxBoxIPT {
|
||||||
width: 25px;
|
height: 100%;
|
||||||
height: 40px;
|
width: 900px;
|
||||||
display: inline-block;
|
font-size: 20px;
|
||||||
background-image: linear-gradient(180deg, rgba(234, 241, 248, 0.10) 0%, rgba(208, 222, 238, 0.10) 100%);
|
background: #121a18;
|
||||||
border: 1px solid #33CCCC;
|
border: 1px solid rgba(108, 128, 151, 0.7);
|
||||||
font-family: DS-Digital-Bold;
|
border-radius: 4px;
|
||||||
font-size: 40px;
|
font-size: 18px;
|
||||||
color: rgba(248, 251, 255, 0.89);
|
color: #f8fbff;
|
||||||
text-align: center;
|
letter-spacing: 1.29px;
|
||||||
line-height: 38px;
|
line-height: 16px;
|
||||||
text-shadow: 0 0 8px rgba(44, 254, 211, 0.69);
|
font-weight: 400;
|
||||||
font-weight: 700;
|
opacity: 0.95;
|
||||||
font-style: normal;
|
|
||||||
margin-right: 10px;
|
|
||||||
letter-spacing: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.zhcxBox {
|
input:focus,
|
||||||
width: 100%;
|
textarea:focus {
|
||||||
height: 54px;
|
outline: none;
|
||||||
margin-top: 30px;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.zhcxBoxIPT {
|
|
||||||
height: 100%;
|
|
||||||
width: 900px;
|
|
||||||
font-size: 20px;
|
|
||||||
background: #121A18;
|
|
||||||
border: 1px solid rgba(108, 128, 151, 0.7);
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 18px;
|
|
||||||
color: #F8FBFF;
|
|
||||||
letter-spacing: 1.29px;
|
|
||||||
line-height: 16px;
|
|
||||||
font-weight: 400;
|
|
||||||
opacity: 0.95;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
input:focus,
|
|
||||||
textarea:focus {
|
|
||||||
|
|
||||||
outline: none;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.ssBtn {
|
|
||||||
margin-left: 20px;
|
|
||||||
display: inline-block;
|
|
||||||
height: 100%;
|
|
||||||
width: 100px;
|
|
||||||
color: #eee;
|
|
||||||
font-size: 20px;
|
|
||||||
text-align: center;
|
|
||||||
border: 0;
|
|
||||||
background: url('~@/assets/companyFile/2121.png') no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.zjssBox {
|
.ssBtn {
|
||||||
height: 40px;
|
margin-left: 20px;
|
||||||
margin-top: 20px;
|
display: inline-block;
|
||||||
font-size: 14px;
|
height: 100%;
|
||||||
color: rgba(208, 222, 238, 0.7);
|
width: 100px;
|
||||||
letter-spacing: 1px;
|
color: #eee;
|
||||||
line-height: 12px;
|
font-size: 20px;
|
||||||
font-weight: 400;
|
text-align: center;
|
||||||
display: flex;
|
border: 0;
|
||||||
align-items: center;
|
background: url("~@/assets/companyFile/2121.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.ssgs {
|
.zjssBox {
|
||||||
margin-left: 10px;
|
height: 40px;
|
||||||
height: 28px;
|
margin-top: 20px;
|
||||||
border-radius: 2px;
|
font-size: 14px;
|
||||||
width: auto;
|
color: rgba(208, 222, 238, 0.7);
|
||||||
background: rgba(255, 255, 255, 0.2);
|
letter-spacing: 1px;
|
||||||
display: flex;
|
line-height: 12px;
|
||||||
align-items: center;
|
font-weight: 400;
|
||||||
cursor: pointer;
|
display: flex;
|
||||||
// background: url('~@/assets/companyFile/矩形.png') no-repeat;
|
align-items: center;
|
||||||
// background-size: 100% 100%;
|
|
||||||
.hisSpan {
|
|
||||||
padding: 0px 7px 0px 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
.ssgs {
|
||||||
|
margin-left: 10px;
|
||||||
|
height: 28px;
|
||||||
|
border-radius: 2px;
|
||||||
|
width: auto;
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
// background: url('~@/assets/companyFile/矩形.png') no-repeat;
|
||||||
|
// background-size: 100% 100%;
|
||||||
|
.hisSpan {
|
||||||
|
padding: 0px 7px 0px 7px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in new issue