Merge branch 'dev-statics'

src/views/modules/shequzhili/statics/cEvent.vue

@@ -0,0 +1,383 @@
+<template>
+  <div class="mode-block resi-container">
+    <el-card ref="searchCard" class="search-card">
+      <el-form ref="searchForm" :inline="true" :model="dataForm" size="small">
+        <el-form-item label="所属组织" label-width="100px"
+                      prop="agencyId">
+          <el-cascader ref="cascaderUnit" v-model="dataForm.agencyId" :options="optionsA" :props="{ checkStrictly: true, emitPath: false,children:'subAgencyList',label:'agencyName',value:'agencyId'}" clearable />
+            <!-- <template slot-scope="{ node, data }">
+              <div @click="cascaderClick(data)">
+                <span>{{ data.objectName }}</span>
+                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+              </div>
+            </template> -->
+        </el-form-item>
+        <el-form-item label="时间范围"
+                      prop="startTime">
+          <el-date-picker v-model="timeRange"
+                          type="daterange"
+                          clearable
+                          size="small"
+                          :picker-options="pickerOptions"
+                          range-separator="至"
+                          start-placeholder="选择日期"
+                          end-placeholder="选择日期"
+                          value-format="yyyyMMdd">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" size="small" class="diy-button--search" @click="handleSearch">查询</el-button>
+          <el-button
+            class="diy-button--reset"
+            size="small"
+            @click="resetForm('searchForm')"
+            >重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card class="resi-card-table">
+      <div class="resi-row-btn">
+        <el-button @click="totalHandle"
+                    class="diy-button--add"
+                    size="small">总计</el-button>
+        <el-button @click="exportHandle"
+                    class="diy-button--reset"
+                    size="small">导出</el-button>
+      </div>
+      <el-table class="resi-table" v-loading="dataListLoading" :data="dataList" border  style="width: 100%"
+      :height="tableHeight">
+        <!-- <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column> -->
+        <el-table-column type="index" label="序号" header-align="center" align="center" width="50"></el-table-column>
+        <el-table-column min-width="100" prop="memberCount" label="网格员数" header-align="center" align="center" />
+        <el-table-column min-width="100" prop="orgName" label="所属社区" header-align="center" align="center" />
+        <el-table-column min-width="100" prop="projectCount" label="上报数量" header-align="center" align="center" />
+        <el-table-column min-width="110" prop="closedCount" label="办结数" header-align="center" align="center" />
+        <el-table-column min-width="110" prop="projectAve" label="人均上报" header-align="center" align="center" />
+        <el-table-column min-width="110" prop="closedAve" label="人均办结" header-align="center" align="center" />
+      </el-table>
+      <div>
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="pageNo"
+          :page-sizes="[20, 50, 100, 200]"
+          :page-size="pageSize"
+          layout="sizes, prev, pager, next, total"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
+    </el-card>
+    <el-dialog
+            title="总计"
+            :visible.sync="totalVisible"
+            width="60%">
+      <template>
+        <el-table
+                :data="tableData"
+                style="width: 100%"
+                height="200">
+          <!-- <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column> -->
+          <el-table-column min-width="100" prop="memberCount" label="网格员数" header-align="center" align="center" />
+          <el-table-column min-width="100" prop="orgName" label="所属社区" header-align="center" align="center" />
+          <el-table-column min-width="100" prop="projectCount" label="上报数量" header-align="center" align="center" />
+          <el-table-column min-width="110" prop="closedCount" label="办结数" header-align="center" align="center" />
+          <el-table-column min-width="110" prop="projectAve" label="人均上报" header-align="center" align="center" />
+          <el-table-column min-width="110" prop="closedAve" label="人均办结" header-align="center" align="center" />
+        </el-table>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+// import AddOrUpdate from './factagencyuserhousedaily-add-or-update'
+export default {
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/data/stats/factAgencyUserHouseDaily/page',
+        getDataListIsPage: true,
+        deleteURL: '/data/stats/factAgencyUserHouseDaily',
+        deleteIsBatch: true,
+        exportURL: '/data/stats/factAgencyUserHouseDaily/export'
+      },
+      dataListLoading: false,
+      optionsA: [],
+      totalVisible: false,
+      pickerOptions: {
+        disabledDate(time) {
+            return time.getTime() > (Date.now() - 3600 * 1000 * 24);
+          },
+      },
+      dataList: [],
+      timeRange: '',
+      dataForm: {
+        agencyId: '',
+        startTime: '',
+        endTime: '',
+        type: ''
+      },
+      total: 0,
+      tableData: [],
+      pageNo: 1,
+      pageSize: 20
+    }
+  },
+  components: {
+    // AddOrUpdate
+  },
+  created () {
+    this.getGridList()
+    this.getTableList()
+    // this.getValiheList()
+  },
+  watch: {
+    timeRange (val) {
+      if (Array.isArray(val) && val.length == 2) {
+        this.dataForm.startTime = val[0];
+        this.dataForm.endTime = val[1];
+      } else {
+        this.dataForm.startTime = "";
+        this.dataForm.endTime = "";
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(["clientHeight", "iframeHeight"]),
+    tableHeight() {
+      const h = this.clientHeight - 360 + this.iframeHeigh;
+      const _h = this.clientHeight - 360;
+      return this.$store.state.inIframe ? h : _h;
+    },
+  },
+  methods: {
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.timeRange = "";
+      this.dataForm.startTime = "";
+      this.dataForm.endTime = "";
+      this.dataForm.type = "";
+      this.pageNo = 1
+      this.getTableList()
+    },
+    handleSearch() {
+      this.dataForm.type = 1
+      this.pageNo = 1
+      this.getTableList()
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+      this.pageSize = val;
+      this.getTableList();
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+      this.pageNo = val;
+      this.getTableList();
+    },
+    exportHandle () {
+      const url = '/data/aggregator/org/orgProjectDetailList/export'
+      this.$http({
+        method: 'Post',
+        url,
+        responseType: 'blob',
+        data: this.dataForm
+      }).then(res => {
+        // this.download(res.data, title + '.xls')
+        if (res.headers["content-disposition"]) {
+          let fileName = window.decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1])
+          console.log('filename', fileName)
+          let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
+          var url = window.URL.createObjectURL(blob)
+          var aLink = document.createElement('a')
+          aLink.style.display = 'none'
+          aLink.href = url
+          aLink.setAttribute('download', fileName)
+          document.body.appendChild(aLink)
+          aLink.click()
+          document.body.removeChild(aLink) //下载完成移除元素
+          window.URL.revokeObjectURL(url) //释放掉blob对象
+        } else this.$message.error('下载失败')
+      }).catch(err => {
+        console.log('err', err)
+        return this.$message.error('网络错误')
+      })
+    },
+    cascaderClick (nodeData) {
+      this.dataForm.agencyId = nodeData.objectId;
+      this.dataForm.level = nodeData.objectType
+      this.$refs.cascaderUnit.checkedValue = nodeData.objectId;
+      this.$refs.cascaderUnit.computePresentText();
+      this.$refs.cascaderUnit.toggleDropDownVisible(false);
+
+    },
+    totalHandle () {
+      this.tableData = []
+      this.dataForm.type = 0
+      this.$http
+              .post('/data/aggregator/org/orgProjectDetailList', this.dataForm)
+              .then(({ data: res }) => {
+                if (res.code !== 0) {
+                  return this.$message.error(res.msg)
+                } else {
+                  console.log('获取查询详情成功', res.data.list)
+                  this.tableData = res.data.list
+                }
+              })
+              .catch(() => {
+                return this.$message.error('网络错误')
+              })
+      this.totalVisible = true
+    },
+    getTableList() {
+      const { user } = this.$store.state
+      const _data = {
+        ...this.dataForm,
+        pageNo: this.pageNo,
+        pageSize: this.pageSize
+      }
+      this.$http
+        .post('/data/aggregator/org/orgProjectDetailList', _data)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          } else {
+            this.dataList = res.data.list
+            this.total = res.data.total
+          }
+        })
+        .catch(() => {
+          return this.$message.error('网络错误')
+        })
+    },
+    getGridList() {
+      const { user } = this.$store.state
+      this.dataListLoading = true
+      const params = {
+        agencyId: user.agencyId,
+        client: 'gov'
+      }
+      this.$http
+        // .post('/gov/org/userhouse/service/serviceScopeTree')
+        // .post('/data/aggregator/org/agencytree', params)
+        .post('/gov/org/customeragency/staffinagencylist')
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          } else {
+            console.log('获取查询详情成功', res.data)
+            let { agencyList, subAgencyList } = res.data
+            // this.optionsA = res.data
+            // console.log(this.optionsA);
+            const _arr = [{...agencyList, subAgencyList: [...subAgencyList] }]
+            this.optionsA = this.deepTree(_arr)
+            console.log('optionsA----', this.optionsA)
+          }
+        })
+        .catch(() => {
+          this.dataListLoading = false
+          return this.$message.error('网络错误')
+        })
+        this.dataListLoading = false
+    },
+    deepTree(arr) {
+      if (Array.isArray(arr)) {
+        return arr.map(item => {
+          return {
+            ...item,
+            subAgencyList: item.subAgencyList.length > 0 && this.deepTree(item.subAgencyList) || null
+          }
+        })
+      }
+    }
+  }
+}
+</script>
+<style>
+.block{
+  position: absolute;
+  left: 0px;
+  display: inline-block;
+  width: 35px;
+  height: 50px;
+  background: #fff;
+}
+.cascader-block .el-cascader-node>.el-radio{
+  display: none;
+}
+</style>
+<style lang="scss" scoped>
+  .blacklist-reason {
+    width: 100%;
+    height: 80px;
+    border: 1px solid #e4e4e4;
+    border-radius: 4px;
+    resize: none;
+    padding: 8px;
+    box-sizing: border-box;
+  }
+</style>
+<style lang="scss" scoped>
+  @import "@/assets/scss/buttonstyle.scss";
+
+  .resi-container .resi-card-table {
+    ::v-deep .el-table th {
+      color: #fff;
+      background-color: rgba(33, 149, 254, 1);
+      // border-right: 1px solid rgba(33, 149, 254, 1);
+    }
+  }
+  .resi-table {
+    ::v-deep .el-button--text {
+      text-decoration: underline;
+    }
+    ::v-deep .btn-color-del {
+      margin-left: 10px;
+      color: rgba(213, 16, 16, 1);
+    }
+    ::v-deep .btn-color-edit {
+      color: rgba(0, 167, 169, 1);
+    }
+  }
+  .form-wr {
+    .input-width {
+      width: 260px;
+
+    }
+    .input-width-textarea {
+      width: 500px;
+    }
+    .imsg-list {
+      display: flex;
+      align-items: center;
+      .imgs-item {
+        position: relative;
+        margin-right: 10px;
+        .el-icon-delete {
+          position: absolute;
+          top: 0;
+          right: 0;
+          font-size: 18px;
+          color: red;
+          z-index: 3;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  .div-content {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .resi-row-btn {
+    margin-bottom: 13px;
+    .upload-btn {
+      display: inline-block;
+      margin: 0 10px;
+    }
+  }
+</style>

src/views/modules/shequzhili/statics/gridEvent.vue

@@ -0,0 +1,390 @@
+<template>
+  <div class="mode-block resi-container">
+    <el-card ref="searchCard" class="search-card">
+      <el-form ref="searchForm" :inline="true" :model="dataForm" size="small">
+        <el-form-item label="所属组织" label-width="100px"
+                      prop="orgId">
+          <el-cascader ref="cascaderUnit" v-model="orgId" 
+          :options="optionsA" 
+          :props="{ checkStrictly: true, emitPath: false,children:'subOrgList',label:'orgName'}" 
+          clearable 
+          @change="handleCalscChange"/>
+            <!-- <template slot-scope="{ node, data }">
+              <div @click="cascaderClick(data)">
+                <span>{{ data.objectName }}</span>
+                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+              </div>
+            </template> -->
+        </el-form-item>
+        <el-form-item label="时间范围"
+                      prop="startTime">
+          <el-date-picker v-model="timeRange"
+                          type="daterange"
+                          clearable
+                          size="small"
+                          :picker-options="pickerOptions"
+                          range-separator="至"
+                          start-placeholder="选择日期"
+                          end-placeholder="选择日期"
+                          value-format="yyyyMMdd">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" size="small" class="diy-button--search" @click="handleSearch">查询</el-button>
+          <el-button
+            class="diy-button--reset"
+            size="small"
+            @click="resetForm('searchForm')"
+            >重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card class="resi-card-table">
+      <div class="resi-row-btn">
+        <!-- <el-button @click="totalHandle"
+                    class="diy-button--add"
+                    size="small">总计</el-button> -->
+        <el-button @click="exportHandle"
+                    class="diy-button--reset"
+                    size="small">导出</el-button>
+      </div>
+      <el-table class="resi-table" v-loading="dataListLoading" :data="dataList" border style="width: 100%"
+      :height="tableHeight">
+        <!-- <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column> -->
+        <el-table-column type="index" label="序号" header-align="center" align="center" width="50"></el-table-column>
+        <el-table-column min-width="100" prop="staffName" label="网格员" header-align="center" align="center" />
+        <el-table-column min-width="100" prop="orgName" label="所属社区" header-align="center" align="center" />
+        <el-table-column min-width="100" prop="projectCount" label="上报数量" header-align="center" align="center" />
+        <el-table-column min-width="110" prop="closedCount" label="办结数" header-align="center" align="center" />
+      </el-table>
+      <div>
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page.sync="pageNo"
+          :page-sizes="[20, 50, 100, 200]"
+          :page-size="pageSize"
+          layout="sizes, prev, pager, next, total"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
+    </el-card>
+    <el-dialog
+            title="总计"
+            :visible.sync="totalVisible"
+            width="60%">
+      <template>
+        <el-table
+                :data="tableData"
+                style="width: 100%"
+                height="200">
+          <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
+          <el-table-column min-width="100" prop="staffName" label="网格员" header-align="center" align="center" />
+          <el-table-column min-width="100" prop="orgName" label="所属社区" header-align="center" align="center" />
+          <el-table-column min-width="100" prop="projectCount" label="上报数量" header-align="center" align="center" />
+          <el-table-column min-width="110" prop="closedCount" label="办结数" header-align="center" align="center" />
+        </el-table>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+// import AddOrUpdate from './factagencyuserhousedaily-add-or-update'
+export default {
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/data/stats/factAgencyUserHouseDaily/page',
+        getDataListIsPage: true,
+        deleteURL: '/data/stats/factAgencyUserHouseDaily',
+        deleteIsBatch: true,
+        exportURL: '/data/stats/factAgencyUserHouseDaily/export'
+      },
+      dataListLoading: false,
+      dataList: [],
+      optionsA: [],
+      totalVisible: false,
+      pickerOptions: {
+        disabledDate(time) {
+            return time.getTime() > (Date.now() - 3600 * 1000 * 24);
+          },
+      },
+      timeRange: '',
+      dataForm: {
+        orgId: '',
+        startTime: '',
+        endTime: '',
+        orgType: ''
+      },
+      total: 0,
+      tableData: [],
+      pageNo: 1,
+      pageSize: 20,
+      orgId: ''
+    }
+  },
+  components: {
+    // AddOrUpdate
+  },
+  created () {
+    this.getGridList()
+    this.getTableList()
+    // this.getValiheList()
+  },
+  watch: {
+    timeRange (val) {
+      if (Array.isArray(val) && val.length == 2) {
+        this.dataForm.startTime = val[0];
+        this.dataForm.endTime = val[1];
+      } else {
+        this.dataForm.startTime = "";
+        this.dataForm.endTime = "";
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(["clientHeight", "iframeHeight"]),
+    tableHeight() {
+      const h = this.clientHeight - 360 + this.iframeHeigh;
+      const _h = this.clientHeight - 360;
+      return this.$store.state.inIframe ? h : _h;
+    },
+  },
+  methods: {
+    handleCalscChange(val) {
+      console.log('val-----', val)
+      const arr = val.split('-')
+      this.dataForm.orgId = arr[1]
+      this.dataForm.orgType = arr[0]
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.timeRange = "";
+      this.orgId = ''
+      this.dataForm.startTime = "";
+      this.dataForm.endTime = "";
+      this.dataForm.orgType = "";
+      this.handleSearch();
+    },
+    handleSearch() {
+      this.pageNo = 1
+      this.getTableList()
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+      this.pageSize = val;
+      this.getTableList();
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+      this.pageNo = val;
+      this.getTableList();
+    },
+    exportHandle () {
+      const url = '/data/aggregator/org/memberProjectInfoList/export'
+      this.$http({
+        method: 'Post',
+        url,
+        responseType: 'blob',
+        data: this.dataForm
+      }).then(res => {
+        // this.download(res.data, title + '.xls')
+        if (res.headers["content-disposition"]) {
+          let fileName = window.decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1])
+          console.log('filename', fileName)
+          let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
+          var url = window.URL.createObjectURL(blob)
+          var aLink = document.createElement('a')
+          aLink.style.display = 'none'
+          aLink.href = url
+          aLink.setAttribute('download', fileName)
+          document.body.appendChild(aLink)
+          aLink.click()
+          document.body.removeChild(aLink) //下载完成移除元素
+          window.URL.revokeObjectURL(url) //释放掉blob对象
+        } else this.$message.error('下载失败')
+      }).catch(err => {
+        console.log('err', err)
+        return this.$message.error('网络错误')
+      })
+    },
+    cascaderClick (nodeData) {
+      this.dataForm.agencyId = nodeData.objectId;
+      this.dataForm.level = nodeData.objectType
+      this.$refs.cascaderUnit.checkedValue = nodeData.objectId;
+      this.$refs.cascaderUnit.computePresentText();
+      this.$refs.cascaderUnit.toggleDropDownVisible(false);
+
+    },
+    totalHandle () {
+      this.tableData = []
+      this.dataForm.type = 0
+      this.$http
+              .get('/data/stats/factAgencyUserHouseDaily/total',{params: this.dataForm})
+              .then(({ data: res }) => {
+                if (res.code !== 0) {
+                  return this.$message.error(res.msg)
+                } else {
+                  console.log('获取查询详情成功', res.data)
+                  if (res.data) this.tableData.push(res.data)
+                }
+              })
+              .catch(() => {
+                return this.$message.error('网络错误')
+              })
+      this.totalVisible = true
+    },
+    getTableList() {
+      this.dataListLoading = true
+      const { user } = this.$store.state
+      const _data = {
+        ...this.dataForm,
+        pageNo: this.pageNo,
+        pageSize: this.pageSize
+      }
+      this.$http
+        .post('/data/aggregator/org/memberProjectInfoList', _data)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          } else {
+            this.dataList = res.data.list
+            this.total = res.data.total
+          }
+        })
+        .catch(() => {
+          this.dataListLoading = false
+          return this.$message.error('网络错误')
+        })
+        this.dataListLoading = false
+    },
+    getGridList() {
+      const { user } = this.$store.state
+      const params = {
+        agencyId: user.agencyId,
+        client: 'gov'
+      }
+      this.$http
+        // .post('/gov/org/userhouse/service/serviceScopeTree')
+        .post('/data/aggregator/org/agencytree', params)
+        // .post('/gov/org/customeragency/staffinagencylist')
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          } else {
+            console.log('获取查询详情成功', res.data)
+            // let { agencyList, subAgencyList } = res.data
+            this.optionsA = this.deepTree(res.data)
+            // console.log(this.optionsA);
+            // const _arr = [{...agencyList, subAgencyList: [...subAgencyList] }]
+            // this.optionsA = this.deepTree(_arr)
+            console.log('optionsA----', this.optionsA)
+          }
+        })
+        .catch(() => {
+          return this.$message.error('网络错误')
+        })
+    },
+    deepTree(arr) {
+      if (Array.isArray(arr)) {
+        return arr.map(item => {
+          return {
+            ...item,
+            value: item.orgType + '-' + item.orgId,
+            subOrgList: item.subOrgList.length > 0 && this.deepTree(item.subOrgList) || null
+          }
+        })
+      }
+    }
+  }
+}
+</script>
+<style>
+.block{
+  position: absolute;
+  left: 0px;
+  display: inline-block;
+  width: 35px;
+  height: 50px;
+  background: #fff;
+}
+.cascader-block .el-cascader-node>.el-radio{
+  display: none;
+}
+</style>
+<style lang="scss" scoped>
+  .blacklist-reason {
+    width: 100%;
+    height: 80px;
+    border: 1px solid #e4e4e4;
+    border-radius: 4px;
+    resize: none;
+    padding: 8px;
+    box-sizing: border-box;
+  }
+</style>
+<style lang="scss" scoped>
+  @import "@/assets/scss/buttonstyle.scss";
+
+  .resi-container .resi-card-table {
+    ::v-deep .el-table th {
+      color: #fff;
+      background-color: rgba(33, 149, 254, 1);
+      // border-right: 1px solid rgba(33, 149, 254, 1);
+    }
+  }
+  .resi-table {
+    ::v-deep .el-button--text {
+      text-decoration: underline;
+    }
+    ::v-deep .btn-color-del {
+      margin-left: 10px;
+      color: rgba(213, 16, 16, 1);
+    }
+    ::v-deep .btn-color-edit {
+      color: rgba(0, 167, 169, 1);
+    }
+  }
+  .form-wr {
+    .input-width {
+      width: 260px;
+
+    }
+    .input-width-textarea {
+      width: 500px;
+    }
+    .imsg-list {
+      display: flex;
+      align-items: center;
+      .imgs-item {
+        position: relative;
+        margin-right: 10px;
+        .el-icon-delete {
+          position: absolute;
+          top: 0;
+          right: 0;
+          font-size: 18px;
+          color: red;
+          z-index: 3;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  .div-content {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .resi-row-btn {
+    margin-bottom: 13px;
+    .upload-btn {
+      display: inline-block;
+      margin: 0 10px;
+    }
+  }
+</style>