diantou/src_product/iam/law/statistics/law-ssdwstatistics-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="12">
            <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="12">
            <a-form-model-item label="统计单位" prop="Org">
              <sd-group-picker v-model="form.Org" :read-only="false" :single="true" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24" :pull="3">
            <a-form-model-item label="案件类型" prop="caseType">
              <a-checkbox-group v-model="form.caseType">
                <a-checkbox
                  v-for="item in caseTypeOptions"
                  :key="item.value"
                  :value="item.value"
                  :disabled="item.disabled"
                  @change="typeChange"
                >
                  {{ item.label }}
                </a-checkbox>
              </a-checkbox-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <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(this.onepie.series[0].data) !== '[]'">
        <div>
          <sd-echart :options="onepie" autoresize :class="$style.onepieClass" />
        </div>
      </template>
      <template v-else-if="JSON.stringify(this.onepie.series[0].data) === '[]' && !flag">
        <div :class="$style.emptyecharts"> </div>
      </template>
    </a-card>
  </div>
</template>

<script>
import 'echarts/lib/chart/pie'
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 SdSelect from '@/common/components/sd-select.vue'
import moment from 'moment'
import LawService from '../law-service'
import components from './_import-components/law-casestatistics-form-import'

export default {
  name: 'LawSsdwtatisticsForm',
  metaInfo: {
    title: '诉讼地位统计',
  },
  components: {
    ...components,
    // SdSelect,
  },
  data() {
    return {
      rules: {
        // timeRange: [{ required: true, message: '请选择年度', trigger: 'change' }],
        // Org: [{ required: true, message: '请选择审计机构', trigger: 'change' }],
        // caseType: [{ required: true, message: '请选择案件类型', trigger: 'change' }],
      },
      tableKey: 0,
      ipagination: {
        current: 1,
        pageSize: 10,
      },
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 },
      },
      startYear: null,
      endYear: null,
      form: {
        timeRange: [],
        Org: [],
        caseType: [],
      },
      onepie: {
        color: ['#194f97', '#555555'],
        textStyle: {
          color: '#939393',
          fontSize: 13,
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          x: 'right',
          y: 'center',
          // right: '0px',
          icon: 'circle',
          align: 'left',
          // itemWidth: '800px',
          // top: 50,
          textStyle: {
            color: '#939393',
            lineHeight: 18,
          },
        },
        series: [
          {
            type: 'pie',
            left: '100px',
            top: 15,
            radius: [60, 90],
            data: [],
            avoidLabelOverlap: true,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
            label: {
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              padding: [0, 0],
              formatter: '{b}\n',
            },
            labelLine: {
              length2: '70px',
            },
          },
        ],
        toolbox: {
          feature: {
            // magicType: { show: true, type: ['line', 'bar'] },
            restore: { title: '刷新', show: true },
            saveAsImage: { show: true, name: '诉讼地位统计图' },
          },
        },
      },
      params: {
        startYear: '',
        endYear: '',
        Org: [],
        caseType: [],
      }, // 查询条件
      flag: true,
      rootNode: {},
      caseTypeOptions: [],
    }
  },
  created() {
    // const params = {
    //   buttonExpressions: [],
    //   columns: 'id,name,code,sortNum,status,valueDesc',
    //   expressions: [
    //     {
    //       dataType: 'str',
    //       name: 'keyId',
    //       op: 'eq',
    //       stringValue: '272818597314232320',
    //     },
    //   ],
    //   formId: 'weAppDictValue',
    //   maxResults: 10,
    //   startPosition: 0,
    // }
    LawService.getdict('272818597314232320').then((res) => {
      const dict = [
        {
          label: '全部',
          value: 'all',
          onChange: this.typeChange,
        },
      ]
      res.data.forEach((d) => {
        dict.push({
          label: d.label,
          value: d.value,
          disabled: false,
        })
      })
      this.caseTypeOptions = [...dict]
    })
  },
  methods: {
    // 复选框变化时
    typeChange(e) {
      if (e.target.value === 'all') {
        this.caseTypeOptions.forEach((item) => {
          if (item.value !== 'all') {
            item.disabled = e.target.checked
          }
        })
        if (e.target.checked) {
          this.caseTypeOptions.forEach((item) => {
            if (item.value !== 'all' && !this.form.caseType.includes(item.value)) {
              this.form.caseType.push(item.value)
            }
          })
        } else {
          this.$nextTick().then(() => {
            this.form.caseType = []
          })
        }
      } else {
      }
    },
    submitForm() {
      this.flag = false
      this.$refs.advancedSearchForm.validate((valid, values) => {
        if (valid) {
          const type = []
          this.form.caseType.forEach((t) => {
            if (t !== 'all') {
              type.push(t)
            }
          })
          const unitIds = []
          this.form.Org.forEach((o) => {
            unitIds.push(o.code)
          })
          const params = {
            type: 'ownerPosition', // 定值
            startTime: new Date(this.form.timeRange[0]).getTime(),
            endTime: new Date(this.form.timeRange[1]).getTime(),
            orgIds: unitIds,
            caseTypes: type,
          }
          this.onepie.series[0].data = []
          LawService.getSsdwStatistics(params).then((res) => {
            res.data.forEach((d) => {
              if (d.ownerPosition !== '') {
                this.onepie.series[0].data.push({
                  value: d.count,
                  name: d.ownerPositionName,
                  tooltip: {},
                })
              }
            })
          })
        }
      })
    },
    resetForm() {
      this.startYear = null
      this.endYear = null
      this.form = {
        timeRange: [],
        Org: [],
        caseType: [],
      }
    },
    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;
}
.onepieClass {
  width: 90%;
  height: 400px;
  // margin: auto auto;
  text-align: center;
  padding-right: 100px;
}
.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>