<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-08-25 08:59:04
-->
<template>
  <div class="djlx">
    <div class="inquire">
      <el-form :model="queryForm" ref="queryForm" label-width="100px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="开始时间" class="width100">
              <el-date-picker
                v-model="queryForm.kssj"
                class="width100"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="结束时间" class="width100">
              <el-date-picker
                v-model="queryForm.kssj"
                class="width100"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="区域" class="width100">
              <el-select
                v-model="queryForm.qy"
                class="width100"
                clearable
                placeholder="请选择权利类型"
              >
                <el-option
                  v-for="item in dictData['A8']"
                  :key="item.dcode"
                  :label="item.dname"
                  :value="item.dcode"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5" class="btnColRight">
            <el-form-item>
              <el-button
                type="primary"
                native-type="submit"
                @click="handleSearch"
                >查询</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="concent">
      <div class="left">
        <el-table
          height="187"
          stripe
          :data="tableList"
          size="mini"
          border
          header-cell-class-name="table-header-gray"
        >
          <el-table-column
            label="类型"
            prop="name"
            minWidth="100"
            align="center" />
          <el-table-column
            label="数量"
            prop="agent"
            minWidth="120"
            align="center"
        /></el-table>
      </div>
      <div class="right">
        <div ref="chart" style="width: 100%; height: 200px"></div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { mapGetters } from "vuex";
  export default {
    components: {},
      computed: {
    ...mapGetters(["dictData", "transfer"]),
  },
    data () {
 return {
      queryForm: {},
      tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23],
    };
    },
      mounted() {
    // 创建一个 ECharts 实例
    this.chart = echarts.init(this.$refs.chart);
    // 在 ECharts 实例中配置图表
    this.chart.setOption(this.getOption());
  },
      methods: {
    getOption() {
      return {

        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        series: [
          {
            name: "饼图名称",
            type: "pie",
            radius: ["20%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 335, name: "数据1" },
              { value: 310, name: "数据2" },
              { value: 234, name: "数据3" },
              { value: 135, name: "数据4" },
              { value: 1548, name: "数据5" },
            ],
          },
        ],
      };
    },

    handleSearch() {},
  },
};
</script>
<style scoped lang="scss">
/deep/.el-card__header {
  padding: 8px 10px;
}

/deep/.el-card__body {
  padding: 3px 10px 5px 10px;
  overflow: hidden;
}
.yhjgba {
  .el-col {
    padding: 4px;
  }
  .inquire {
    width: 100%;
    height: 40px;
    border: 1px solid rgb(184, 217, 243);
    // background-color: rebeccapurple;
  }
  .concent {
    width: 100%;
    height: 300px;
    display: flex;
    .left {
      width: 70%;
      height: 200px;
    }
    .right {
      width: 30%;
      height: 200px;
    }
  }
}
</style>