From f6334332118fa7843432e9c069a454039d0b0831 Mon Sep 17 00:00:00 2001
From: 付延余 <f-yanyu@outlook.com>
Date: 星期四, 19 五月 2022 14:29:30 +0800
Subject: [PATCH] 其他业务
---
src/pages/show/businessPolicy/BusinessPolicy.vue | 546 +++++++++++++++++++++++++++++++----------------------
1 files changed, 319 insertions(+), 227 deletions(-)
diff --git a/src/pages/show/businessPolicy/BusinessPolicy.vue b/src/pages/show/businessPolicy/BusinessPolicy.vue
index 8cde1c3..0a3e77a 100644
--- a/src/pages/show/businessPolicy/BusinessPolicy.vue
+++ b/src/pages/show/businessPolicy/BusinessPolicy.vue
@@ -1,4 +1,5 @@
<template>
+ <!-- 钀ュ晢鏀跨瓥-->
<div id="businessPolicy">
<div class="upCentent">
<!-- 涓讳俊鎭尯 -->
@@ -10,283 +11,288 @@
/>
</div>
<div class="text">绱鍑哄彴鏀跨瓥鏁伴噺</div>
- <div class="numText"><span>280</span>鏉�</div>
+ <div class="numText"><span>{{ CountObj.totalPolicy }}</span>鏉�</div>
</div>
- <div class="upCentent_item"></div>
- <div class="upCentent_item"></div>
- <div class="upCentent_item"></div>
- <div class="upCentent_item"></div>
- </div>
- <!-- 涓昏〃鏍煎尯 -->
- <div class="downCentent">
- <div class="downCentent_item">
- <div class="downCentent_title">
- <span>鏀跨瓥鍐呭</span
- ><img
- src="../../../assets/images/businessPolicy/title_end@2x.png"
+ <div class="upCentent_item">
+ <div class="icon">
+ <img
+ src="../../../assets/images/businessPolicy/icon2@2x.png"
alt=""
/>
+ </div>
+ <div class="text">鎯犲強浼佷笟鏁伴噺</div>
+ <div class="numText"><span>{{ CountObj.units }}</span>涓囨埛</div>
+ </div>
+ <div class="upCentent_item">
+ <div class="icon">
+ <img
+ src="../../../assets/images/businessPolicy/icon3@2x.png"
+ alt=""
+ />
+ </div>
+ <div class="text">鎯犲強涓汉鏁伴噺</div>
+ <div class="numText"><span>{{ CountObj.persons }}</span>涓囦汉</div>
+ </div>
+ <div class="upCentent_item">
+ <div class="icon">
+ <img
+ src="../../../assets/images/businessPolicy/icon4@2x.png"
+ alt=""
+ />
+ </div>
+ <div class="text">鍑忓厤閲戦</div>
+ <div class="numText"><span>{{ CountObj.amount }}</span>涓囧厓</div>
+ </div>
+ <div class="upCentent_item">
+ <div class="icon">
+ <img
+ src="../../../assets/images/businessPolicy/icon5@2x.png"
+ alt=""
+ />
+ </div>
+ <div class="text">鏂伴椈鎶ラ亾鏁伴噺</div>
+ <div class="numText"><span>{{ CountObj.news }}</span>鏉�</div>
+ </div>
+ </div>
+ <!-- 琛ㄦ牸鍖� -->
+ <div class="downCentent">
+ <div class="downCentent_item">
+ <div class="centent_title">
+ <span>鏀跨瓥鍐呭</span
+ ><img
+ src="../../../assets/images/businessPolicy/title_end@2x.png"
+ alt=""
+ />
</div>
<div class="BusinessPolicyTable">
<el-table
stripe
+ max-height="1005"
:data="tableData"
style="width: 100%"
- max-height="1006px"
- :header-row-style="tableHeaderRow"
:row-class-name="tableRowClassName"
+ @row-click="tableRowClick"
>
- <el-table-column prop="keshi" label="绉戝" min-width="10">
+ <el-table-column prop="department" label="绉戝" min-width="10" fixed>
</el-table-column>
<el-table-column
- prop="zhengchemingcheng"
+ prop="policyName"
label="鏀跨瓥鍚嶇О"
min-width="30"
>
</el-table-column>
<el-table-column
- prop="shengxiaoDate"
+ prop="effecttimeStart"
label="鐢熸晥鏃ユ湡鑼冨洿"
min-width="30"
>
</el-table-column>
<el-table-column
- prop="huijiqiyeNum"
+ prop="unitNums"
label="鎯犲強浼佷笟鏁�"
min-width="15"
>
</el-table-column>
- <el-table-column prop="money" label="鍑忓厤閲戦" min-width="15">
+ <el-table-column prop="reductions" label="鍑忓厤閲戦" min-width="15">
</el-table-column>
</el-table>
</div>
</div>
<div class="downCentent_item">
+ <div class="centent_title">
+ <span>鐩稿叧鎶ラ亾</span
+ ><img
+ src="../../../assets/images/businessPolicy/title_end@2x.png"
+ alt=""
+ />
+ </div>
<div class="BusinessPolicyTable">
<el-table
stripe
:data="tableData"
style="width: 100%"
- max-height="1006px"
- :header-row-style="tableHeaderRow"
+ max-height="1005"
:row-class-name="tableRowClassName"
>
- <el-table-column prop="keshi" label="绉戝" min-width="10">
- </el-table-column>
<el-table-column
- prop="zhengchemingcheng"
- label="鏀跨瓥鍚嶇О"
- min-width="30"
+ prop="policyName"
+ label="鏍囬"
+ min-width="70"
+ align="right"
>
</el-table-column>
+ <el-table-column prop="resource" label="鏉ユ簮" min-width="15">
+ </el-table-column>
<el-table-column
- prop="shengxiaoDate"
- label="鐢熸晥鏃ユ湡鑼冨洿"
- min-width="30"
+ prop="unitNums"
+ label="绱鐐瑰嚮閲�"
+ min-width="15"
>
</el-table-column>
</el-table>
</div>
</div>
</div>
+ <!-- 寮瑰嚭瀵硅瘽妗� -->
+ <div class="BusinessPolicyDialog">
+ <el-dialog
+ :visible.sync="tableDialogVisible"
+ width="86%"
+ title="鎴戞槸鏍囬"
+ min-height=" 112rem"
+ >
+ <div class="dislogCloseIcon" @click="tableDialogVisible = false"></div>
+ <h1>{{detailForm.policyName}}</h1>
+ <div class="fuTitle">
+ <span v-if="detailForm.makeDept">鍑哄彴閮ㄩ棬锛歿{detailForm.makeDept}}</span><span v-if="detailForm.makeTime">鍑哄彴鏃堕棿锛歿{detailForm.makeTime}}</span
+ ><span v-if="detailForm.unitNums">鎯犲強浼佷笟锛歿{detailForm.unitNums}}</span><span v-if="detailForm.reductions">鍑忓厤閲戦锛歿{detailForm.reductions}}</span>
+ </div>
+ <div class="dialogText">
+ <el-divider></el-divider>
+ <span v-if="detailForm.policyContent" v-html="detailForm.policyContent"></span>
+ </div>
+ </el-dialog>
+ </div>
</div>
</template>
<script>
+import {getCount, getList, getDetail} from '@/api/businessPolicy'
export default {
data() {
return {
- tableData: [
- {
- keshi: "澶变笟澶�",
- zhengchemingcheng: "澶变笟淇濋櫓绋冲矖杩旇繕鏀跨瓥",
- shengxiaoDate: "2021/3鈥�2022/12",
- huijiqiyeNum: "100瀹�",
- money: "277涓囧厓"
- },
- {
- keshi: "澶变笟澶�",
- zhengchemingcheng: "澶变笟淇濋櫓绋冲矖杩旇繕鏀跨瓥",
- shengxiaoDate: "2021/3鈥�2022/12",
- huijiqiyeNum: "100瀹�",
- money: "277涓囧厓"
- },
- {
- keshi: "澶变笟澶�",
- zhengchemingcheng: "澶变笟淇濋櫓绋冲矖杩旇繕鏀跨瓥",
- shengxiaoDate: "2021/3鈥�2022/12",
- huijiqiyeNum: "100瀹�",
- money: "277涓囧厓"
- },
- {
- keshi: "澶变笟澶�",
- zhengchemingcheng: "澶变笟淇濋櫓绋冲矖杩旇繕鏀跨瓥",
- shengxiaoDate: "2021/3鈥�2022/12",
- huijiqiyeNum: "100瀹�",
- money: "277涓囧厓"
- },
- {
- keshi: "澶变笟澶�",
- zhengchemingcheng: "澶变笟淇濋櫓绋冲矖杩旇繕鏀跨瓥",
- shengxiaoDate: "2021/3鈥�2022/12",
- huijiqiyeNum: "100瀹�",
- money: "277涓囧厓"
- },
- {
- keshi: "澶变笟澶�",
- zhengchemingcheng: "澶变笟淇濋櫓绋冲矖杩旇繕鏀跨瓥",
- shengxiaoDate: "2021/3鈥�2022/12",
- huijiqiyeNum: "100瀹�",
- money: "277涓囧厓"
- },
- {
- keshi: "澶变笟澶�",
- zhengchemingcheng: "澶变笟淇濋櫓绋冲矖杩旇繕鏀跨瓥",
- shengxiaoDate: "2021/3鈥�2022/12",
- huijiqiyeNum: "100瀹�",
- money: "277涓囧厓"
- },
- {
- keshi: "澶变笟澶�",
- zhengchemingcheng: "澶变笟淇濋櫓绋冲矖杩旇繕鏀跨瓥",
- shengxiaoDate: "2021/3鈥�2022/12",
- huijiqiyeNum: "100瀹�",
- money: "277涓囧厓"
- },
- {
- keshi: "澶变笟澶�",
- zhengchemingcheng: "澶变笟淇濋櫓绋冲矖杩旇繕鏀跨瓥",
- shengxiaoDate: "2021/3鈥�2022/12",
- huijiqiyeNum: "100瀹�",
- money: "277涓囧厓"
- },
- {
- keshi: "澶变笟澶�",
- zhengchemingcheng: "澶变笟淇濋櫓绋冲矖杩旇繕鏀跨瓥",
- shengxiaoDate: "2021/3鈥�2022/12",
- huijiqiyeNum: "100瀹�",
- money: "277涓囧厓"
- },
- {
- keshi: "澶变笟澶�",
- zhengchemingcheng: "澶变笟淇濋櫓绋冲矖杩旇繕鏀跨瓥",
- shengxiaoDate: "2021/3鈥�2022/12",
- huijiqiyeNum: "100瀹�",
- money: "277涓囧厓"
- },
- {
- keshi: "澶变笟澶�",
- zhengchemingcheng: "澶变笟淇濋櫓绋冲矖杩旇繕鏀跨瓥",
- shengxiaoDate: "2021/3鈥�2022/12",
- huijiqiyeNum: "100瀹�",
- money: "277涓囧厓"
- },
- {
- keshi: "澶变笟澶�",
- zhengchemingcheng: "澶变笟淇濋櫓绋冲矖杩旇繕鏀跨瓥",
- shengxiaoDate: "2021/3鈥�2022/12",
- huijiqiyeNum: "100瀹�",
- money: "277涓囧厓"
- },
- {
- keshi: "澶变笟澶�",
- zhengchemingcheng: "澶变笟淇濋櫓绋冲矖杩旇繕鏀跨瓥",
- shengxiaoDate: "2021/3鈥�2022/12",
- huijiqiyeNum: "100瀹�",
- money: "277涓囧厓"
- },
- {
- keshi: "澶变笟澶�",
- zhengchemingcheng: "澶变笟淇濋櫓绋冲矖杩旇繕鏀跨瓥",
- shengxiaoDate: "2021/3鈥�2022/12",
- huijiqiyeNum: "100瀹�",
- money: "277涓囧厓"
- },
- {
- keshi: "澶变笟澶�",
- zhengchemingcheng: "澶变笟淇濋櫓绋冲矖杩旇繕鏀跨瓥",
- shengxiaoDate: "2021/3鈥�2022/12",
- huijiqiyeNum: "100瀹�",
- money: "277涓囧厓"
- },
- {
- keshi: "澶变笟澶�",
- zhengchemingcheng: "澶变笟淇濋櫓绋冲矖杩旇繕鏀跨瓥",
- shengxiaoDate: "2021/3鈥�2022/12",
- huijiqiyeNum: "100瀹�",
- money: "277涓囧厓"
- },
- {
- keshi: "澶变笟澶�",
- zhengchemingcheng: "澶变笟淇濋櫓绋冲矖杩旇繕鏀跨瓥",
- shengxiaoDate: "2021/3鈥�2022/12",
- huijiqiyeNum: "100瀹�",
- money: "277涓囧厓"
- },
- {
- keshi: "澶变笟澶�",
- zhengchemingcheng: "澶变笟淇濋櫓绋冲矖杩旇繕鏀跨瓥",
- shengxiaoDate: "2021/3鈥�2022/12",
- huijiqiyeNum: "100瀹�",
- money: "277涓囧厓"
- },
- {
- keshi: "澶变笟澶�",
- zhengchemingcheng: "澶变笟淇濋櫓绋冲矖杩旇繕鏀跨瓥",
- shengxiaoDate: "2021/3鈥�2022/12",
- huijiqiyeNum: "100瀹�",
- money: "277涓囧厓"
- }
- ]
+ CountObj:{},
+ tableData: [],
+ tableDialogVisible: false,
+ tableHeight: window.innerHeight * 0.62,
+ detailForm:{
+ policyName:'', //鏀跨瓥鍚嶇О/鏂伴椈鏍囬
+ makeDept:'', //鍑哄彴閮ㄩ棬
+ makeTime:'', //鍑哄彴鏃堕棿
+ unitNums:'', //鎯犲強浼佷笟鏁�
+ reductions:'', //鍑忓厤閲戦
+ policyContent:'', //鏀跨瓥鍐呭
+ }
};
},
+ mounted(){
+ this.getCount()
+ this.getZhengce()
+ this.getBaodao()
+ },
methods: {
- tableHeaderRow({ rowIndex }) {
- if (rowIndex === 0) return { height: "8rem" };
- },
- tableRowClassName({ rowIndex }) {
+ /*******鏌ヨ钀ュ晢鏀跨瓥鍜岀浉鍏虫姤閬撳垪琛ㄦ帴鍙�*******/
+ getZhengce() {
+ this.getList('1')
+ },
+ getBaodao() {
+ this.getList('2')
+ },
+
+ getList(type) {
+ getList({type:type}).then(res => {
+ if(res.code == 1000) {
+ this.tableData = res.list
+ }
+ })
+ },
+ /***39.鏌ヨ钀ュ晢鏀跨瓥璇︽儏鎺ュ彛***/
+ getDetail(id) {
+ getDetail({id:id}).then(res => {
+ if(res.code == 1000) {
+ this.detailForm.policyName = res.obj.policyName
+ this.detailForm.makeDept = res.obj.makeDept
+ this.detailForm.makeTime = res.obj.makeTime
+ this.detailForm.policyContent = res.obj.policyContent
+ this.detailForm.unitNums = res.obj.unitNums
+ this.detailForm.reductions = res.obj.reductions
+ }
+ })
+ },
+
+ tableRowClassName({rowIndex}) {
if (rowIndex % 2 === 0) {
return "warning-row";
}
return "";
+ },
+ tableRowClick(row) {
+ this.tableDialogVisible = true;
+ console.log(row);
+ console.log(row.__ob__.dep.id);
+ console.log(row.id);
+ this.getDetail(row.id)
+ },
+ // 37. 鏌ヨ钀ュ晢鏀跨瓥浜斾釜缁熻鏁伴噺鎺ュ彛
+ getCount(){
+ getCount().then(res=>{
+ // console.log(res);
+ if(res.code === 1000){
+ this.CountObj = res.obj
+ }
+ })
}
}
};
</script>
<style lang="scss">
@import "../../../assets/css/base";
+@import "../../../assets/css/mixin.scss";
+// 琛ㄦ牸
.BusinessPolicyTable {
- width: 115.4rem;
+ height: 3.92578125rem;
+ width: 4.5078rem;
position: absolute;
- top: 7.2rem;
- left: 3.3rem;
+ top: 0.2813rem;
+ left: 0.1289rem;
+ @include overflow-y();
+
+ .el-table {
+ background: transparent;
+ }
+
+ .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
+ background: none;
+ }
+
+ // 鍘绘帀褰撳墠琛岄珮浜儗鏅鑹�
+ .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+ background: none;
+ }
// 鐘舵�侀鑹�
.el-table .warning-row {
background-color: rgba(81, 210, 255, 0.1);
}
+
.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
border: none;
}
+
.el-table tr {
background: transparent;
}
+
// 澶撮儴
.el-table th.el-table__cell {
background: transparent;
}
- .el-table--striped
- .el-table__body
- tr.el-table__row--striped
- td.el-table__cell {
+
+ .el-table--striped,
+ .el-table__body,
+ tr.el-table__row--striped,
+ td.el-table__cell {
background: transparent;
}
+
.el-table thead {
color: #111111;
}
+
.el-table .el-table__cell {
- padding: 2rem 0;
+ padding: 0;
}
+
.el-table__body tr.hover-row.current-row > td.el-table__cell,
.el-table__body,
tr.hover-row.el-table__row--striped.current-row,
@@ -295,101 +301,187 @@
.el-table__body tr.hover-row > td.el-table__cell {
background: transparent;
}
+
.el-table .cell {
font-weight: 300;
- font-size: 2.6rem;
- //font-family: Source Han Sans CN, Source Han Sans CN-Light;
+ font-size: 0.1016rem;
text-align: center;
color: #ffffff;
- line-height: 2.6rem;
+ line-height: 0.25rem;
}
}
-// }
+
+// dialog瀵硅瘽妗�
+.BusinessPolicyDialog {
+ .el-dialog__wrapper {
+ background: rgba(0, 0, 0, 0.9);
+ }
+
+ .el-dialog {
+ background: url(../../../assets/images/businessPolicy/dialog@2x.png) no-repeat center;
+ background-size: 100% 100%;
+ height: 4.375rem;
+ }
+
+ // 娓呴櫎榛樿鍏抽棴鏍峰紡
+ .el-icon-close:before {
+ content: "";
+ }
+
+ .el-dialog__header {
+ padding: 0;
+ width: 0;
+ height: 0;
+ }
+
+ .el-dialog__body {
+ text-align: center;
+ color: #eeeeee;
+
+ h1 {
+ margin-top: 0.4375rem;
+ font-size: 0.1563rem;
+ }
+
+ span {
+ font-size: 0.1094rem;
+ }
+ }
+
+ .el-divider {
+ margin: 0;
+ background-color: #eeeeee;
+ }
+}
</style>
<style lang="scss" scoped>
-#businessPolicy {
-}
+// #businessPolicy {
+// }
.upCentent {
- height: 23rem;
- width: 248rem;
- margin: 3rem 4rem 0 4rem;
+ height: 0.8984rem;
+ width: 9.6875rem;
+ margin: 0.1172rem 0.1563rem 0 0.1563rem;
display: flex;
+
.upCentent_item {
- width: 46.4rem;
- height: 23rem;
- background: url(../../../assets/images/businessPolicy/bg_1@2x.png) no-repeat
- center;
+ width: 1.8125rem;
+ height: 0.8984rem;
+ background: url(../../../assets/images/businessPolicy/bg_1@2x.png) no-repeat center;
background-size: 100% 100%;
flex: 1;
- margin-right: 4rem;
+ margin-right: 0.1563rem;
text-align: center;
+
&:nth-child(5) {
margin-right: 0;
}
+
.icon img {
- width: 8rem;
- height: 8rem;
- margin-top: 3.1rem;
+ width: 0.3125rem;
+ height: 0.3125rem;
+ margin-top: 0.1211rem;
}
+
.text {
- height: 2.4rem;
- font-size: 2.4rem;
- //font-family: Source Han Sans CN, Source Han Sans CN-Light;
+ height: 0.0938rem;
+ font-size: 0.0938rem;
font-weight: 300;
text-align: center;
color: #ffffff;
- line-height: 2.4rem;
+ line-height: 0.0938rem;
}
+
.numText {
- font-size: 2rem;
- margin-top: 2.5rem;
+ font-size: 0.0781rem;
+ margin-top: 0.0977rem;
color: #ffffff;
+
span {
- font-size: 4.8rem;
+ font-size: 0.1875rem;
//font-family: Source Han Sans CN, Source Han Sans CN-Light;
font-weight: 300;
color: #51d2ff;
- line-height: 2.4rem;
- margin-right: 1.2rem;
+ line-height: 0.0938rem;
+ margin-right: 0.0469rem;
}
}
}
}
+
.downCentent {
- width: 248rem;
- height: 114.6rem;
- margin: 3.6rem 4rem 6.2rem 4rem;
+ width: 9.6875rem;
+ height: 4.4766rem;
+ margin: 0.1406rem 0.1563rem 0.2422rem 40px;
display: flex;
+
.downCentent_item {
- width: 122rem;
- height: 114.6rem;
- background: url(../../../assets/images/businessPolicy/bg_big@2x.png)
- no-repeat center;
+ width: 4.7656rem;
+ height: 4.4766rem;
+ background: url(../../../assets/images/businessPolicy/bg_big@2x.png) no-repeat center;
background-size: 100% 100%;
flex: 1;
- margin-right: 4rem;
- padding: 0 3.3rem 0 3.3rem;
+ margin-right: 0.1563rem;
+ padding: 0 0.1289rem 0 0.1289rem;
position: relative;
+
&:nth-child(2) {
margin-right: 0;
}
- .downCentent_title {
+
+ .centent_title {
position: absolute;
- top: 0.8rem;
- font-size: 3.2rem;
+ top: 0.0313rem;
+ font-size: 0.125rem;
//font-family: Source Han Sans CN, Source Han Sans CN-Regular;
font-weight: 400;
// text-align: left;
color: #51d2ff;
- line-height: 2.6rem;
+ line-height: 0.1016rem;
+
span {
- margin-left: 3.7rem;
- margin-right: 2rem;
+ margin-left: 0.1445rem;
+ margin-right: 0.0781rem;
+ }
+
+ img {
+ width: 0.5313rem;
+ height: 0.0625rem;
}
}
}
}
-.el-table {
- background: transparent;
+
+.BusinessPolicyDialog {
+ .dislogCloseIcon {
+ display: inline-block;
+ width: 0.1875rem;
+ height: 0.1875rem;
+ background: url(../../../assets/images/businessPolicy/dialogClose@2x.png) no-repeat center;
+ // background: 100% 100%;
+ // background-color: red;
+ margin: 0;
+ position: relative;
+ top: 0.2734rem;
+ left: 45%;
+ }
+
+ .fuTitle {
+ margin-top: 0.2344rem;
+
+ span {
+ margin-right: 0.3125rem;
+ }
+ }
+
+ .dialogText {
+ width: 7.5rem;
+ height: 2.3438rem;
+ margin: 0 auto;
+ margin-top: 0.2305rem;
+ text-align: start;
+ white-space: pre-wrap;
+ line-height: 0.1875rem;
+ overflow: scroll;
+ }
}
</style>
--
Gitblit v1.9.1