<template>
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="zhuti">
      <div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>招商资源监测</span> <span style="padding:0 5px;">></span> <span
            style="color:#000000e6">统计分析</span></div>
      </div>
      <div style="width: 100%;margin-bottom:30px;">
        <div style="display:flex;justify-content: space-between">
          <div style="display:flex;">
            <div style="margin-right: 10px;line-height:35px;">商铺/广告位资源统计</div>
    <!--        <el-select v-model="formSel.createDate" placeholder="所属区域" style="width: 150px;margin-right: 10px">
              <el-option label="1" value="1" />
              <el-option label="2" value="2" />
            </el-select>
            <el-select v-model="formSel.createDate" placeholder="经营类型" style="width: 150px;margin-right: 10px">
              <el-option label="1" value="1" />
              <el-option label="2" value="2" />
            </el-select> -->
            <el-date-picker v-model="FormTime"  value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期"
              end-placeholder="结束日期" style="width: 200px;margin-right: 10px;ma" prefix-icon="none">
            </el-date-picker>
            <el-button @click="onSubmit" style="background-color: #3F9B6A;color: #fff">检索
            </el-button>
            <el-button @click="resetting" class="buttonHover"
              style="color: #000;border: 1px solid #DBDBDB;background-color: #fff;">重置
            </el-button>
          </div>
          <!-- <div>
            <el-button @click="gitOut" style="background-color: #3F9B6A;color: #fff">导出
            </el-button>
          </div> -->
        </div>
        <div style="display:flex;margin-top:10px;">
          <div style="width:48%;height: 400px;marigin-right:20px;">
            <div style="display: flex;justify-content: space-between;">
              <div style="line-height:35px;">商铺/广告位资源统计</div>
              <!-- <div>
                <el-select v-model="formSel.createDate" placeholder="状态" style="width: 100px;margin-right: 10px">
                  <el-option label="1" value="1" />
                  <el-option label="2" value="2" />
                </el-select>
                <el-select v-model="formSel.createDate" placeholder="类型" style="width: 100px;margin-right: 10px">
                  <el-option label="1" value="1" />
                  <el-option label="2" value="2" />
                </el-select>
              </div> -->
            </div>
            <div ref="shop1ZX" style="width:100%;height: 400px;"></div>
          </div>
          <div style="width:48%;height: 400px;marigin-right:20px;">
            <div style="display: flex;justify-content: space-between;">
              <div style="line-height:35px;">收费位置统计</div>
              <!-- <div>
                <el-select v-model="formSel.createDate" placeholder="状态" style="width: 100px;margin-right: 10px">
                  <el-option label="1" value="1" />
                  <el-option label="2" value="2" />
                </el-select>
                <el-select v-model="formSel.createDate" placeholder="类型" style="width: 100px;margin-right: 10px">
                  <el-option label="1" value="1" />
                  <el-option label="2" value="2" />
                </el-select>
              </div> -->
            </div>
            <div ref="shop1TJ" style="width:100%;height: 400px;"></div>
          </div>
        </div>
      </div>
      <div style="width: 100%;margin-bottom:20px;">
        <div style="display:flex;justify-content: space-between">
          <div style="display:flex;">
            <div style="margin-right: 10px;line-height:35px;">商铺/广告位意向统计</div>
            <!-- <el-date-picker v-model="value1" type="datetimerange" range-separator="-" start-placeholder="开始日期"
              end-placeholder="结束日期" style="width: 200px;margin-right: 10px;margin-top:0px;" prefix-icon="none">
            </el-date-picker>
            <el-button @click="onSubmit" style="background-color: #3F9B6A;color: #fff">检索
            </el-button>
            <el-button @click="resetting" class="buttonHover"
              style="color: #000;border: 1px solid #DBDBDB;background-color: #fff;">重置
            </el-button> -->
          </div>
          <!-- <div>
            <el-button @click="onSubmit" style="background-color: #3F9B6A;color: #fff">导出
            </el-button>
          </div> -->
        </div>
        <div style="display:flex;margin-top:10px;">
          <div style="width:48%;height: 400px;marigin-right:20px;">
            <div style="display: flex;justify-content: space-between;">
              <div style="line-height:35px;">租赁意向人群统计</div>
              <!-- <div>
                <el-select v-model="formSel.createDate" placeholder="类型" style="width: 100px;margin-right: 10px">
                  <el-option label="1" value="1" />
                  <el-option label="2" value="2" />
                </el-select>
              </div> -->
            </div>
            <div ref="shop2BT" style="width:100%;height: 400px;"></div>
          </div>
          <div style="width:48%;height: 400px;marigin-right:20px;">
            <div style="display: flex;justify-content: space-between;">
              <div style="line-height:35px;">商户收费情况统计</div>
              <!-- <div>
                <el-select v-model="formSel.createDate" placeholder="类型" style="width: 100px;margin-right: 10px">
                  <el-option label="1" value="1" />
                  <el-option label="2" value="2" />
                </el-select>
              </div> -->
            </div>
            <div ref="shop2TJ" style="width:100%;height: 400px;"></div>
          </div>
        </div>
      </div>
      <!-- <div style="width: 100%;margin-bottom:20px;">
        <div style="display:flex;justify-content: space-between">
          <div style="display:flex;">
            <div style="margin-right: 10px;line-height:35px;">商铺/广告位整体经营统计</div>
           <el-date-picker v-model="value1" type="datetimerange" range-separator="-" start-placeholder="开始日期"
              end-placeholder="结束日期" style="width: 200px;margin-right: 10px;margin-top:0px;" prefix-icon="none">
            </el-date-picker>
            <el-button @click="onSubmit" style="background-color: #3F9B6A;color: #fff">检索
            </el-button>
            <el-button @click="resetting" class="buttonHover"
              style="color: #000;border: 1px solid #DBDBDB;background-color: #fff;">重置
            </el-button>
          </div>
          <div>
            <el-button @click="onSubmit" style="background-color: #3F9B6A;color: #fff">导出
            </el-button>
          </div>
        </div>
        <div style="display:flex;margin-top:10px;">
          <div style="width:48%;height: 400px;marigin-right:20px;">
            <div style="display: flex;justify-content: space-between;">
              <div style="line-height:35px;">经营趋势统计</div>
              <div>
                <el-select v-model="formSel.createDate" placeholder="类型" style="width: 100px;margin-right: 10px">
                  <el-option label="1" value="1" />
                  <el-option label="2" value="2" />
                </el-select>
              </div>
            </div>
            <div ref="shop3ZX" style="width:100%;height: 400px;"></div>
          </div>
          <div style="width:48%;height: 400px;marigin-right:20px;">
            <div style="display: flex;justify-content: space-between;">
              <div style="line-height:35px;">营业收入情况</div>
              <div>
                <el-select v-model="formSel.createDate" placeholder="类型" style="width: 100px;margin-right: 10px">
                  <el-option label="1" value="1" />
                  <el-option label="2" value="2" />
                </el-select>
              </div>
            </div>
            <div ref="shop3TJ" style="width:100%;height: 400px;"></div>
          </div>
        </div>
      </div> -->
      <!-- 进度条 -->
      <!-- <div style="width: 100%;margin:20px 0;">
        <div style="display:flex;justify-content: space-between">
          <div style="display:flex;">
            <div style="margin-right: 10px;line-height:35px;">商户收费情况统计</div>
           <el-input placeholder="请输入商户名称" v-model="formSel.shopName" style="width:200px;margin-right:15px;" />
            <el-date-picker v-model="value1" type="datetimerange" range-separator="-" start-placeholder="开始日期"
              end-placeholder="结束日期" style="width: 200px;margin-right: 10px;margin-top:0px;" prefix-icon="none">
            </el-date-picker>
            <el-button @click="onSubmit" style="background-color: #3F9B6A;color: #fff">检索
            </el-button>
            <el-button @click="resetting" class="buttonHover"
              style="color: #000;border: 1px solid #DBDBDB;background-color: #fff;">重置
            </el-button>
          </div>
          <div>
            <el-button @click="onSubmit" style="background-color: #3F9B6A;color: #fff">导出
            </el-button>
          </div>
        </div>
        <div style="margin-top:10px;padding:20px">
          <div style="display:flex;margin-bottom:20px;" v-for="index in 5">
            <div style="margin-right:20px;">收费项{{index}}</div>
            <div style='width:90%'><el-progress :percentage="50"></el-progress></div>
          </div>
        </div>
      </div> -->

      <!-- <div style="width: 100%;margin:20px 0;">
        <div style="display:flex;justify-content: space-between">
          <div style="display:flex;">
            <div style="margin-right: 10px;line-height:35px;">收费位置统计</div>
            <el-input placeholder="请输入商户名称" v-model="formSel.shopName" style="width:200px;margin-right:15px;" />
            <el-date-picker v-model="value1" type="datetimerange" range-separator="-" start-placeholder="开始日期"
              end-placeholder="结束日期" style="width: 200px;margin-right: 10px;margin-top:0px;" prefix-icon="none">
            </el-date-picker>
            <el-button @click="onSubmit" style="background-color: #3F9B6A;color: #fff">检索
            </el-button>
            <el-button @click="resetting" class="buttonHover"
              style="color: #000;border: 1px solid #DBDBDB;background-color: #fff;">重置
            </el-button>
          </div>
          <div>
            <el-button @click="onSubmit" style="background-color: #3F9B6A;color: #fff">导出
            </el-button>
          </div>
        </div>
        <div style="margin-top:10px;padding:20px">
          <div style="display:flex;margin-bottom:20px;" v-for="index in 5">
            <div style="margin-right:20px;">线上商城{{index}}</div>
            <div style='width:90%'><el-progress :percentage="50"></el-progress></div>
          </div>
        </div>
      </div> -->

      <!-- <div style="width: 100%;margin-bottom:20px;">
        <div style="display:flex;justify-content: space-between">
          <div style="display:flex;">
            <div style="margin-right: 10px;line-height:35px;">出租、退租、续租统计</div>
            <el-select v-model="formSel.createDate" placeholder="所属区域" style="width: 150px;margin-right: 10px">
              <el-option label="1" value="1" />
              <el-option label="2" value="2" />
            </el-select>
            <el-select v-model="formSel.createDate" placeholder="经营类型" style="width: 150px;margin-right: 10px">
              <el-option label="1" value="1" />
              <el-option label="2" value="2" />
            </el-select>
            <el-date-picker v-model="value1" type="datetimerange" range-separator="-" start-placeholder="开始日期"
              end-placeholder="结束日期" style="width: 200px;margin-right: 10px;ma" prefix-icon="none">
            </el-date-picker>
            <el-button @click="onSubmit" style="background-color: #3F9B6A;color: #fff">检索
            </el-button>
            <el-button @click="resetting" class="buttonHover"
              style="color: #000;border: 1px solid #DBDBDB;background-color: #fff;">重置
            </el-button>
          </div>
          <div>
            <el-button @click="onSubmit" style="background-color: #3F9B6A;color: #fff">导出
            </el-button>
          </div>
        </div>
        <div style="display:flex;margin-top:10px;">
          <div style="width:48%;height: 400px;marigin-right:20px;">
            <div style="display: flex;justify-content: space-between;">
              <div style="line-height:35px;">租赁趋势统计</div>
              <div>
                <el-select v-model="formSel.createDate" placeholder="类型" style="width: 100px;margin-right: 10px">
                  <el-option label="1" value="1" />
                  <el-option label="2" value="2" />
                </el-select>
              </div>
            </div>
            <div ref="shop4ZX" style="width:100%;height: 400px;"></div>
          </div>
          <div style="width:48%;height: 400px;marigin-right:20px;">
            <div style="display: flex;justify-content: space-between;">
              <div style="line-height:35px;">租赁商户top5</div>
              <div>
                <el-select v-model="formSel.createDate" placeholder="类型" style="width: 100px;margin-right: 10px">
                  <el-option label="1" value="1" />
                  <el-option label="2" value="2" />
                </el-select>
              </div>
            </div>
            <div ref="shop4TJ" style="width:100%;height: 400px;"></div>
          </div>
        </div>
      </div> -->

      <div style="width: 100%;margin-bottom:20px;">
        <div style="display:flex;justify-content: space-between">
          <div style="display:flex;">
            <div style="margin-right: 10px;line-height:35px;">合同情况统计</div>
            <!-- <el-select v-model="formSel.createDate" placeholder="所属区域" style="width: 150px;margin-right: 10px">
              <el-option label="1" value="1" />
              <el-option label="2" value="2" />
            </el-select>
            <el-select v-model="formSel.createDate" placeholder="经营类型" style="width: 150px;margin-right: 10px">
              <el-option label="1" value="1" />
              <el-option label="2" value="2" />
            </el-select>
            <el-date-picker v-model="value1" type="datetimerange" range-separator="-" start-placeholder="开始日期"
              end-placeholder="结束日期" style="width: 200px;margin-right: 10px;ma" prefix-icon="none">
            </el-date-picker>
            <el-button @click="onSubmit" style="background-color: #3F9B6A;color: #fff">检索
            </el-button>
            <el-button @click="resetting" class="buttonHover"
              style="color: #000;border: 1px solid #DBDBDB;background-color: #fff;">重置
            </el-button> -->
          </div>
          <!-- <div>
            <el-button @click="onSubmit" style="background-color: #3F9B6A;color: #fff">导出
            </el-button>
          </div> -->
        </div>
        <div style="display:flex;margin-top:10px;">
          <div style="width:48%;height: 400px;marigin-right:20px;">
            <div style="display: flex;justify-content: space-between;">
              <div style="line-height:35px;">合同签约数量趋势</div>
              <!-- <div>
                <el-select v-model="formSel.createDate" placeholder="类型" style="width: 100px;margin-right: 10px">
                  <el-option label="1" value="1" />
                  <el-option label="2" value="2" />
                </el-select>
              </div> -->
            </div>
            <div ref="shop5ZX" style="width:100%;height: 400px;"></div>
          </div>
          <div style="width:48%;height: 400px;marigin-right:20px;">
            <div style="display: flex;justify-content: space-between;">
              <div style="line-height:35px;">签约数量占比</div>
              <!-- <div>
                <el-select v-model="formSel.createDate" placeholder="类型" style="width: 100px;margin-right: 10px">
                  <el-option label="1" value="1" />
                  <el-option label="2" value="2" />
                </el-select>
              </div> -->
            </div>
            <div ref="shop5BT" style="width:100%;height: 400px;"></div>
          </div>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
  import {
    statistical,
  } from '@/api/information'
  import * as echarts from 'echarts'
  export default {
    name: 'atmosphereGl',
    data() {
      return {
        currentPage: 1,
        radio1: 0,
        total: 100,
        flag: false,
        pageSize: 10,
        tableData: [],
        FormTime:[],
        pageindex: {
           startTime: "1990-09-11",
             endTime: "2024-11-09"
        },
        formSel: {

        }
      }
    },
    computed: {},
    created() {
      this.getAll()

    },
    mounted() {

      // this.charDam1()
      // this.charDam2()
      // this.charDam3()
      // this.charDam4()
      // this.charDam5()

      // this.charDam7()

      // this.charDam9()
    },
    methods: {
      charDam(datas) {
        let Dom = this.$refs.shop2TJ
        let myChart = echarts.init(Dom)
        let processedData = datas.map(item => ({
          name: item.trendDate,
          value: item.trendQuantity
        }))
        let option = {
          legend: {},
          tooltip: {},
          xAxis: {
            type: 'category',
              data:processedData.map(item => item.name),
          },
          yAxis: {
            type: 'value',
          },
          grid: {
            left: '1%',
            right: '1%',
            top: '5%',
            bottom: '6%',
            containLabel: true
          },
          series: [{
            type: 'bar',
            color: '#3f9b6a',
            data: processedData.map(item => item.value),
          }
          ]
        };
        option && myChart.setOption(option);
      },
      charDam1(datas) {
        let Dom = this.$refs.shop1ZX
        let myChart = echarts.init(Dom);

        let processedData = datas.map(item => ({
          name: item.trendDate || '11',
          value: item.trendQuantity
        }))
        processedData.push({name:'',value:0})
        let option = {
          xAxis: {
            type: 'category',
            data: ['商铺','场地','广告位'],
          },
          yAxis: {
            type: 'value',
            max: 50
          },
          grid: {
            left: '1%',
            right: '5%',
            top: '5%',
            bottom: '6%',
            containLabel: true
          },
          series: [{ // 设置线条颜色
            lineStyle: {
              color: '#3f9b6a', // 这里设置为红色
              width: 2, // 线条宽度
            },
            data: processedData.map(item => item.value),
            type: 'line'
          }]
        }
        option && myChart.setOption(option);
      },
      charDam2(datas) {
        let Dom = this.$refs.shop2BT
        let myChart = echarts.init(Dom);
        let processedData = datas.map(item => ({
          name: item.trendDate,
          value: item.trendQuantity
        }))


        let option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'right'
          },
          series: [{
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            color: ['#3f9b6a', 'rgb(61,182,211)'],
               data:processedData,
          }]
        }
        option && myChart.setOption(option);
      },
      charDam3(datas) {
        let Dom = this.$refs.shop1TJ
        let myChart = echarts.init(Dom);

        let processedData = datas.map(item => ({
          // name: item.trendDate || '11',
          value: item.trendQuantity
        }))
        let option = {
          legend: {},
          tooltip: {},
       xAxis: {
         type: 'category',
         data: ['商铺','场地','广告位'],
       },
          yAxis: {
            type: 'value',
            max: 50
          },
          grid: {
            left: '1%',
            right: '1%',
            top: '5%',
            bottom: '6%',
            containLabel: true
          },
          series: [{
            type: 'bar',
            color: '#3f9b6a',
            data: processedData.map(item => item.value),
            type: 'line'
          },
          ]
        };
        option && myChart.setOption(option);
      },
      // charDam4() {
      //   let Dom = this.$refs.shop4ZX
      //   let myChart = echarts.init(Dom);
      //   let option = {
      //     xAxis: {
      //       type: 'category',
      //       data: ['2024-07', '2024-08', '2024-09', '2024-10', '2024-11', '2024-12', '2024-13']
      //     },
      //     yAxis: {
      //       type: 'value'
      //     },
      //     grid: {
      //       left: '1%',
      //       right: '1%',
      //       top: '5%',
      //       bottom: '6%',
      //       containLabel: true
      //     },
      //     series: [{ // 设置线条颜色
      //       lineStyle: {
      //         color: '#3f9b6a', // 这里设置为红色
      //         width: 2, // 线条宽度
      //       },
      //       data: [0,0, 0, 1, 0, 0],
      //       type: 'line'
      //     }]
      //   }
      //   option && myChart.setOption(option);

      // },
      // charDam5() {
      //   let Dom = this.$refs.shop4TJ
      //   let myChart = echarts.init(Dom);
      //   let option = {
      //     tooltip: {
      //       trigger: 'axis',
      //       axisPointer: {
      //         type: 'shadow'
      //       }
      //     },
      //     grid: {
      //       left: '3%',
      //       right: '4%',
      //       bottom: '3%',
      //       containLabel: true
      //     },
      //     xAxis: {
      //       type: 'value',
      //       boundaryGap: [0, 0.01]
      //     },
      //     yAxis: {
      //       type: 'category',
      //       data: ['商户A', '商户B', '商户C', '商户D', '商户E', ]
      //     },
      //     series: [{
      //       lineStyle: {
      //         color: '#3f9b6a', // 这里设置为红色
      //         width: 2, // 线条宽度
      //       },
      //       name: '2011',
      //       type: 'bar',
      //       data: [2, 4, 5, 4, 1, 5]
      //     }]
      //   };
      //   option && myChart.setOption(option);
      // },
      charDam6(datas) {

        let Dom = this.$refs.shop5ZX
        let myChart = echarts.init(Dom)
        let processedData = datas.map(item => ({
          name: item.trendDate,
          value: item.trendQuantity
        }))
        let option = {
          xAxis: {
            type: 'category',
           data:processedData.map(item => item.name),
          },
          yAxis: {
            type: 'value'
          },
          grid: {
            left: '1%',
            right: '1%',
            top: '5%',
            bottom: '6%',
            containLabel: true
          },
          series: [{ // 设置线条颜色
            lineStyle: {
              color: '#3f9b6a', // 这里设置为红色
              width: 2, // 线条宽度
            },
          data: processedData.map(item => item.value),
            type: 'line'
          }]
        }
        option && myChart.setOption(option);


      },
      charDam7(datas) {
        let Dom = this.$refs.shop5BT
        let myChart = echarts.init(Dom);

        let processedData = datas.map(item => ({
          name: '签约数',
          value: item.trendQuantity
        }))

        // processedData.push({name:'签约数',value:0})
        let option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data:processedData
    }
  ]
}
        option && myChart.setOption(option);
      },

