评审前核查进度图

src/views/system/jbdScan/approve/approve.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <el-dialog
-            title="核查计划进度情况"
+            :title="`核查计划进度情况（编号：${generalList[0].bian_hao_}）`"
             :visible.sync="generalShow"
             width="80%"
             top="0"

src/views/system/jbdScan/approve/approveJS.js

@@ -1,4 +1,3 @@
-import dataTemplate from '@/store/modules/ibps/modules/dataTemplate'
 import echarts from 'echarts'
 export default {
     data () {
@@ -12,7 +11,12 @@ export default {
                 textStyle: { // 数值样式
                     color: 'black',
                     fontSize: 12
+                },
+                formatter: (params) => {
+                    // 这个回调函数不起作用了
+                    return params.value === '0' ? '' : params.value
                 }
+
             }
         }
     },
@@ -94,7 +98,7 @@ export default {
             })
         },
         getJiHuaZiBiaoJiSuan (id) {
-            const sql = `select * from t_rkzztkhcjhzb where parent_id_ = '${id}'`
+            const sql = `select * from t_rkzztkhcjhzb where ji_hua_de_id_ = '${id}'`
             this.$common.request('sql', sql).then(res => {
                 const { data = [] } = res.variables || {}
                 if (data.length > 0) {
@@ -111,7 +115,7 @@ export default {
             })
         },
         getShiShiData (id, activeIndex) {
-            const sql = `select a.*,c.NAME_ as zuYuanPosiName,d.NAME_ as zuYuanName,e.NAME_ as zuZhangName,g.NAME_ as zuZhangBnMen,h.NAME_ as yuanZuZhangBuMen,i.NAME_ as yuanZuZhangName from t_rkzztkhcjhzb a left join t_rkzztkhcjhzb b on a.id_ = b.ji_hua_zi_biao_id left join ibps_party_position c on a.bian_zhi_bu_men_ = c.ID_ left join ibps_party_position h on a.bu_men_ = h.ID_ left join ibps_party_employee i on a.zu_chang_ = i.ID_ left join ibps_party_employee d on a.zu_yuan_ = d.ID_ left join t_hcssjhb f on b.parent_id_ = f.id_ left join ibps_party_position g on f.bian_zhi_bu_men_ = g.ID_ left join ibps_party_employee e on f.bian_zhi_ren_ = e.ID_ where a.parent_id_ = '${id}' order by a.tiao_kuan_hao_`
+            const sql = `select a.*,c.NAME_ as zuYuanPosiName,d.NAME_ as zuYuanName,e.NAME_ as zuZhangName,g.NAME_ as zuZhangBnMen,h.NAME_ as yuanZuZhangBuMen,i.NAME_ as yuanZuZhangName from t_rkzztkhcjhzb a left join t_rkzztkhcjhzb b on a.id_ = b.ji_hua_zi_biao_id left join ibps_party_position c on a.bian_zhi_bu_men_ = c.ID_ left join ibps_party_position h on a.bu_men_ = h.ID_ left join ibps_party_employee i on a.zu_chang_ = i.ID_ left join ibps_party_employee d on a.zu_yuan_ = d.ID_ left join t_hcssjhb f on b.parent_id_ = f.id_ left join ibps_party_position g on f.bian_zhi_bu_men_ = g.ID_ left join ibps_party_employee e on f.bian_zhi_ren_ = e.ID_ where a.ji_hua_de_id_ = '${id}' order by a.tiao_kuan_hao_`
 
             // if (activeIndex === 1) {
             //     sql = `select * from t_rkzztkhcjhzb where parent_id_ = '${id}' order by tiao_kuan_hao_`
@@ -126,7 +130,7 @@ export default {
             })
         },
         getBuFuHeXiangMu (id) {
-            const sql = `select a.*,c.NAME_ as zuYuanPosiName,d.NAME_ as zuYuanName,e.NAME_ as zuZhangName,g.NAME_ as zuZhangBnMen from t_rkzztkhcjhzb a left join t_rkzztkhcjhzb b on a.id_ = b.ji_hua_zi_biao_id left join ibps_party_position c on a.bian_zhi_bu_men_ = c.ID_ left join ibps_party_employee d on a.zu_yuan_ = d.ID_ left join t_hcssjhb f on b.parent_id_ = f.id_ left join ibps_party_position g on f.bian_zhi_bu_men_ = g.ID_ left join ibps_party_employee e on f.bian_zhi_ren_ = e.ID_ where a.parent_id_ = '${id}' and a.shen_he_jie_guo_ = 'N' order by a.tiao_kuan_hao_`
+            const sql = `select a.*,c.NAME_ as zuYuanPosiName,d.NAME_ as zuYuanName,e.NAME_ as zuZhangName,g.NAME_ as zuZhangBnMen from t_rkzztkhcjhzb a left join t_rkzztkhcjhzb b on a.id_ = b.ji_hua_zi_biao_id left join ibps_party_position c on a.bian_zhi_bu_men_ = c.ID_ left join ibps_party_employee d on a.zu_yuan_ = d.ID_ left join t_hcssjhb f on b.parent_id_ = f.id_ left join ibps_party_position g on f.bian_zhi_bu_men_ = g.ID_ left join ibps_party_employee e on f.bian_zhi_ren_ = e.ID_ where a.ji_hua_de_id_ = '${id}' and a.he_cha_jie_guo_ = 'N' order by a.tiao_kuan_hao_`
 
             this.$common.request('sql', sql).then(res => {
                 const { data = [] } = res.variables || {}
@@ -137,10 +141,10 @@ export default {
         },
         getBuFuHeTuBiao (id) {
             const second = this.$store.getters.level.second
-            const sql1 = `select a.NAME_ as name,COALESCE(COUNT(b.id_), 0) AS value FROM ibps_party_entity a LEFT JOIN t_rkzztkhcjhzb b ON a.ID_ = b.bu_men_ AND b.parent_id_ = '${id}' AND b.shen_he_jie_guo_ = 'N' WHERE a.party_type_ = 'position' AND a.PATH_ LIKE '%${second}%' AND a.DEPTH_ = '4' GROUP BY a.NAME_ order by a.ID_ desc`
-            const sql2 = `select a.NAME_ as name,COALESCE(COUNT(b.id_), 0) AS value FROM ibps_party_entity a LEFT JOIN t_rkzztkhcjhzb b ON a.ID_ = b.bu_men_ AND b.parent_id_ = '${id}' AND b.shen_he_jie_guo_ = 'Y' WHERE a.party_type_ = 'position' AND a.PATH_ LIKE '%${second}%' AND a.DEPTH_ = '4' GROUP BY a.NAME_ order by a.ID_ desc`
-            const sql3 = `select a.NAME_ as name,COALESCE(COUNT(b.id_), 0) AS value FROM ibps_party_entity a LEFT JOIN t_rkzztkhcjhzb b ON a.ID_ = b.bu_men_ AND b.parent_id_ = '${id}' AND b.shen_he_jie_guo_ = 'N/A' WHERE a.party_type_ = 'position' AND a.PATH_ LIKE '%${second}%' AND a.DEPTH_ = '4' GROUP BY a.NAME_ order by a.ID_ desc`
-            const sql4 = `select a.NAME_ as name,COALESCE(COUNT(b.id_), 0) AS value FROM ibps_party_entity a LEFT JOIN t_rkzztkhcjhzb b ON a.ID_ = b.bu_men_ AND b.parent_id_ = '${id}' WHERE a.party_type_ = 'position' AND a.PATH_ LIKE '%${second}%' AND a.DEPTH_ = '4' GROUP BY a.NAME_ order by a.ID_ desc`
+            const sql1 = `select a.NAME_ as name,COALESCE(COUNT(b.id_), 0) AS value FROM ibps_party_entity a LEFT JOIN t_rkzztkhcjhzb b ON a.ID_ = b.bu_men_ AND b.ji_hua_de_id_ = '${id}' AND b.he_cha_jie_guo_ = 'N' WHERE a.party_type_ = 'position' AND a.PATH_ LIKE '%${second}%' AND a.DEPTH_ = '4' GROUP BY a.NAME_ order by a.ID_ desc`
+            const sql2 = `select a.NAME_ as name,COALESCE(COUNT(b.id_), 0) AS value FROM ibps_party_entity a LEFT JOIN t_rkzztkhcjhzb b ON a.ID_ = b.bu_men_ AND b.ji_hua_de_id_ = '${id}' AND b.he_cha_jie_guo_ = 'Y' WHERE a.party_type_ = 'position' AND a.PATH_ LIKE '%${second}%' AND a.DEPTH_ = '4' GROUP BY a.NAME_ order by a.ID_ desc`
+            const sql3 = `select a.NAME_ as name,COALESCE(COUNT(b.id_), 0) AS value FROM ibps_party_entity a LEFT JOIN t_rkzztkhcjhzb b ON a.ID_ = b.bu_men_ AND b.ji_hua_de_id_ = '${id}' AND b.he_cha_jie_guo_ = 'N/A' WHERE a.party_type_ = 'position' AND a.PATH_ LIKE '%${second}%' AND a.DEPTH_ = '4' GROUP BY a.NAME_ order by a.ID_ desc`
+            const sql4 = `select a.NAME_ as name,COALESCE(COUNT(b.id_), 0) AS value FROM ibps_party_entity a LEFT JOIN t_rkzztkhcjhzb b ON a.ID_ = b.bu_men_ AND b.ji_hua_de_id_ = '${id}' WHERE a.party_type_ = 'position' AND a.PATH_ LIKE '%${second}%' AND a.DEPTH_ = '4' GROUP BY a.NAME_ order by a.ID_ desc`
 
             Promise.all([this.$common.request('sql', sql1), this.$common.request('sql', sql2), this.$common.request('sql', sql3), this.$common.request('sql', sql4)]).then(res => {
                 if (res.length > 0) {
@@ -167,9 +171,9 @@ export default {
         },
         getHeChaList (id) {
             const second = this.$store.getters.level.second
-            const sql1 = `select a.NAME_ as name,COALESCE(COUNT(b.id_), 0) AS value FROM ibps_party_entity a LEFT JOIN t_rkzztkhcjhzb b ON a.ID_ = b.bu_men_ AND b.parent_id_ = '${id}' WHERE a.party_type_ = 'position' AND a.PATH_ LIKE '%${second}%' AND a.DEPTH_ = '4' GROUP BY a.NAME_ order by a.ID_ desc`
-            const sql2 = `select a.NAME_ as name,COALESCE(COUNT(b.id_), 0) AS value FROM ibps_party_entity a LEFT JOIN t_rkzztkhcjhzb b ON a.ID_ = b.bu_men_ AND b.parent_id_ = '${id}' and (b.shi_fou_guo_shen_ = '待审核' or b.shi_fou_guo_shen_ = '待确认' or b.shi_fou_guo_shen_ = '已结束') WHERE a.party_type_ = 'position' AND a.PATH_ LIKE '%${second}%' AND a.DEPTH_ = '4' GROUP BY a.NAME_ order by a.ID_ desc`
-            const sql3 = `select a.NAME_ as name,COALESCE(COUNT(b.id_), 0) AS value FROM ibps_party_entity a LEFT JOIN t_rkzztkhcjhzb b ON a.ID_ = b.bu_men_ AND b.parent_id_ = '${id}' and (b.shi_fou_guo_shen_ = '待分配' or b.shi_fou_guo_shen_ = '待核查') WHERE a.party_type_ = 'position' AND a.PATH_ LIKE '%${second}%' AND a.DEPTH_ = '4' GROUP BY a.NAME_ order by a.ID_ desc`
+            const sql1 = `select a.NAME_ as name,COALESCE(COUNT(b.id_), 0) AS value FROM ibps_party_entity a LEFT JOIN t_rkzztkhcjhzb b ON a.ID_ = b.bu_men_ AND b.ji_hua_de_id_ = '${id}' WHERE a.party_type_ = 'position' AND a.PATH_ LIKE '%${second}%' AND a.DEPTH_ = '4' GROUP BY a.NAME_ order by a.ID_ desc`
+            const sql2 = `select a.NAME_ as name,COALESCE(COUNT(b.id_), 0) AS value FROM ibps_party_entity a LEFT JOIN t_rkzztkhcjhzb b ON a.ID_ = b.bu_men_ AND b.ji_hua_de_id_ = '${id}' and (b.shi_fou_guo_shen_ = '待审核' or b.shi_fou_guo_shen_ = '待确认' or b.shi_fou_guo_shen_ = '已结束') WHERE a.party_type_ = 'position' AND a.PATH_ LIKE '%${second}%' AND a.DEPTH_ = '4' GROUP BY a.NAME_ order by a.ID_ desc`
+            const sql3 = `select a.NAME_ as name,COALESCE(COUNT(b.id_), 0) AS value FROM ibps_party_entity a LEFT JOIN t_rkzztkhcjhzb b ON a.ID_ = b.bu_men_ AND b.ji_hua_de_id_ = '${id}' and (b.shi_fou_guo_shen_ = '待分配' or b.shi_fou_guo_shen_ = '待核查') WHERE a.party_type_ = 'position' AND a.PATH_ LIKE '%${second}%' AND a.DEPTH_ = '4' GROUP BY a.NAME_ order by a.ID_ desc`
 
             Promise.all([this.$common.request('sql', sql1), this.$common.request('sql', sql2), this.$common.request('sql', sql3)]).then(res => {
                 if (res.length > 0) {
@@ -426,7 +430,7 @@ export default {
                     data: data3,
                     label: this.barLable
                 }],
-                color: ['#037ef3', '#7552cc', '#0cb9c1'],
+                color: ['#7552cc', '#037ef3', '#fd666d'],
                 tooltip: {
                     show: true,
                     trigger: 'axis'

src/views/system/jbdScan/approve/approveJSON.json

@@ -8,7 +8,7 @@
         "value": "tiao_kuan_ming_ch",
         "width": "150"
     },{
-        "name": "状态",
+        "name": "实施状态",
         "value": "shi_fou_guo_shen_",
         "width": "100"
     }],
@@ -21,7 +21,7 @@
         "value": "tiao_kuan_ming_ch",
         "width": "150"
     },{
-        "name": "状态",
+        "name": "实施状态",
         "value": "shi_fou_guo_shen_",
         "width": "100"
     },{
@@ -44,7 +44,7 @@
         "value": "tiao_kuan_ming_ch",
         "width": "150"
     },{
-        "name": "状态",
+        "name": "实施状态",
         "value": "shi_fou_guo_shen_",
         "width": "100"
     },{
@@ -73,7 +73,7 @@
         "value": "tiao_kuan_ming_ch",
         "width": "150"
     },{
-        "name": "状态",
+        "name": "实施状态",
         "value": "shi_fou_guo_shen_",
         "width": "100"
     },{
@@ -117,6 +117,14 @@
         "name": "条款名称",
         "value": "tiao_kuan_ming_ch",
         "width": "150"
+    },{
+        "name": "核查结果",
+        "value": "he_cha_jie_guo_",
+        "width": "100"
+    },{
+        "name": "核查情况说明",
+        "value": "he_cha_qing_kuang",
+        "width": ""
     },{
         "name": "审核结果",
         "value": "shen_he_jie_guo_",
@@ -124,6 +132,6 @@
     },{
         "name": "审核备注",
         "value": "shen_he_yi_jian_",
-        "width": "100"
+        "width": ""
     }]
 }

src/views/system/jbdScan/approve/compnent/appComOne.vue

@@ -1,14 +1,36 @@
 <template>
     <div>
-        <div v-if="activeIndex !== 5 && type && activeIndex+1 === clickIndex" class="tableTab">
-            <el-button type="info" @click="cuiBanClike()">催办</el-button>
+        <div v-if="activeIndex !== 5 && type && activeIndex+1 === clickIndex" class="ma15">
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-input
+                        v-model="search"
+                        placeholder="输入关键字搜索（条款名称/条款号/实施状态）"
+                        clearable
+                    />
+                </el-col>
+                <el-col :span="12">
+                    <div class="tableTab">
+                        <el-button type="info" @click="selectClike()">全部催办</el-button>
+                        <el-button type="info" @click="xuanClike()">选择催办</el-button>
+                    </div>
+
+                </el-col>
+            </el-row>
+
         </div>
-        <el-table :data="tableData" :border="true" style="with: 100%" @selection-change="handleSelectionChange">
+        <el-table :data="tableData.filter(data => !search || data.tiao_kuan_ming_ch.toLowerCase().includes(search.toLowerCase()) || data.tiao_kuan_hao_.toLowerCase().includes(search.toLowerCase()) || data.shi_fou_guo_shen_.toLowerCase().includes(search.toLowerCase()))" :border="true" style="with: 100%" @selection-change="handleSelectionChange">
             <el-table-column
                 v-if="type && activeIndex !== 4"
                 type="selection"
                 width="55"
             />
+            <el-table-column
+                label="序号"
+                type="index"
+                width="50"
+                align="center"
+            />
             <el-table-column v-for="(item,index) in jiHuaList" :key="index" :prop="item.value" :label="item.name" :width="item.width" align="center">
                 <template slot-scope="scope">
                     <div v-if="item.value == 'yuanZuZhangName'">
@@ -57,7 +79,15 @@ export default {
     data () {
         return {
             jiHuaList: approveJSON.list2,
-            selection: []
+            selection: [],
+            selectShow: true,
+            selectData: [],
+            search: ''
+        }
+    },
+    computed: {
+        getShow () {
+            return this.type && this.activeIndex !== 4 && this.clickIndex !== 1
         }
     },
     watch: {
@@ -95,34 +125,54 @@ export default {
             console.log(selection)
             this.selection = selection
         },
-        cuiBanClike () {
-            if (this.selection.length === 0 && this.activeIndex !== '4') {
+        selectClike () {
+            const statusMap = {
+                1: '待核查/待审核/已结束',
+                2: '待审核/已结束',
+                3: '已结束',
+                4: '已结束'
+            }
+            this.selectData = this.tableData.filter(item =>
+                statusMap[this.activeIndex].indexOf(item.shi_fou_guo_shen_) === -1 && (!this.search || item.tiao_kuan_ming_ch.indexOf(this.search) !== -1 || item.tiao_kuan_hao_.indexOf(this.search) !== -1 || item.shi_fou_guo_shen_.indexOf(this.search) !== -1)
+            )
+            if (this.selectData.length === 0) {
+                return this.$message.error(`过滤实施状态：${statusMap[this.activeIndex]}，所以暂无数据需要消息`)
+            }
+            this.$message.warning(`过滤实施状态：${statusMap[this.activeIndex]}，发送消息`)
+            this.cuiBanClike(this.selectData)
+        },
+        xuanClike () {
+            this.cuiBanClike(this.selection)
+        },
+        cuiBanClike (selectionList) {
+            if (selectionList.length === 0 && this.activeIndex !== '4') {
                 this.$message.warning('请选择数据')
             }
             // console.log(this.selection)
+            const selectMessList = []
             let selection = []
             const list = []
             switch (this.activeIndex) {
                 case 1:
-                    selection = this.selection.filter(item =>
+                    selection = selectionList.filter(item =>
                         item.shi_fou_guo_shen_ === '待分配'
                     )
-                    if (this.selection.length !== selection.length) {
-                        return this.$message.warning(`请选择状态为待分配的数据`)
+                    if (selectionList.length !== selection.length) {
+                        return this.$message.warning(`请选择实施状态为待分配的数据`)
                     }
                     if (selection.length > 0) {
                         selection.forEach(item => {
                             const conont = `,条款号：${item.tiao_kuan_hao_}，条款名称：${item.tiao_kuan_ming_ch}`
-                            this.setXiaoXin(item.zu_chang_, item.ji_hua_bian_hao_, '认可准则条款核查核查实施计划', '认可准则条款核查核查实施计划已编制', conont)
+                            selectMessList.push(this.setXiaoXin(item.zu_chang_, item.ji_hua_bian_hao_, '认可准则条款核查核查实施计划', '认可准则条款核查核查实施计划已编制', conont))
                         })
                     }
                     break
                 case 2:
-                    selection = this.selection.filter(item =>
+                    selection = selectionList.filter(item =>
                         item.shi_fou_guo_shen_ === '待分配' || item.shi_fou_guo_shen_ === '待核查'
                     )
-                    if (this.selection.length !== selection.length) {
-                        return this.$message.warning(`请选择状态为待分配或者待核查的数据`)
+                    if (selectionList.length !== selection.length) {
+                        return this.$message.warning(`请选择实施状态为待分配或者待核查的数据`)
                     }
                     if (selection.length > 0) {
                         selection.forEach(item => {
@@ -137,17 +187,16 @@ export default {
                                 title = '认可准则条款核查'
                                 content = '认可准则条款核查核查实施计划编制'
                             }
-
-                            this.setXiaoXin(item.zu_chang_, item.ji_hua_bian_hao_, title, content, conont)
+                            selectMessList.push(this.setXiaoXin(item.zu_chang_, item.ji_hua_bian_hao_, title, content, conont))
                         })
                     }
                     break
                 case 3:
-                    selection = this.selection.filter(item =>
+                    selection = selectionList.filter(item =>
                         item.shi_fou_guo_shen_ === '待分配' || item.shi_fou_guo_shen_ === '待核查' || item.shi_fou_guo_shen_ === '待审核'
                     )
-                    if (this.selection.length !== selection.length) {
-                        return this.$message.warning(`请选择状态为待分配、待核查、的数据、待审核`)
+                    if (selectionList.length !== selection.length) {
+                        return this.$message.warning(`请选择实施状态为待分配、待核查、的数据、待审核`)
                     }
                     if (selection.length > 0) {
                         selection.forEach(item => {
@@ -163,40 +212,48 @@ export default {
                                     title = '认可准则条款核查'
                                     content = '认可准则条款核查核查实施计划编制'
                                 }
-                                this.setXiaoXin(item.zu_chang_, item.ji_hua_bian_hao_, title, content, conont)
+                                selectMessList.push(this.setXiaoXin(item.zu_chang_, item.ji_hua_bian_hao_, title, content, conont))
                             } else {
                                 list.push(item)
                             }
                         })
                         this.getDataSet(list).then(res => {
                             res.forEach(item => {
-                                this.setXiaoXin(item.zu_chang_, item.ji_hua_bian_hao_, '认可准则条款核查审核', '认可准则条款核查已完成，请尽快审核')
+                                selectMessList.push(this.setXiaoXin(item.zu_chang_, item.ji_hua_bian_hao_, '认可准则条款核查审核', '认可准则条款核查已完成，请尽快审核'))
                             })
                         })
                     }
                     break
                 case 4:
-                    selection = this.selection.filter(item =>
+                    selection = selectionList.filter(item =>
                         item.shi_fou_guo_shen_ !== '已结束'
                     )
                     if (selection.length > 0) {
-                        this.setXiaoXin(this.generalList[0].bian_zhi_ren_, this.generalList[0].bian_hao_, '认可准则条款核查确认', '认可准则条款核查审核已完成')
+                        selectMessList.push(this.setXiaoXin(this.generalList[0].bian_zhi_ren_, this.generalList[0].bian_hao_, '认可准则条款核查确认', '认可准则条款核查审核已完成'))
                     }
                     break
             }
+            if (selectMessList.length > 0) {
+                Promise.all(selectMessList).then(res => {
+                    this.$message.success(`一共发送${selectMessList.length}条消息，消息发送完毕`)
+                })
+            }
         },
         setXiaoXin (name, ji_hua_bian_hao_, title, content, conont = '') {
-            const xiaoxi = {
-                subject: title, // 主题，不可更改，在消息通知列表有根据这个文本做校验逻辑
-                receiverId: name, // 接收人id
-                receiver: '', // 接收人id
-                // groupId: i.tongzhiBM,// 接收人id
-                groupName: '', // 接收人id
-                fileMsg: '', // 附件
-                content: `${content},请尽快确认,计划编号：${ji_hua_bian_hao_}${conont}` // 正文
-            }
-            this.$common.sendMsg(xiaoxi).then(res => {
-                this.$message.warning(`${content}，还没有确认的人员请及时通知${conont}`)
+            return new Promise((resolve, reject) => {
+                const xiaoxi = {
+                    subject: title, // 主题，不可更改，在消息通知列表有根据这个文本做校验逻辑
+                    receiverId: name, // 接收人id
+                    receiver: '', // 接收人id
+                    // groupId: i.tongzhiBM,// 接收人id
+                    groupName: '', // 接收人id
+                    fileMsg: '', // 附件
+                    content: `${content},请尽快确认,计划编号：${ji_hua_bian_hao_}${conont}` // 正文
+                }
+                this.$common.sendMsg(xiaoxi).then(res => {
+                    resolve(res)
+                    // this.$message.warning(`${content}，还没有确认的人员请及时通知${conont}`)
+                })
             })
         },
         getDataSet (data) {
@@ -217,4 +274,7 @@ export default {
     display: flex;
     justify-content: flex-end
 }
+.ma15{
+    margin-bottom: 10px;
+}
 </style>