<template>
  <div class="AppQxnDv">
    <div class="left">
      <AiDvPanel style="width: 100%; height: auto;" border="border6" title="单位列表">
      </AiDvPanel>
      <div class="left-list">
        <div class="left-item" v-for="(item, index) in 16" :key="index">
          <i>{{ index + 1 }}</i>
          <div class="left-item__top">
            <h2>黔西南州公安局</h2>
            <el-select v-model="value" size="mini" placeholder="请选择派出所">
              <el-option label="南京派出所" value="1"></el-option>
              <el-option label="北京派出所" value="2"></el-option>
              <el-option label="长安派出所" value="3"></el-option>
            </el-select>
          </div>
          <div class="left-item__bottom">
            <span>居民数量：17246</span>
            <span>成员：2057</span>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="right-left">
        <AiDvPanel style="width: 100%" border="border6" title="警格事件概況">
          <div class="right-left__total AppQxnDv-total">
            <div class="item" v-for="(item, index) in 4" :key="index">
              <h2>全部人员数</h2>
              <div class="item-bottom">
                <span>726,079</span>
                <i>人</i>
              </div>
            </div>
          </div>
          <div class="right-left__top">
            <div class="wrapper">
              <div class="AppQxnDv-title">
                <h2>上报来源分布</h2>
              </div>
              <ai-echart-v2
                style="height: 220px; width: 100%; margin-top: 10px;"
                :ref="'chart1'"
                :data="chartData1"
                :ops="chartConfig1">
              </ai-echart-v2>
            </div>
            <div class="wrapper">
              <div class="AppQxnDv-title">
                <h2>事件办理情況</h2>
              </div>
              <ai-echart-v2
                style="height: 220px; width: 100%; margin-top: 10px;"
                :ref="'chart2'"
                :data="chartData2"
                :ops="chartConfig2">
              </ai-echart-v2>
            </div>
          </div>
          <div class="right-left__middle">
            <div class="left">
              <div class="wrapper">
                <div class="AppQxnDv-title">
                  <h2>事件受理率</h2>
                </div>
                <DoughnutChart :ratio="60"></DoughnutChart>
              </div>
              <div class="wrapper">
                <div class="AppQxnDv-title">
                  <h2>事件办结率</h2>
                </div>
                <DoughnutChart :ratio="95"></DoughnutChart>
              </div>
            </div>
            <div class="right wrapper">
              <div class="AppQxnDv-title">
                <h2>最新办理动态</h2>
                <el-select v-model="value" style="width: 92px" size="mini" placeholder="专属">
                  <el-option label="XXX派出所" value="1"></el-option>
                  <el-option label="XXX派出所" value="2"></el-option>
                  <el-option label="XXX派出所" value="3"></el-option>
                </el-select>
              </div>
              <AiDvTable
                style="margin-top: 16px; height: 220px;"
                stripe="1"
                size="mini"
                :headerStyle="{
                  color: '#02FEFF',
                  fontSize: '12px',
                  fontWeight: '600',
                  backgroundColor: 'rgba(33, 180, 253, 0.1)'
                }"
                :config="blConfig"
                :data="bbTableData">
              </AiDvTable>
            </div>
          </div>
          <div class="right-left__bottom">
            <div class="AppQxnDv-title">
              <div class="left AppQxnDv-title__tab">
                <h2 @click="currIndex = 0" :class="[currIndex === 0 ? 'active' : '']">隐患上报</h2>
                <h2 @click="currIndex = 1" :class="[currIndex === 1 ? 'active' : '']">咨询服务</h2>
                <h2 @click="currIndex = 2" :class="[currIndex === 2 ? 'active' : '']">矛盾调解</h2>
                <h2 @click="currIndex = 3" :class="[currIndex === 3 ? 'active' : '']">其他</h2>
              </div>
            </div>
            <ai-echart-v2
              style="height: 236px; margin-top: 10px; width: 100%;"
              :ref="'chart3'"
              :data="chartData3"
              :ops="chartConfig3">
            </ai-echart-v2>
          </div>
        </AiDvPanel>
      </div>
      <div class="right-middle">
        <AiDvPanel style="width: 100%" border="border6" title="综合概况图">
          <div class="right-left__total AppQxnDv-total">
            <div class="item" v-for="(item, index) in 5" :key="index">
              <h2>分局数量</h2>
              <div class="item-bottom">
                <span>726,079</span>
                <i>人</i>
              </div>
            </div>
          </div>
          <div class="wrapper">
            <DvMap style="width: 100%; height: 356px;"></DvMap>
          </div>
          <div class="right-middle__bottom">
            <div class="AppQxnDv-title">
              <h2>事件列表</h2>
              <div class="right">
                <el-select v-model="value" style="width: 82px; margin-right:6px;" size="mini" placeholder="上报来源">
                  <el-option label="XXX派出所" value="1"></el-option>
                  <el-option label="XXX派出所" value="2"></el-option>
                  <el-option label="XXX派出所" value="3"></el-option>
                </el-select>
                <el-select v-model="value" style="width: 82px; margin-right:6px;" size="mini" placeholder="事件类型">
                  <el-option label="XXX派出所" value="1"></el-option>
                  <el-option label="XXX派出所" value="2"></el-option>
                  <el-option label="XXX派出所" value="3"></el-option>
                </el-select>
                <el-select v-model="value" style="width: 82px; margin-right:6px;" size="mini" placeholder="事件状态">
                  <el-option label="XXX派出所" value="1"></el-option>
                  <el-option label="XXX派出所" value="2"></el-option>
                  <el-option label="XXX派出所" value="3"></el-option>
                </el-select>
                <el-select v-model="value" style="width: 82px; margin-right:6px;" size="mini" placeholder="最近30天">
                  <el-option label="XXX派出所" value="1"></el-option>
                  <el-option label="XXX派出所" value="2"></el-option>
                  <el-option label="XXX派出所" value="3"></el-option>
                </el-select>
                <el-input placeholder="关键词" style="width: 98px;">
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </div>
            </div>
            <AiDvTable
              style="margin-top: 16px; height: 430px;"
              :heigth="'100%'"
              size="mini"
              stripe="1"
              :headerStyle="{
                color: '#02FEFF',
                fontSize: '12px',
                fontWeight: '600',
                backgroundColor: 'rgba(33, 180, 253, 0.1)'
              }"
              :config="eventTableConfig"
              :data="eventTableData">
            </AiDvTable>
          </div>
        </AiDvPanel>
      </div>
      <div class="right-right">
        <AiDvPanel class="bottom" style="" border="border6" title="办理排行">
          <AiDvTable
            :heigth="'100%'"
            stripe="1"
            :headerStyle="{
              color: '#02FEFF',
              fontSize: '12px',
              fontWeight: '600',
              backgroundColor: 'rgba(33, 180, 253, 0.1)'
            }"
            isShowIndex="1"
            :config="tableConfig"
            :data="tableData">
          </AiDvTable>
        </AiDvPanel>
      </div>
    </div>
  </div>