// charDam9(){

//     let Dom = this.$refs.shop3TJ
//     let myChart = echarts.init(Dom);
//     let option = {
//       tooltip: {
//         trigger: 'axis',
//         axisPointer: {
//           type: 'shadow'
//         }
//       },
//       grid: {
//         left: '3%',
//         right: '4%',
//         bottom: '3%',
//         containLabel: true
//       },
//       xAxis: {
//         type: 'value',
//         boundaryGap: [0, 0.01]
//       },
//       yAxis: {
//         type: 'category',
//         data: ['商户A', '商户B', '商户C', '商户D', '商户E', ]
//       },
//       series: [{
//         lineStyle: {
//           color: '#3f9b6a', // 这里设置为红色
//           width: 2, // 线条宽度
//         },
//         name: '2011',
//         type: 'bar',
//         data: [1, 2, 3, 4, 5, 10]
//       }]
//     };
//     option && myChart.setOption(option);

// },

      async getAll() {
        const res = await statistical(this.pageindex)

        this.charDam(res.data.seekingIntentionStatistics)
        this.charDam2(res.data.seekingIntentionStatistics)
        this.charDam6(res.data.contractTrend)

        this.charDam7(res.data.basicQueryTrends)
   let trends=[...res.data.shopTrend,...res.data.venueTrend,...res.data.advertisingTrend]

        this.charDam1(trends)
         this.charDam3(trends)
      },
      handleSizeChange() {

      },
      handleCurrentChange() {

      },
      resetting(){
      this.FormTime = []
    this.getAll()
      },
      async onSubmit(){

        let  Msg ={
          startTime: this.FormTime[0],
              endTime:this.FormTime[1]
        }
        const res = await statistical(Msg)
        this.charDam(res.data.seekingIntentionStatistics)
        this.charDam2(res.data.seekingIntentionStatistics)
        this.charDam6(res.data.contractTrend)
this.charDam7(res.data.basicQueryTrends)
   let trends=[...res.data.shopTrend,...res.data.venueTrend,...res.data.advertisingTrend]

        this.charDam1(trends)
         this.charDam3(trends)

      },
      gitOut(){

      },
    }
  }
