diantou/src_product/iam/law/statistics/law-casestatistics-form.vue

<template>
  <div :class="$style.searchdiv">
    <a-card :class="$style.searchWrap">
      <a-form-model
        ref="advancedSearchForm"
        layout="horizontal"
        :model="form"
        v-bind="formItemLayout"
        :rules="rules"
      >
        <a-row>
          <a-col :span="8">
            <a-form-model-item label="统计日期" prop="timeRange">
              <a-range-picker v-model="form.timeRange" :time-range.sync="form.timeRange" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="统计单位" prop="Org">
              <sd-group-picker v-model="form.Org" :read-only="false" :single="false" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <div class="reportbuttonContent">
              <a-button @click="resetForm">重置</a-button>
              <a-button
                style="margin: 0 5px 10px"
                type="primary"
                html-type="submit"
                @click="submitForm"
                >查询</a-button
              >
              <a-button type="primary" @click="exportForm">导出</a-button>
            </div>
          </a-col>
        </a-row>
      </a-form-model>
    </a-card>
    <a-card class="reporttablecardxm">
      <span class="header_sd-header_common"
        ><span :class="['toptitle', $style.toptitle]">案件数额统计</span></span
      >
      <template v-if="JSON.stringify(chartData.xAxis.data) !== '[]'">
        <div><sd-echart :class="$style.echarts" :options="chartData" autoresize /></div>
      </template>
      <template v-else-if="JSON.stringify(chartData.xAxis.data) === '[]' && !flag">
        <div :class="$style.emptyecharts"> </div>
      </template>
    </a-card>
  </div>
</template>

<script>
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/toolbox'
import moment from 'moment'
import lawService from '../law-service'
import components from './_import-components/law-casestatistics-form-import'

export default {
  name: 'LawCasestatisticsForm',
  metaInfo: {
    title: '案件数额统计',
  },
  components: {
    ...components,
  },
  data() {
    return {
      rules: {
        // timeRange: [{ required: true, message: '请选择年度', trigger: 'change' }],
        // Org: [{ required: true, message: '请选择审计机构', trigger: 'change' }],
      },
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 },
      },
      startYear: null,
      endYear: null,
      form: {
        timeRange: [],
        Org: [],
      },
      // columns: [],
      chartData: {
        title: {
          left: 'center',
          text: null,
        },
        tooltip: {},
        legend: {
          show: true,
          // orient: 'vertical',
          // x: 'right',
          // y: 'center',
          data: [{ name: '案件数量' }, { name: '案件金额' }],
          align: 'left',
          textStyle: {
            color: '#939393',
            lineHeight: 18,
          },
          itemWidth: 10,
        },
        grid: {},
        xAxis: {
          type: 'category',
          data: [],
        },
        yAxis: [
          {
            type: 'value',
            name: '案件数量',
            show: true,
            interVal: 1,
          },
          {
            type: 'value',
            name: '案件金额',
            min: 0,
            interVal: 1000,
            show: true,
          },
        ],
        series: [],
        toolbox: {
          feature: {
            // magicType: { show: true, type: ['line', 'bar'] },
            restore: { title: '刷新', show: true },
            saveAsImage: { show: true, name: '案件数额统计图' },
          },
        },
      },
      params: {
        startYear: '',
        endYear: '',
        Org: [],
      }, // 查询条件
      flag: true,
    }
  },
  created() {},
  methods: {
    submitForm() {
      this.flag = false
      // this.$refs.advancedSearchForm.validate((valid, values) => {
      //   if (valid) {
      let unitIds = ''
      if (this.form.Org) {
        this.form.Org.forEach((o) => {
          unitIds = unitIds + o.code + ','
        })
      }
      if (unitIds !== '') unitIds = unitIds.substring(0, unitIds.length - 1)
      const params = {}
      if (this.form.timeRange) {
        if (this.form.timeRange.length > 2) {
          params.startDate = moment(this.form.timeRange[0]).format('YYYY-MM-DD')
          params.endDate = moment(this.form.timeRange[1]).format('YYYY-MM-DD')
        } else {
          if (this.form.timeRange[0])
            params.startDate = moment(this.form.timeRange[0]).format('YYYY-MM-DD')
          if (this.form.timeRange[1])
            params.endDate = moment(this.form.timeRange[1]).format('YYYY-MM-DD')
        }
      }
      if (unitIds !== '') params.unitIds = unitIds

      const chartDatasd = []
      const chartDatasj = []
      this.chartData.xAxis.data = []
      lawService.getCaseStatistics(params).then((res) => {
        res.data.forEach((d) => {
          this.chartData.xAxis.data.push(d.caseTypeName)
          chartDatasd.push(d.count)
          chartDatasj.push(d.caseAmount)
        })
        this.chartData.series = [
          {
            name: '案件数量',
            data: chartDatasd,
            type: 'bar',
            barWidth: '40px',
            itemStyle: {
              color: '#64ede6',
            },
          },
          {
            name: '案件金额',
            data: chartDatasj,
            yAxisIndex: 1,
            type: 'line',
            lineStyle: {
              color: '#3366ff', // 颜色生效
            },
          },
        ]
        // this.chartData.legend.data = [{},{}]
      })
      //   }
      // })
    },
    resetForm() {
      this.startYear = null
      this.endYear = null
      this.form = {
        timeRange: [],
        Org: [],
      }
    },
    exportForm() {
      // 获取画布信息
      const canvas = document.getElementsByTagName('canvas')
      if (canvas && canvas.length > 0) {
        // 创建标签
        const tempA = document.createElement('a')
        // 设置下载名称
        tempA.download = '案件数额统计图' + '.png'
        // 设置地址以及文件类型
        tempA.href = canvas[0].toDataURL('image/png')
        document.body.appendChild(tempA)
        // 触发下载事件
        tempA.click()
        // 移除标签
        tempA.remove()
      }
    },
    chartClick(evtArgs) {
      const seriesId = JSON.parse(evtArgs.seriesId)

      const param = {
        planYear: evtArgs.name,
        unitNames: "'" + seriesId.NAME + "'",
        auditType: seriesId.TYPE,
        amount: '1',
      }

      const url =
        '#/audit-annualplancompletion-project-list?params=' +
        encodeURIComponent(JSON.stringify(param)) +
        '&type=projecttrends'
      window.open(url)
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.emptyecharts {
  width: 600px;
  height: 400px;
  margin: auto auto;
  text-align: center;
  &::after {
    content: '无数据';
    padding-top: 150px;
    display: block;
  }
}
.echarts {
  width: 100%;
  height: 400px;
  margin: auto auto;
  text-align: center;
}
.toptitle {
  color: #404040;
  font-weight: bold;
  font-size: 22px;
  margin-left: calc(50% - 150px);
}

.search-wrap {
  margin-bottom: $padding-lg;
  :global(.ant-advanced-search-form) {
    padding: 0;
    background: transparent;
    border: none;
  }
  :global .ant-divider-horizontal {
    margin: 10px 0;
  }
}
.searchdiv {
  height: 100%;
  :global(.sd-has-table.ant-card) {
    min-height: calc(100vh - 270px);
  }
  :global(.reporttablecardxm) {
    :global(.ant-table-body) {
      height: auto !important;
      overflow: auto;
      min-height: auto !important;
    }
  }
  :global(.ant-table-placeholder) {
    height: auto !important;
  }
}
</style>