From d6e8cef9e762a7324562ad51c0f00620ddb9dbf9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=BE=89?= <814457906@qq.com>
Date: Fri, 1 Nov 2024 11:27:25 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/index.vue                           |  59 +-
 src/views/system/followupstatistics/index.vue | 551 ++++++++++++++++++
 .../system/questionnaireinquiry/index.vue     |  17 +-
 3 files changed, 594 insertions(+), 33 deletions(-)
 create mode 100644 src/views/system/followupstatistics/index.vue

diff --git a/src/views/index.vue b/src/views/index.vue
index 14765df..a262bda 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -35,39 +35,23 @@
       </div>
       <div class="appright">
         <div class="wait">待办任务</div>
-        <div
-          class="all"
-          v-for="(item, index) in taskSituationlist"
-          :key="index"
-        >
+        <div class="all" v-for="(item, index) in taskSituationlist" :key="index">
           <div @click="goback(item)">
-            <el-tooltip
-              class=""
-              effect="dark"
-              :content="item.name == '人工审核' ? '待审核数' : '待随访数'"
-              placement="top"
-            >
+            <el-tooltip class="" effect="dark" :content="item.name == '人工审核' ? '待审核数' : '待随访数'" placement="top">
               <div class="person">
                 <span class="">{{ item.name }}</span>
                 <el-badge :value="item.count" class="item"></el-badge>
                 <i class="el-icon-arrow-right"></i>
               </div>
             </el-tooltip>
-            <el-tooltip
-              class=""
-              effect="dark"
-              :content="
-                item.name == '人工审核'
-                  ? '本月已审核数/本月应审核数'
-                  : '本月已随访数/本月应随访数'
-              "
-              placement="top"
-            >
+            <el-tooltip class="" effect="dark" :content="item.name == '人工审核'
+              ? '本月已审核数/本月应审核数'
+              : '本月已随访数/本月应随访数'
+              " placement="top">
               <div style="display: flex">
                 <el-progress :percentage="item.content"></el-progress>
-                <span style="float: right; margin: 12px 19px 0 10px"
-                  >{{ item.allCount - item.count }}/{{ item.allCount }}</span
-                >
+                <span style="float: right; margin: 12px 19px 0 10px">{{ item.allCount - item.count }}/{{ item.allCount
+                  }}</span>
               </div>
             </el-tooltip>
           </div>