</script>

<style scoped>
  .zhuti {
    padding: 0 20px 20px 20px;
    min-height: calc(100vh - 50px - 20px);
    background-color: #Fff;

  }

  /deep/ .el-form-item__content {
    line-height: 0;
  }

  .tableBtn {
    display: inline-block;
    margin-right: 10px;
  }

  .formSearch {
    position: relative;
    margin-top: 30px;
    display: flex;
    width: 100%;
    height: 30px;
    font-size: 14px;
    margin-bottom: 10px;
  }

  .greens {
    color: #3F9B6A;
  }


  .fenye {
    margin-top: 20px;
    display: flex;
    justify-content: flex-start;
    position: relative;
  }

  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #3F9B6A;
  }

  .el-row {
    margin-bottom: 20px;
  }

  :last-child {
    margin-bottom: 0;
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  /deep/ .bg-purple[data-v-0e3fe4ec] {
    background: #fff;
    height: 50px;
  }

  /deep/ .el-form--label-top .el-form-item__label {
    padding: 0;
  }

  .demo-input-suffix {
    display: flex;
    margin-right: 20px;
  }

  .pagination {
    text-align: right;
    line-height: 20px;
  }

  /deep/ .el-pagination__total {
    margin-top: 4px;
  }

  ::v-deep .el-select .el-input.is-focus .el-input__inner {
    border-color: #3F9B6A
  }

  /deep/ .el-dialog__header {
    background-color: #fff;
    padding: 0
  }

  /deep/ .el-radio__input.is-checked .el-radio__inner {
    border-color: #3F9B6A;
    background: #3F9B6A;
  }

  ::v-deep .buttonHover:hover {
    color: #3f9b6a !important;
    border-color: #c5e1d2 !important;
    background-color: #ecf5f0 !important;
    outline: none;
  }
</style>