</template>

<script>
  import DvMap from './components/DvMap'
  import DoughnutChart from './components/DoughnutChart'
  export default {
    name: 'AppQxnEventDv',
    label: '事件上报',

    components: {
      DvMap,
      DoughnutChart
    },

    data ()  {
      return {
        value: '',
        currIndex: 0,
        chartData2: [
          {
            "name": "1月",
            "已办理": 4,
            "待处理": 44,
            "处理中": 23,
            "已拒绝": 11
          },
          {
            "name": "2月",
            "已办理": 2,
            "待处理": 24,
            "处理中": 23,
            "已拒绝": 11
          },
          {
            "name": "3月",
            "已办理": 44,
            "待处理": 14,
            "处理中": 2,
            "已拒绝": 11
          },
          {
            "name": "4月",
            "已办理": 4,
            "待处理": 44,
            "处理中": 3,
            "已拒绝": 1
          },
          {
            "name": "5月",
            "已办理": 4,
            "待处理": 4,
            "处理中": 23,
            "已拒绝": 11
          }
        ],
        chartData1: [
          {
            "name": "1月",
            "警格上报": 23,
            "居民上报": 23
          },
          {
            "name": "2月",
            "警格上报": 23,
            "居民上报": 23
          },
          {
            "name": "3月",
            "警格上报": 23,
            "居民上报": 23
          },
          {
            "name": "4月",
            "警格上报": 23,
            "居民上报": 23
          }
        ],
        tableData: [
          {
            name: '姓名',
            v1: '宗梦瑞',
            v2: '宗梦瑞',
            v3: '宗梦瑞',
            v4: '宗梦瑞',
            v5: '宗梦瑞',
            v6: '宗梦瑞',
            v7: '宗梦瑞',
            v8: '宗梦瑞',
            v9: '宗梦瑞',
            v10: '宗梦瑞'
          },
          {
            name: '己办结',
            v1: '12',
            v2: '12',
            v3: '123',
            v4: '123',
            v5: '123',
            v6: '123',
            v7: '2',
            v8: '123',
            v9: '123',
            v10: '1234'
          },
          {
            name: '办理中',
            v1: '12',
            v2: '12',
            v3: '123',
            v4: '123',
            v5: '123',
            v6: '123',
            v7: '2',
            v8: '123',
            v9: '123',
            v10: '1234'
          },
          {
            name: '上报数',
            v1: '12',
            v2: '12',
            v3: '123',
            v4: '123',
            v5: '123',
            v6: '123',
            v7: '2',
            v8: '123',
            v9: '123',
            v10: '1234'
          },
          {
            name: '联系TA',
            v1: '联系TA',
            v2: '联系TA',
            v3: '联系TA',
            v4: '联系TA',
            v5: '联系TA',
            v6: '联系TA',
            v7: '联系TA',
            v8: '联系TA',
            v9: '联系TA',
            v10: '联系TA'
          }
        ],
        chartConfig1: {
          legend: {
            textStyle: {
              color: "#fff"
            }
          },
          grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            top: '40px',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0, 102, 154, 0.65)',
            borderColor: 'rgba(0, 102, 154, 0.65)',
            textStyle: { color: '#fff' },
            axisPointer: { type: 'cross' }
          },
          color: ['#33CCCC', '#DBB36E'],
          xAxis: {
            type: "category",
            axisTick: {show: false},
            axisLine: { lineStyle: { color: 'rgba(179, 223, 255, 0.4)' } },
            axisLabel: {color: '#8FABBF', fontSize: 12}
          },
          yAxis: {
            nameGap: 23,
            minInterval: 1,
            splitLine: { lineStyle: { color: 'rgba(108, 128, 151, 0.3)', type: 'dashed' } },
            axisLabel: {color: '#8FABBF', fontSize: 12},
            axisPointer: { snap: true }
          },
          series: [
            {
              name: '警格上报',
              type: 'bar',
              barWidth: '15',
              stack: 'one'
            },
            {
              name: '居民上报',
              barWidth: '15',
              type: 'bar',
              stack: 'one'
            }
          ]
        },
        chartConfig2: {
          legend: {
            itemWidth: 16,
            itemGap: 4,
            textStyle: {
              color: "#fff",
              fontSize: '12'
            },
            icon: 'roundRect'
          },
          grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            top: '40px',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0, 102, 154, 0.65)',
            borderColor: 'rgba(0, 102, 154, 0.65)',
            textStyle: { color: '#fff' },
            axisPointer: { type: 'cross' }
          },
          color: ['#33CCCC', '#2C97E8','#BFEAFF', '#DBB36E'],
          xAxis: {
            type: "category",
            axisTick: {show: false},
            axisLine: { lineStyle: { color: 'rgba(179, 223, 255, 0.4)' } },
            axisLabel: {color: '#8FABBF', fontSize: 12}
          },
          yAxis: {
            nameGap: 23,
            minInterval: 1,
            splitLine: { lineStyle: { color: 'rgba(108, 128, 151, 0.3)', type: 'dashed' } },
            axisLabel: {color: '#8FABBF', fontSize: 12},
            axisPointer: { snap: true }
          },
          daemon: (color) => ({
            showSymbol: false,
            smooth: true,
            lineStyle: {
              shadowBlur: 4,
              shadowOffsetY: 2,
              width: 2
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                x2: 0,
                y: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: this.Hex2RGBA(color, 0.3) },
                  { offset: 1, color: this.Hex2RGBA(color, 0.1) }
                ]
              }
            }
          })
        },
        bbTableData: [
          {
            name: '时间',
            v: '04/18',
            v1: '04/18',
            v2: '04/18',
            v3: '04/18',
            v4: '04/18',
            v5: '04/18'
          },
          {
            name: '姓名',
            v: '宗梦瑞',
            v1: '宗梦瑞',
            v2: '宗梦瑞',
            v3: '宗梦瑞',
            v4: '宗梦瑞',
            v5: '宗梦瑞'
          },
          {
            name: '事件名称',
            v: '户籍办理',
            v1: '户籍办理',
            v2: '户籍办理',
            v3: '户籍办理',
            v4: '户籍办理',
            v5: '户籍办理'
          }
        ],
        blConfig: [{
          color: '#d0e1e8',
          align: '',
          width: '',
          fontSize: '14px',
          flex: ''
        }, {
          color: '#d0e1e8',
          align: 'left',
          width: '',
          fontSize: '14px',
          flex: ''
        }, {
            color: '#d0e1e8',
            align: 'right',
            fontSize: '14px',
            flex: ''
          }
        ],
        chartData3: [
          {
            "name": "人员聚集",
            "已办理": 223,
            "待处理": 23,
            "处理中": 223,
            "已拒绝": 23
          },
          {
            "name": "非法饲养动物",
            "已办理": 223,
            "待处理": 23,
            "处理中": 223,
            "已拒绝": 23
          },
          {
            "name": "婚姻家庭纠纷",
            "已办理": 223,
            "待处理": 23,
            "处理中": 223,
            "已拒绝": 23
          },
          {
            "name": "道路安全",
            "已办理": 223,
            "待处理": 23,
            "处理中": 223,
            "已拒绝": 23
          },
          {
            "name": "其他",
            "已办理": 223,
            "待处理": 23,
            "处理中": 223,
            "已拒绝": 23
          }
        ] ,
        chartConfig3: {
          xAxis: {
            type: "category",
            axisTick: {show: false},
            axisLine: {show: false},
            axisLabel: {color: '#8FABBF', fontSize: 12}
          },
          grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            top: '40px',
            containLabel: true
          },
          legend: {
            textStyle: {
              color: "#fff"
            }
          },
          yAxis: {
            nameGap: 23,
            minInterval: 1,
            splitLine: { lineStyle: { color: 'rgba(255,255,255,.2)', type: 'dashed' } },
            axisPointer: { show: false },
            axisLabel: {color: '#8FABBF', fontSize: 12}
          },
          axisPointer: {
            type: 'shadow',
            triggerTooltip: false,
            shadowStyle: { color: 'rgba(46, 153, 255, .2)' }
          },
          color: [
            {
              type: 'linear',
              x: 0,
              x2: 0,
              y: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(51, 204, 204, 1)' },
                { offset: 1, color: 'rgba(31, 89, 89, 0.25)' }
              ]
            },
            {
              type: 'linear',
              x: 0,
              x2: 0,
              y: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(44, 151, 232, 1)' },
                { offset: 1, color: 'rgba(21, 154, 255, 0)' }
              ]
            },
            {
              type: 'linear',
              x: 0,
              x2: 0,
              y: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(191, 234, 255, 1)' },
                { offset: 1, color: 'rgba(191, 234, 255, 0.1)' }
              ]
            },
            {
              type: 'linear',
              x: 0,
              x2: 0,
              y: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(219, 179, 110, 1)' },
                { offset: 1, color: 'rgba(219, 179, 110, 0.1)' }
              ]
            }
          ],
          daemon: {
            type: 'bar',
            barWidth: 14,
            barCategoryGap: 40,
            itemStyle: {}
          }
        },
        eventTableData: [
          {
            name: '时间',
            v1: '04/18',
            v2: '02/18',
            v3: '04/18',
            v4: '04/18',
            v5: '04/18',
            v6: '04/18',
            v7: '04/18',
            v8: '04/18',
            v9: '04/18',
            v10: '04/18'
          },
          {
            name: '事件内容',
            v1: '咨询如何报考摩托车驾驶咨询如',
            v2: '咨询如何报考摩托车驾驶咨询如',
            v3: '咨询如何报考摩托车驾驶咨询如',
            v4: '咨询如何报考摩托车驾驶咨询如',
            v5: '咨询如何报考摩托车驾驶咨询如',
            v6: '咨询如何报考摩托车驾驶咨询如',
            v7: '咨询如何报考摩托车驾驶咨询如',
            v8: '咨询如何报考摩托车驾驶咨询如咨询如何报考摩托车驾驶咨询如',
            v9: '咨询如何报考摩托车驾驶咨询如',
            v10: '咨询如何报考摩托车驾驶咨询如'
          },
          {
            name: '状态',
            v1: '已办理',
            v2: '已办理',
            v3: '已办理',
            v4: '已办理',
            v5: '处理中',
            v6: '已拒绝',
            v7: '处理中',
            v8: '待处理',
            v9: '处理中',
            v10: '处理中'
          },
          {
            name: '查看',
            v1: '详情>>',
            v2: '详情>>',
            v3: '详情>>',
            v4: '详情>>',
            v5: '详情>>',
            v6: '详情>>',
            v7: '详情>>',
            v8: '详情>>',
            v9: '详情>>',
            v10: '详情>>'
          }
        ]
      }
    },

    computed: {
      tableConfig () {
        return this.tableData.map((v, index) => {
          if (index === 4) {
            return {
              color: '#d0e1e8',
              align: 'center',
              width: '',
              fontSize: '12px',
              flex: '',
              render: (h, params) => {
                return h(
                  'p', {
                    style: {
                      width: '52px',
                      height: '22px',
                      textAlign: 'center',
                      lineHeight: '22px',
                      color: '#D4F2FF',
                      cursor: 'pointer',
                      margin: '0 auto',
                      borderRadius: '4px',
                      backgroundImage: 'linear-gradient(175deg, #02bcee99 0%, #0144d899 100%)'
                    },
                    on: {
                      click: e => {
                        console.log(params)
                      }
                    },
                  }, params.column
                )
              }
            }
          }
          return {
            color: '#d0e1e8',
            align: '',
            width: index === 0 ? '100' : '',
            fontSize: '14px',
            flex: ''
          }
        })
      },

      eventTableConfig () {
        return [
          {
            color: '#d0e1e8',
            align: '',
            width: '',
            fontSize: '14px',
            flex: ''
          },
          {
            color: '#d0e1e8',
            align: 'left',
            width: '250',
            fontSize: '14px',
            flex: ''
          },
          {
            color: '#d0e1e8',
            align: 'center',
            width: '',
            fontSize: '14px',
            flex: '',
            render: (h, params) => {
              return h(
                'i', {
                  style: {
                    width: '52px',
                    height: '20px',
                    textAlgin: 'center',
                    lineHeight: '20px',
                    color: '#07B794',
                    margin: '0 auto',
                    borderRadius: '2px',
                    background: 'rgba(19, 246, 201, 0.14)',
                  }
                }, params.column
              )
            }
          },
          {
            color: '#00AAFF',
            align: '',
            width: '',
            fontSize: '14px',
            flex: '',
            click: e => {
              console.log(e)
            }
          }
        ]
      }
    },

    methods: {
      Hex2RGBA(color, alpha = 1) {
        let hex = 0;
        if (color.charAt(0) == "#") {
          if (color.length == 4) {
            //检测诸如#FFF简写格式
            color = "#" + color.charAt(1).repeat(2) +
                color.charAt(2).repeat(2) +
                color.charAt(3).repeat(2);
          }
          hex = parseInt(color.slice(1), 16);
        }
        let r = hex >> 16 & 0xFF;
        let g = hex >> 8 & 0xFF;
        let b = hex & 0xFF;
        return `rgba(${r},${g},${b},${alpha})`;
      },
      RGBtoHex(r, g, b) {
        let hex = r << 16 | g << 8 | b;
        return "#" + hex.toString(16);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .AppQxnDv {
    display: flex;
    height: 100%;
    padding-top: 16px;
    box-sizing: border-box;
    background: #0c0c0c;
    overflow: hidden;

    .wrapper {
      margin-bottom: 12px;
    }

    .AppQxnDv-title {
      display: flex;
      position: relative;
      align-items: center;
      justify-content: space-between;
      height: 30px;
      line-height: 30px;
      color: rgba(172, 201, 230, 0.8);
      background-image: linear-gradient(270deg, rgba(31, 67, 102, 0) 0%, rgba(31, 67, 102, 0.25) 100%);

      & > div {
        display: flex;
        align-items: center;

        &:first-child {
          h2:first-child {
            &::after {
              position: absolute;
              bottom: 0;
              left: 27px;
              z-index: 1;
              width: 9px;
              height: 2px;
              background: rgba(41, 77, 102, 1);
              content: ' ';
            }
          }
        }
      }

      & > h2 {
        &::after {
          position: absolute;
          bottom: 0;
          left: 27px;
          z-index: 1;
          width: 9px;
          height: 2px;
          background: rgba(41, 77, 102, 1);
          content: ' ';
        }
      }


    .AppQxnDv-title__tab {
        h2 {
          cursor: pointer;
        }

        h2.active {
          color: #fff;
          font-size: 16px;
        }
      }
      h2 {
        position: relative;
        font-size: 16px;
        font-weight: 500;
        padding: 0 10px;
      }

      &::after {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
        width: 9px;
        height: 2px;
        background: #5299CC;
        content: ' ';
      }

      &::before {
        position: absolute;
        bottom: 0;
        left: 14px;
        z-index: 1;
        width: 9px;
        height: 2px;
        background: rgba(41, 77, 102, 1);
        content: ' ';
      }
    }

    .AppQxnDv-total {
      display: flex;
      align-items: center;
      margin-bottom: 16px;

      .item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        flex: 1;

        h2 {
          margin-bottom: 10px;
          font-size: 14px;
          font-weight: 500;
          color: #FFFFFF;
        }

        .item-bottom {
          display: flex;
          align-items: baseline;

          span {
            font-weight: 700;
            font-size: 18px;
            color: #02FEFF;
          }

          i {
            margin-left: 4px;
            font-style: normal;
            color: rgba(255, 255, 255, 0.5);
            font-size: 12px;
          }
        }
      }
    }

    :deep(.el-select) {
      height: 24px;
      line-height: 24px;

      input {
        width: 100%;
        height: 24px;
        line-height: 24px;
        padding: 0 26px 0 6px;
        font-size: 12px;
        color: rgba(179, 229, 229, 1);
        border: 1px solid #2A7A92;
        border-radius: 2px;
        background: transparent;

        &::placeholder {
          color: rgba(179, 229, 229, 0.6);
        }
      }

      .el-input__suffix {
        right: 1px;
        top: 0px;
      }

      i {
        color: #B3E5E5;
      }
    }

    :deep(.el-input) {
      height: 24px;
      line-height: 24px;

      input {
        width: 100%;
        height: 24px;
        line-height: 24px;
        padding: 0 6px;
        font-size: 12px;
        color: rgba(179, 229, 229, 1);
        border: 1px solid #2A7A92;
        border-radius: 2px;
        background: transparent;

        &::placeholder {
          color: rgba(179, 229, 229, 0.6);
        }
      }

      .el-input-group__append {
        padding: 0 16px;
        background: #007994;
        border: none;
        border-radius: 0 2px 2px 0;
      }

      .el-input__suffix {
        right: 1px;
        top: 0px;
      }

      i {
        color: #B3E5E5;
      }
    }

    ::-webkit-scrollbar {
      width: 5px;
      height: 14px;
    }

    ::-webkit-scrollbar-corner {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      min-height: 20px;
      background-clip: content-box;
      box-shadow: 0 0 0 5px rgba(116, 148, 170, 0.5) inset;
    }

    ::-webkit-scrollbar-track {
      box-shadow: 1px 1px 5px rgba(116, 148, 170, 0.5) inset;
    }

    * {
      box-sizing: border-box;
    }

    & > .right {
      display: flex;
      flex: 1;

      .right-left {
        width: 530px;

        .right-left__middle {
          display: flex;

          .left {
            width: 245px;
            margin-right: 12px;
          }

          .right {
            flex: 1;
          }
        }

        .right-left__top {
          display: flex;

          div {
            flex: 1;

            &:first-child {
              margin-right: 12px;
            }
          }
        }
      }
      .right-middle {
        width: 556px;
        margin: 0 40px;

        .right-middle__middle {
          display: flex;
          justify-content: space-between;
          margin-bottom: 16px;
        }
      }

      .right-right {
        display: flex;
        flex-direction: column;
        flex: 1;
      }
    }

    & > .left {
      display: flex;
      align-items: center;
      flex-direction: column;
      width: 240px;
      margin-right: 20px;

      .left-list {
        flex: 1;
        overflow-y: auto;
        width: 100%;

        .left-item {
          position: relative;
          width: 100%;
          margin-bottom: 10px;
          padding: 30px 14px 14px;
          background-image: linear-gradient(0deg, rgba(40, 182, 253, 0.08) 1%, rgba(0, 102, 154, 0.65) 100%);
          border-radius: 6px;

          i {
            position: absolute;
            left: 0;
            top: 0;
            width: 22px;
            height: 21px;
            line-height: 21px;
            text-align: center;
            font-weight: 600;
            font-style: normal;
            font-size: 14px;
            color: #FFFFFF;
            background-image: linear-gradient(177deg, #02eeee66 0%, #0190d866 100%);
            border-radius: 6px 0 6px 0;
          }

          .left-item__bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;

            span {
              color: #fff;
              font-weight: 600;
              font-size: 12px;
            }
          }

          .left-item__top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;

            .el-select {
              width: 100px;
            }

            h2 {
              font-weight: 600;
              font-size: 14px;
              color: #FFFFFF;
            }
          }
        }
      }
    }
  }
</style>