@@ -118,7 +102,6 @@ export default {
   },
   methods: {
     goback(item) {
-      console.log(item, "item");
       if (item.name == "人工审核") {
         this.$router.push({
           path: "/task/manualReview",
@@ -327,6 +310,7 @@ export default {
   width: 100%;
   padding: 20px 20px 20px 20px;
 }
+
 .app {
   height: 150px;
   display: flex;
@@ -338,11 +322,13 @@ export default {
     background: #fff;
     position: relative;
     margin: 0 15px 15px 0;
+
     .words {
       position: absolute;
       top: 60px;
       left: 15px;
     }
+
     .num {
       position: absolute;
       top: 90px;
@@ -350,6 +336,7 @@ export default {
       font-size: 28px;
       font-weight: 600;
     }
+
     img {
       width: 25px;
       height: 25px;
@@ -359,10 +346,12 @@ export default {
     }
   }
 }
+
 .leftheader {
   width: 83%;
   display: flex;
 }
+
 .appbottom {
   width: 82%;
   height: calc(100vh - 275px);
@@ -377,27 +366,32 @@ export default {
     background: #fff;
     border-radius: 5px;
     margin: 15px 0 0 0;
+
     .word {
       padding: 20px;
       font-size: 14px;
     }
   }
+
   .appbottomone {
     width: 50%;
     margin: 15px 15px 0 0;
     background: #fff;
     border-radius: 5px;
+
     .word {
       padding: 20px;
       font-size: 14px;
     }
   }
 }
+
 .appright {
   width: 17%;
   background: #fff;
   border-radius: 5px;
   height: 300px;
+
   // height: calc(100vh - 450px);
   .wait {
     // padding: 20px;
@@ -405,29 +399,35 @@ export default {
     font-size: 14px;
     padding: 20px 20px 7px 20px;
   }
+
   .all {
     cursor: pointer;
     padding: 0 0 20px 0;
   }
+
   .person {
     padding: 20px 20px 0 20px;
     font-weight: 600;
     font-size: 12px;
   }
+
   .el-icon-arrow-right {
     float: right;
   }
+
   ::v-deep .el-progress__text {
     font-size: 12px !important;
     // flex: 0.5;
     text-align: right;
     display: none;
   }
+
   ::v-deep .el-progress {
     margin: 13px 0 0 20px;
     width: 80%;
   }
 }
+
 .home {
   blockquote {
     padding: 10px 20px;
@@ -435,12 +435,14 @@ export default {
     font-size: 17.5px;
     border-left: 5px solid #eee;
   }
+
   hr {
     margin-top: 20px;
     margin-bottom: 20px;
     border: 0;
     border-top: 1px solid #eee;
   }
+
   .col-item {
     margin-bottom: 20px;
   }
@@ -450,7 +452,11 @@ export default {
     margin: 0;
   }
 
-  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "open sans",
+  "Helvetica Neue",
+  Helvetica,
+  Arial,
+  sans-serif;
   font-size: 13px;
   color: #676a6c;
   overflow-x: hidden;
@@ -491,4 +497,3 @@ export default {
   }
 }
 </style>
-
diff --git a/src/views/system/followupstatistics/index.vue b/src/views/system/followupstatistics/index.vue
new file mode 100644
index 0000000..1399c9e
--- /dev/null
+++ b/src/views/system/followupstatistics/index.vue
@@ -0,0 +1,551 @@
+<template>
+    <div class="app-container home" ref="layout">
+        <div ref="topform" class="form">
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="50px">
+                <el-form-item label="时间" prop="questionnaireName">
+                    <el-date-picker v-model="visitDate" type="monthrange" range-separator="至" start-placeholder="开始月份"
+                        style="width: 220px" value-format="yyyy-MM-dd" end-placeholder="结束月份">
+                    </el-date-picker>
+                </el-form-item>
+                <el-form-item label="医院" prop="hospitalAgencyId">
+                    <el-select v-model="queryParams.hospitalAgencyId" filterable placeholder="请选择医院"
+                        style="width: 150px" clearable @clear="clearhospitalAgency" @change="changehospitalAgency">
+                        <el-option v-for="item in hospitalAgencylist" :key="item.id" :label="item.agencyName"
+                            :value="item.id">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="院区" prop="campusAgencyId">
+                    <el-select v-model="queryParams.campusAgencyId" filterable placeholder="请选择院区" style="width: 150px"
+                        clearable @clear="clearcampusAgency" @change="changecampusAgency">
+                        <el-option v-for="item in campusAgencylist" :key="item.id" :label="item.agencyName"
+                            :value="item.id">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="科室" prop="departmentId">
+                    <el-select v-model="queryParams.departmentId" filterable placeholder="请选择科室" style="width: 150px"
+                        clearable @clear="cleardepartment" @change="changedepartment">
+                        <el-option v-for="item in departmentlist" :key="item.id" :label="item.departmentName"
+                            :value="item.id">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="病区" prop="wardId">
+                    <el-select v-model="queryParams.wardId" filterable placeholder="请选择病区" style="width: 150px"
+                        clearable>
+                        <el-option v-for="item in wardlist" :key="item.id" :label="item.departmentName"
+                            :value="item.id">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+                </el-form-item>
+            </el-form>
+        </div>
+        <div ref="table" :style="{ 'max-height': maxTableHeight + 'px' }" class="bottomstatistics">
+            <div class="app">
+                <div class="content">
+                    <div class="words">AI电话拨打次数</div>
+                    <div class="num">1</div>
+                    <div class="rate">成功率:</div>
+                    <el-progress :percentage="12"></el-progress>
+                </div>
+                <div class="content">
+                    <div class="words">人工电话拨打次数</div>
+                    <div class="num">1</div>
+                    <div class="rate">成功率:</div>
+                    <el-progress :percentage="12"></el-progress>
+                </div>
+                <div class="content">
+                    <div class="words">AI电话拨打人数</div>
+                    <div class="num">1</div>
+                    <div class="rate">成功率:</div>
+                    <el-progress :percentage="12"></el-progress>
+                </div>
+                <div class="content">
+                    <div class="words">人工电话拨打人数</div>
+                    <div class="num">1</div>
+                    <div class="rate">成功率:</div>
+                    <el-progress :percentage="12"></el-progress>
+                </div>
+                <div class="content" style="margin-right: 0;">
+                    <div class="words" style="top:20px;font-size: 17px;">总通话人数</div>
+                    <div class="words" style="top:60px;font-size: 17px;">短信发送数</div>
+                    <div class="words" style="top:100px;font-size: 17px;">小程序通知数</div>
+                </div>
+            </div>
+            <div class="trend">
+                <el-descriptions title="随访趋势统计" style="padding:20px 0  0 15px;" />
+                <div class="echarts">
+                    <div id="leftechart" style="height:400px;width: 48%;"></div>
+                    <div id="rightechart" style="height:400px;width: 48%;"> </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {
+    selectAgencyList,
+    getAgencyList,
+} from "@/api/manage/selectAgencyList";
+import * as echarts from 'echarts';
+export default {
+    name: "followupstatistics",
+    data() {
+        return {
+            maxTableHeight: undefined,
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                startDate: null,
+                endDate: null,
+                hospitalAgencyId: null,
+                hospitalAgencyName: null,
+                campusAgencyId: null,
+                campusAgencyName: null,
+                departmentId: null,
+                departmentName: null,
+                wardId: null,
+                wardName: null,
+            },
+            visitDate: [],
+            //医院list
+            hospitalAgencylist: [],
+            // 院区list
+            campusAgencylist: [],
+            //科室list
+            departmentlist: [],
+            //病区list
+            wardlist: [],
+        };
+    },
+    created() {
+        this.selectAgencyinfo();
+    },
+    mounted() {
+        this.echartinfo();
+        this.echartinfotwo();
+        this.getMaxTableHeight()
+        this.screenChange()
+    },
+    methods: {
+        echartinfo() {
+            var chartDom = document.getElementById('leftechart');
+            var myChart = echarts.init(chartDom);
+            var option = {
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {
+                    data: ['AI电话拨打人数', '人工电话拨打人数', '短信发送数', '小程序通知数']
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'category',
+                    data: ['2024年9月', '2024年10月']
+                },
+                yAxis: {
+                    type: 'value',
+                    padding: [0, 50, 20, 20] // 加上padding可以调整其位置
+                },
+                series: [
+                    {
+                        name: 'AI电话拨打人数',
+                        type: 'line',
+                        stack: 'Total',
+                        data: [120, 132],
+                        lineStyle: {
+                            width: 3,
+                            color: '#942CCA',
+                        },
+                    },
+                    {
+                        name: '人工电话拨打人数',
+                        type: 'line',
+                        stack: 'Total',
+                        data: [220, 182],
+                        lineStyle: {
+                            width: 3,
+                            color: '#22B14C',
+                        },
+                    },
+                    {
+                        name: '短信发送数',
+                        type: 'line',
+                        stack: 'Total',
+                        data: [150, 232],
+                        lineStyle: {
+                            width: 3,
+                            color: '#ED1C24',
+                        },
+                    },
+                    {
+                        name: '小程序通知数',
+                        type: 'line',
+                        stack: 'Total',
+                        data: [320, 332],
+                        lineStyle: {
+                            width: 3,
+                            color: '#FF7F27',
+                        },
+                    },
+                ]
+            };
+            option && myChart.setOption(option);
+        },
+        echartinfotwo() {
+            var chartDom = document.getElementById('rightechart');
+            var myChart = echarts.init(chartDom);
+            var option = {
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {
+                    data: ['AI电话拨打次数成功率', '人工电话拨打次数成功率', 'AI电话拨打人数成功率', '人工电话拨打人数成功率']
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'category',
+                    data: ['2024年9月', '2024年10月']
+                },
+                yAxis: {
+                    type: 'value',
+                    padding: [0, 50, 20, 20] // 加上padding可以调整其位置
+                },
+                series: [
+                    {
+                        name: 'AI电话拨打次数成功率',
+                        type: 'line',
+                        stack: 'Total',
+                        data: [150, 232],
+                        lineStyle: {
+                            width: 3,
+                            color: '#FFF200',
+                        },
+                    },
+                    {
+                        name: '人工电话拨打次数成功率',
+                        type: 'line',
+                        stack: 'Total',
+                        data: [320, 332],
+                        lineStyle: {
+                            width: 3,
+                            color: '#00A2E8',
+                        },
+                    },
+                    {
+                        name: 'AI电话拨打人数成功率',
+                        type: 'line',
+                        stack: 'Total',
+                        data: [120, 132],
+                        lineStyle: {
+                            width: 3,
+                            color: '#3F48CC',
+                        },
+                    },
+                    {
+                        name: '人工电话拨打人数成功率',
+                        type: 'line',
+                        stack: 'Total',
+                        data: [220, 182],
+                        lineStyle: {
+                            width: 3,
+                            color: '#880015',
+                        },
+                    },
+                ]
+            };
+            option && myChart.setOption(option);
+        },
+        /** 查询 */
+        getList() {
+            if (this.visitDate?.length > 0) {
+                this.queryParams.startDate = this.visitDate[0];
+                this.queryParams.endDate = this.visitDate[1];
+            } else {
+                this.queryParams.startDate = null;
+                this.queryParams.endDate = null;
+            }
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.visitDate = [];
+            this.queryParams.visitDateStart = null;
+            this.queryParams.visitDateEnd = null;
+            this.resetForm("queryForm");
+        },
+        selectAgencyinfo() {
+            let query = {
+                agencyStatus: "ON",
+                nodeType: "HOSPITAL",
+            };
+            selectAgencyList(query).then((res) => {
+                this.hospitalAgencylist = res.data;
+            });
+        },
+        //获取下级单位
+        getAgencyListinfo(nodeType, id) {
+            let query = {
+                nodeType: nodeType,
+            };
+            if (nodeType == "HOSPITAL") {
+                query.hospitalId = id;
+            } else if (nodeType == "CAMPUS") {
+                query.campusId = id;
+            } else if (nodeType == "DEPARTMENT") {
+                query.departmentId = id;
+            }
+            getAgencyList(query).then((res) => {
+                if (nodeType == "HOSPITAL") {
+                    this.campusAgencylist = res.data.campusList;
+                    this.departmentlist = res.data.departmentList;
+                } else if (nodeType == "CAMPUS") {
+                    this.departmentlist = res.data.departmentList;
+                }
+                this.wardlist = res.data.wardList;
+            });
+        },
+        //选中医院获取院区
+        changehospitalAgency(id) {
+            this.getAgencyListinfo("HOSPITAL", id);
+            this.queryParams.campusAgencyId = null;
+            this.queryParams.departmentId = null;
+            this.queryParams.wardId = null;
+        },
+        //选中院区获取科室
+        changecampusAgency(id) {
+            this.getAgencyListinfo("CAMPUS", id);
+            this.queryParams.departmentId = null;
+            this.queryParams.wardId = null;
+        },
+        //选中科室获取病区
+        changedepartment(id) {
+            this.getAgencyListinfo("DEPARTMENT", id);
+            this.queryParams.wardId = null;
+        },
+        //清空医院
+        clearhospitalAgency() {
+            this.queryParams.campusAgencyId = null;
+            this.queryParams.departmentId = null;
+            this.queryParams.wardId = null;
+            setTimeout(() => {
+                this.attendingPhysicianlist = [];
+            }, 1000);
+        },
+        //清空院区
+        clearcampusAgency() {
+            this.queryParams.departmentId = null;
+            this.queryParams.wardId = null;
+            this.getAgencyListinfo("HOSPITAL", this.queryParams.hospitalAgencyId);
+        },
+        //清空科室
+        cleardepartment() {
+            this.queryParams.wardId = null;
+            if (this.queryParams.departmentId) {
+                this.getAgencyListinfo("DEPARTMENT", this.queryParams.departmentId);
+            } else if (this.queryParams.campusAgencyId) {
+                this.getAgencyListinfo("CAMPUS", this.queryParams.campusAgencyId);
+            } else if (this.queryParams.hospitalAgencyId) {
+                this.getAgencyListinfo("HOSPITAL", this.queryParams.hospitalAgencyId);
+            }
+        },
+        // 获取表格最高高度
+        getMaxTableHeight() {
+            const windowInnerHeight = window.innerHeight // 屏幕可视高度
+            const formDiv = this.$refs.topform
+            this.maxTableHeight = windowInnerHeight - 104 - this.getBoxHeight(formDiv)
+        },
+        // 屏幕resize监听
+        screenChange() {
+            // 屏幕resize监听事件：一旦屏幕宽高发生变化，就会执行resize
+            window.addEventListener('resize', this.getMaxTableHeight, true)
+            // 将屏幕监听事件移除
+            // 这步是必须的。离开页面时不移除，再返回，或者进入到别的有相同元素的页面会报错
+            // 或者将这里的方法直接写在beforeDestroy函数中也可以
+            this.$once('hook:beforeDestroy', () => {
+                window.removeEventListener('resize', this.getMaxTableHeight, true)
+            })
+        },
+    }
+};
+</script>
+<style scoped lang="scss">
+.bottomstatistics {
+    height: 100%;
+    overflow-y: auto;
+}
+
+::v-deep .el-form-item--small.el-form-item {
+    margin-bottom: 10px !important;
+}
+
+.app-container {
+    padding: 0 !important;
+}
+
+.form {
+    padding: 10px 0 0;
+    background-color: #fff !important;
+}
+
+.echarts {
+    width: 100%;
+    display: flex;
+    height: 420px;
+    justify-content: space-evenly;
+}
+
+.trend {
+    padding: 0 0 0 0px;
+    background-color: #fff;
+    margin: 15px 15px 0 15px;
+    border-radius: 5px;
+}
+
+.app-container {
+    background: #f1f3f5;
+    width: 100%;
+    padding: 20px 20px 20px 20px;
+}
+
+.app {
+    margin-top: 15px;
+    padding: 0 15px 0 15px;
+    height: 150px;
+    display: flex;
+    width: 100%;
+    justify-content: space-evenly;
+
+    .content {
+        width: 20%;
+        height: 150px;
+        border-radius: 5px;
+        background: #fff;
+        position: relative;
+        margin: 0 15px 15px 0;
+
+        ::v-deep .el-progress {
+            margin: 120px 0 0 15px;
+        }
+
+        .rate {
+            position: absolute;
+            top: 90px;
+            left: 15px;
+        }
+
+        .words {
+            position: absolute;
+            top: 15px;
+            left: 15px;
+        }
+
+        .num {
+            position: absolute;
+            top: 45px;
+            left: 15px;
+            font-size: 28px;
+            font-weight: 600;
+        }
+
+        img {
+            width: 25px;
+            height: 25px;
+            position: absolute;
+            top: 7px;
+            left: 15px;
+        }
+    }
+}
+
+
+.home {
+    blockquote {
+        padding: 10px 20px;
+        margin: 0 0 20px;
+        font-size: 17.5px;
+        border-left: 5px solid #eee;
+    }
+
+    hr {
+        margin-top: 20px;
+        margin-bottom: 20px;
+        border: 0;
+        border-top: 1px solid #eee;
+    }
+
+    .col-item {
+        margin-bottom: 20px;
+    }
+
+    ul {
+        padding: 0;
+        margin: 0;
+    }
+
+    font-family: "open sans",
+    "Helvetica Neue",
+    Helvetica,
+    Arial,
+    sans-serif;
+    font-size: 13px;
+    color: #676a6c;
+    overflow-x: hidden;
+    overflow-y: hidden;
+
+    ul {
+        list-style-type: none;
+    }
+
+    h4 {
+        margin-top: 0px;
+    }
+
+    h2 {
+        margin-top: 10px;
+        font-size: 26px;
+        font-weight: 100;
+    }
+
+    p {
+        margin-top: 10px;
+
+        b {
+            font-weight: 700;
+        }
+    }
+
+    .update-log {
+        ol {
+            display: block;
+            list-style-type: decimal;
+            margin-block-start: 1em;
+            margin-block-end: 1em;
+            margin-inline-start: 0;
+            margin-inline-end: 0;
+            padding-inline-start: 40px;
+        }
+    }
+}
+</style>
diff --git a/src/views/system/questionnaireinquiry/index.vue b/src/views/system/questionnaireinquiry/index.vue
index e3e05e8..cba1367 100644
--- a/src/views/system/questionnaireinquiry/index.vue
+++ b/src/views/system/questionnaireinquiry/index.vue
@@ -16,11 +16,11 @@
                                 @on-template="questionontemplate" ref="questionnaireinquirycomponent"
                                 :hospitalAgencyId="queryParams.hospitalAgencyId"></questionnaireinquirycomponent>
                         </el-form-item>
-                        <el-form-item label="患者姓名" prop="diseaseTypeName">
-                            <el-input v-model="queryParams.diseaseTypeName" placeholder="请输入患者姓名" clearable
+                        <el-form-item label="患者姓名" prop="patientName">
+                            <el-input v-model="queryParams.patientName" placeholder="请输入患者姓名" clearable
                                 @keyup.enter.native="handleQuery" />
                         </el-form-item>
-                        <el-form-item label="日期" prop="diseaseTypeName" label-width="50px">
+                        <el-form-item label="日期" prop="visitDate" label-width="50px">
                             <el-date-picker v-model="visitDate" type="daterange" range-separator="至"
                                 start-placeholder="起始日期" style="width: 220px" value-format="yyyy-MM-dd"
                                 end-placeholder="截止日期">
@@ -158,6 +158,7 @@ export default {
                 questionnaireRemark: null,
                 startDate: null,
                 endDate: null,
+                patientName: null,
             },
             visitDate: [],
             //详情
@@ -337,14 +338,16 @@ export default {
 }
 </style>
 <style lang="scss" scoped>
-::v-deep .el-input.is-disabled .el-input__inner{
+::v-deep .el-input.is-disabled .el-input__inner {
     background-color: #fff !important;
     color: black !important;
 }
-::v-deep .el-textarea.is-disabled .el-textarea__inner{
+
+::v-deep .el-textarea.is-disabled .el-textarea__inner {
     background-color: #fff !important;
     color: black !important;
 }
+
 ::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
     border: 1px solid #DCDFE6 !important;
     border-color: #1890ff !important;
@@ -357,9 +360,11 @@ export default {
 ::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
     border-color: #1890ff !important;
 }
-::v-deep .el-checkbox__input.is-disabled .el-checkbox__inner{
+
+::v-deep .el-checkbox__input.is-disabled .el-checkbox__inner {
     background-color: #fff !important;
 }
+
 ::v-deep .el-radio__input.is-disabled .el-radio__inner {
     border: 1px solid #DCDFE6 !important;
     background-color: #fff !important;