diantou/src_product/iam/audit/portrait/audit-manage-model.vue

<template>
  <a-card ref="allHeight" :class="$style.financial">
    <!-- 组织机构筛选 -->
    <!-- 报告类型 年报月报，如果是年报则年筛选器 否则月-->
    <!-- 时间筛选 -->
    <a-form-model ref="search" :model="searchForm" v-bind="formItemLayout" :class="$style.form">
      <a-row>
        <a-col :span="6">
          <a-form-model-item label="组织机构">
            <!-- <audit-company-select
              ref="cRelSelect"
              v-model="orgList"
              :read-only="false"
              :single="true"
              @change="changecompany"
            /> -->
            <SdGroupPicker
              ref="cRelSelect"
              :key="orgKeys"
              v-model="orgList"
              :read-only="false"
              :root-node="userNodeTree"
              :single="true"
              @change="changecompany"
            />
          </a-form-model-item>
        </a-col>

        <a-col :span="6">
          <a-form-model-item label="年份">
            <AuditYearTime v-model="searchForm.year" />
          </a-form-model-item>
        </a-col>
        <!-- 指标选择 -->
        <a-col :span="6">
          <a-form-model-item label="指标选择">
            <a-select
              ref="zb"
              v-model="targetKeysList"
              mode="multiple"
              :open="false"
              :max-tag-count="3"
              @change="selectZbChange"
              @focus="focusZb"
            >
              <template slot="maxTagPlaceholder">
                ...
              </template>
              <a-select-option v-for="(item, i) in mockData" :key="i" :value="item.key">
                {{ item.title }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>

        <!-- 搜索重置 -->
        <a-col :span="6">
          <a-form-model-item>
            <a-button style="margin-left: 15px" type="primary" @click="handlerSearch">
              搜索
            </a-button>
            <a-button style="margin-left: 10px" @click="resetSearch">
              重置
            </a-button>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row> </a-row>
    </a-form-model>
    <div :class="$style.tableContent">
      <div :class="$style.titleContent">
        <span>数据来源：{{ manageType }}报表</span>
        <span>{{ nowYear }}更新</span>
      </div>

      <vxe-table
        ref="xTable"
        :key="tableKey"
        border
        :loading="tableLoading"
        :column-config="{ resizable: true }"
        :data="tableData"
        align="center"
        :height="tableHeight"
        :tree-config="{}"
      >
        <!-- <vxe-column field="name" title="Name"></vxe-column> -->
        <template v-for="(item, i) in columns">
          <!-- 如果有children 则显示colgroup -->
          <vxe-colgroup
            v-if="item?.children?.length > 0"
            :key="i"
            :title="item.title"
            :field="item.dataIndex"
            align="center"
            :fixed="fixedType(i)"
          >
            <template v-for="(item1, i1) in item.children">
              <!-- 如果有children 则显示colgroup -->
              <vxe-colgroup
                v-if="item1?.children?.length > 0"
                :key="i1"
                :title="item1.title"
                :field="item1.dataIndex"
                align="center"
              >
                <template v-for="(item2, i2) in item1.children">
                  <vxe-column
                    :key="i2"
                    :tree-node="i2 === 0 && i1 === 0 && i === 0"
                    :field="item2.dataIndex"
                    :title="item2.title"
                    align="center"
                    min-width="180"
                  >
                    <!-- 如果大于9则赋予宽度 -->
                  </vxe-column>
                </template>
              </vxe-colgroup>
              <vxe-column
                v-else
                :key="i1"
                :field="item1.dataIndex"
                :title="item1.title"
                align="center"
                width="180px"
              >
                <template v-if="item1.title === '操作'" v-slot="{ row }">
                  <!-- 隐藏，可视化，对比 -->
                  <a :style="{ color: '#1890ff', cursor: 'pointer' }" @click="onUnShow(row)">
                    隐藏
                  </a>
                  <a
                    :style="{ color: '#1890ff', cursor: 'pointer', marginLeft: '10px' }"
                    @click="showEcharts(row)"
                  >
                    可视化
                  </a>
                  <!-- 对比 -->
                  <a
                    :style="{ color: '#1890ff', cursor: 'pointer', marginLeft: '10px' }"
                    @click="onDiffFinancial(row)"
                  >
                    对比
                  </a>
                </template>
              </vxe-column>
            </template>
          </vxe-colgroup>
          <vxe-column
            v-else
            :key="i"
            :field="item.dataIndex"
            :title="item.title"
            align="center"
            width="180px"
          >
          </vxe-column>
        </template>
      </vxe-table>
    </div>
    <a-modal v-model="echartsShow" :title="manageType">
      <div :class="$style.modalBody">
        <div :class="$style.echartsUtil">
          <div :class="$style.echartsType">
            <a-icon
              type="bar-chart"
              :style="{
                fontSize: '26px',
                color: action === 1 ? '#1890ff' : '',
                marginRight: '10px',
              }"
              @click="onTypeChange(1)"
            />
            <a-icon
              type="line-chart"
              :style="{ fontSize: '26px', color: action === 2 ? '#1890ff' : '' }"
              @click="onTypeChange(2)"
            />
          </div>
          <div :class="$style.echartsContent">
            <div id="echartsContent" :class="$style.content"></div>
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 差选报表选择 -->
    <a-modal v-model="visibleGs" title="公司选择" @ok="gsOk">
      <!-- 单选 -->
      <sd-table
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
          type: 'radio',
        }"
        :row-key="(record, i) => i"
        :columns="columnsGs"
        :data-source="tableDataGs"
      />
    </a-modal>
    <!-- 指标选择 使用穿梭框 -->
    <a-modal v-model="visibleZb" title="指标选择" @ok="zbOk">
      <a-transfer
        :data-source="mockData"
        :list-style="{
          width: '400px',
          height: '500px',
        }"
        :target-keys="targetKeys"
        :render="(item) => item.title"
        @change="handleChangeZb"
      >
        <template
          slot="children"
          slot-scope="{ props: { direction, selectedKeys }, on: { itemSelect } }"
        >
          <a-tree
            v-if="direction === 'left'"
            block-node
            checkable
            check-strictly
            default-expand-all
            :checked-keys="[...selectedKeys, ...targetKeys]"
            :tree-data="treeData"
            @check="
              (_, props) => {
                onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect)
              }
            "
            @select="
              (_, props) => {
                onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect)
              }
            "
          />
        </template>
      </a-transfer>
    </a-modal>
  </a-card>
</template>

<script>
import components from './_import-components/audit-financial-detail-import'
import SdGroupPicker from '../report/audit-company-select.vue'
import echarts from 'echarts'
import AuditYearTime from './audit-year-time.vue'
import auditPortraitService from './audit-portrait-service'
import { message } from 'ant-design-vue'
import { getUserInfo } from '@/common/store-mixin'
import auditMaintainService from '../dataUphold/data-config'
import sdTable from '@/common/components/sd-table.vue'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
import Vue from 'vue'
Vue.use(VXETable)
function isChecked(selectedKeys, eventKey) {
  return selectedKeys.indexOf(eventKey) !== -1
}

export default {
  name: 'AuditManageModel',

  components: {
    ...components,
    SdGroupPicker,
    AuditYearTime,
    sdTable,
  },
  props: {
    manageType: {
      type: String,
      default: '财务管理',
    },
  },
  data() {
    return {
      tableKey: 1,
      tableLoading: true,
      companyUnit: [],
      searchForm: {
        // 组织机构
        orgId: '',
        orgName: '',
        onOrgCode: '',
        // 时间范围
        year: [],
        month: '',
        // 报告类型
        reportType: '1',
      },
      defaultValue: [],
      // 指标穿梭框
      showTable: true,
      visibleZb: false,
      mockData: [],
      treeData: [],
      targetKeys: [],
      // 临时存储组织机构
      targetKeysList: [],

      // 组织机构
      orgList: [],
      visibleGs: false,
      columnsGs: [
        {
          title: '公司名称',
          dataIndex: 'org_name',
        },
      ],
      tableDataGs: [],
      selectedRowKeys: [],
      selectedRows: [],
      // 报告类型 年报月报
      reportList: [
        { label: '年报', value: '1' },
        { label: '月报', value: '2' },
      ],
      formItemLayout: {
        labelCol: { span: 7 },
        wrapperCol: { span: 17 },
      },
      // 表格数据
      tableData: [],
      expandedRowKeys: [1, 3],
      columnsInit: [
        {
          children: [
            {
              children: [
                // 指标分类
                {
                  title: '指标分类',
                  dataIndex: 'zbClassName',
                  align: 'center',
                  width: '180px',
                },
                // 指标名称
                {
                  title: '指标名称',
                  dataIndex: 'zbName',
                  width: '140px',
                  // 自定义渲染 如果超长则显示tooltip
                },
              ],
            },
          ],
        },
      ],
      columns: [],
      // 显示echarts
      action: 1,
      echartsShow: false,
      myChart: null,
      // 年份 当前年份前后一百年
      allYear: Array.from({ length: 200 }, (v, k) => k + 1900).reverse(),
      // 当前时间 2024.1.11以此形式
      nowYear:
        new Date().getFullYear() + '.' + (new Date().getMonth() + 1) + '.' + new Date().getDate(),
      onRecord: {},
      userNodeTree: [],
      isJt: false,
      orgKeys: 1,
      // iamFinancialIndex
      tableHeight: 600,
    }
  },
  watch: {
    targetKeys: {
      handler(val) {
        // 置灰 和取消置灰
        this.treeData.forEach((item) => {
          item.children.forEach((item2) => {
            if (val.includes(item2.key)) {
              item2.disabled = true
            } else {
              item2.disabled = false
            }
          })
        })
      },
      deep: true,
    },
  },
  created() {
    this.initUserUnit()
    this.initUserCompany()
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = this.$refs.allHeight.$el.clientHeight - 150
    })
  },
  methods: {
    // 初始化个人公司
    initUserCompany() {
      const userInfo = getUserInfo()
      auditMaintainService.getCompany(userInfo.account).then((res) => {
        // 100000和100001
        const roleCompany = ['100000', '100001']

        this.userNodeTree.push({
          code: res.data.id,
          name: res.data.name,
          orgCode: res.data.code,

          type: 'Group',
        })
        this.companyUnit = [
          {
            code: res.data.id,
            name: res.data.name,
            orgCode: res.data.code,
          },
        ]
        if (roleCompany.includes(res.data.code)) {
          this.isJt = true
          this.userNodeTree = [
            {
              code: '28951',
              name: '国家电力投资集团有限公司',
              orgCode: '100000',
            },
          ]
          this.companyUnit = [
            {
              code: '28951',
              name: '国家电力投资集团有限公司',
              orgCode: '100000',
            },
          ]
        }
      })
    },
    selectZbChange(val) {
      this.targetKeysList = val
      this.targetKeys = val
    },
    fixedType(i) {
      if (i === 0) return 'left'
      if (this.columns.length - 1 === i) return 'right'
    },
    initUserUnit() {
      const userInfo = getUserInfo()
      const grop = ['100001', '100000']
      // 年份为当前年份和前两年
      this.searchForm.year = [2020, 2021, 2022]
      auditMaintainService.getCompany(userInfo.account).then((res) => {
        if (grop.includes(res.data.code)) this.isJt = true
        this.orgList = [
          {
            code: res.data.id,
            name: res.data.name,
            orgCode: res.data.code,
          },
        ]
        // if (this.isJt) {
        // this.orgList = [
        //   {
        //     code: 29711,
        //     name: '上海发电设备成套设计研究院有限责任公司',
        //     orgCode: '100550',
        //   },
        // ]
        // }
        this.searchForm.orgId = this.orgList[0].orgCode
        this.searchForm.orgName = this.orgList[0].name
        this.orgKeys += 1
        // this.$refs.cRelSelect.initTreeData()
        const params = {
          columns:
            'sortNumber,firstClassify,secondClassify,indexName,indexNameEn,indexMeasure,price,systemSource,remark',
          maxResults: 1000,
          startPosition: 0,
          expressions: [
            {
              dataType: 'str',
              name: 'firstClassify',
              op: 'eq',
              stringValue: this.manageType,
            },
          ],
          buttonExpressions: [],
          formId: 'iamFinancialIndex',
        }
        auditPortraitService.getBusinessList(params).then((res) => {
          const data = res.data.data.filter((item) => item.firstClassify === this.manageType)
          // 所有二级分类
          const secondClassify = Array.from(new Set(data.map((item) => item.secondClassify)))
          this.mockData = data.map((item) => ({
            key: item.indexNameEn,
            title: item.indexName,
            description: item.indexName,
          }))

          //  生成树 并且所有二级分类不可选
          this.treeData = secondClassify.map((item) => ({
            title: item,
            key: item,
            disabled: true,
            children: data
              .filter((item2) => item2.secondClassify === item)
              .map((item3) => ({
                title: item3.indexName,
                key: item3.indexNameEn,
              })),
          }))
          this.targetKeysList = this.mockData.map((item) => item.key)
          this.targetKeys = this.mockData.map((item) => item.key)
          // 如果已经选中则遍历treeData置灰
          this.targetKeysList.forEach((item) => {
            this.treeData.forEach((item2) => {
              item2.children.forEach((item3) => {
                if (item3.key === item) {
                  item3.disabled = true
                }
              })
            })
          })
          this.$nextTick(() => {
            this.initTable()
          })
        })
      })
    },
    //
    changecompany(val) {
      this.orgList = val
      if (val.length > 0) {
        this.searchForm.orgId = val[0].orgCode
        this.searchForm.orgName = val[0].name
      }
    },
    handleChangeZb(nextTargetKeys, direction, moveKeys) {
      this.targetKeys = nextTargetKeys
      // 如果是从左边到右边则取消置灰
      this.treeData.forEach((item) => {
        item.children.forEach((item2) => {
          if (moveKeys.includes(item2.key)) {
            item2.disabled = false
          }
          if (nextTargetKeys.includes(item2.key)) {
            item2.disabled = true
          }
        })
      })
    },
    onChecked(_, e, checkedKeys, itemSelect) {
      const { eventKey } = e.node
      itemSelect(eventKey, !isChecked(checkedKeys, eventKey))
    },
    handlerSearch() {
      this.initTable()

      // 请选择组织机构
      // if (this.orgList.length === 0) {
      //   message.error('请选择组织机构')
      //   return
      // }
      // if (this.searchForm.year.length === 0) {
      //   message.error('请选择年份')
      //   return
      // }
      // // todo
      // const params = { mdg_orgCode: this.searchForm.orgId }
      // // const params = { mdg_orgCode: '190848' }
      // // 190848
      // auditPortraitService.getCompanyList(params).then((res) => {
      //   this.visibleGs = true
      //   this.tableDataGs = res.data.data
      // })
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    gsOk() {
      // 确定是否选择了公司
      if (this.tableDataGs.length !== 0 && this.selectedRows.length === 0) {
        message.error('请选择公司')
        return
      }
      // 请选择年份

      this.visibleGs = false
      if (this.selectedRows.length > 0) {
        this.searchForm.onOrgCode = this.selectedRows[0].org_code || ''
      } else {
        this.searchForm.onOrgCode = ''
      }
      this.selectedRowKeys = []
      this.selectedRows = []
      this.initTable()
    },
    // 获得指标
    focusZb() {
      this.visibleZb = true
      this.$refs.zb.blur()
    },
    zbOk() {
      this.visibleZb = false
      this.searchForm.zb = this.targetKeys
      this.targetKeysList = this.targetKeys
    },
    // 重置
    resetSearch() {
      this.searchForm = {
        // 组织机构
        orgId: '',
        orgName: '',
        // 时间范围
        year: [],
        month: '',
        // 报告类型
        reportType: '1',
        onOrgCode: '',
      }
      this.orgList = []
      this.targetKeysList = []
      this.targetKeys = []
      this.showTable = true
    },
    // 替换icons
    // 展开图标
    expandIcon(props) {
      // 判断当有子级时添加图标
      if (props.record.children?.length > 0) {
        // 有数据-展开时候图标
        if (props.expanded) {
          // 这里的margin-right是为了让图标和字体有一点间距
          return (
            <span
              style='margin-right:10px;user-select:none'
              onClick={(e) => {
                props.onExpand(props.record, e)
              }}
            >
              <a-icon type='caret-down' />
            </span>
          )
          // 无数据时-关闭的图标
        } else {
          return (
            <span
              style='margin-right:10px;user-select:none'
              onClick={(e) => {
                props.onExpand(props.record, e)
              }}
            >
              <a-icon type='caret-right' />
            </span>
          )
        }
      } else {
        // 这里是为了让无图标子级的父元素也给了个margin-right，让它跟有子级的父元素在同一竖线上
        return <span style='margin-right:19px'></span>
      }
    },
    onexpand(expanded, record) {
      // this.expandedRowKeys = expanded ? [record.key] : []
      // 如果有key则删除
      if (expanded) {
        this.expandedRowKeys.push(record.key)
      } else {
        this.expandedRowKeys = this.expandedRowKeys.filter((item) => item !== record.key)
      }
    },

    initTable() {
      this.tableData = []
      this.columns = []
      this.tableLoading = true
      const params = {
        mdg_orgCode: this.searchForm.orgId,
        year: this.searchForm.year.map((item) => item + ''),
        metricNameCn: this.targetKeysList,
      }
      auditPortraitService
        .getReportList(params)
        .then((res) => {
          const allData = res.data.data
          if (allData.length === 0) {
            this.showTable = false
            return
          }
          const orColumns = allData.map((val, i) => ({
            title: val.org_name,
            align: 'center',
            children: val.index_value.map((val1, j) => ({
              // 年份
              title: val1.year,
              width: '180px',
              align: 'center',
              children: [
                // 指标值
                {
                  width: '180px',
                  align: 'center',
                  title: '指标值',
                  dataIndex: 'colValue' + val.org_code + '' + val1.year,
                },
              ],
            })),
          }))
          // 汇总所有指标分类
          // 遍历allData内所有index_value数组内对象下data内有值得，遇到优质数据则返回
          const onlyZbClass =
            allData.map((item) => item.index_value.filter((val) => val.data?.length > 0))[0][0] ||
            {}
          // todo 筛选有效数据
          let zbClassArr = onlyZbClass.data?.map((item) => item.secondClassify) || []

          // 去重
          zbClassArr = Array.from(new Set(zbClassArr))
          // 遍历数据进行分级
          const orgNameList = allData.map((item) => item.org_name)
          const tableData = zbClassArr.map((val, i) => {
            const children = onlyZbClass.data
              .filter((item) => val === item.secondClassify)
              .map((val2, j) => {
                return {
                  zbClassName: '',
                  zbName: val2.metric_name_cn,
                  zbCode: val2.metric_name,
                  orgNameList: orgNameList,
                  orgCode: val2.org_code,
                  zbDw: val2.indexMeasure,
                  key: i + '' + j,
                }
              })
            const onData = children[0] || []
            // 删除第一个
            // children.shift()
            const obj = {
              zbClassName: val,
              zbCode: onData.zbCode,
              zbName: onData.zbName,
              orgNameList: orgNameList,
              orgCode: onData.orgCode,
              key: 'zb' + i,
              zbDw: onData.zbDw,
              name: val,
              children,
            }
            // 展开的key
            return obj
          })
          this.expandedRowKeys = tableData.map((item) => item.key)
          // 遍历 allData向 tableData中添加数据
          allData.forEach((item, i) => {
            item.index_value.forEach((item2, j) => {
              tableData.forEach((item3) => {
                item3.children.forEach((item4) => {
                  const itemData2 = item2.data || []
                  itemData2.forEach((item5) => {
                    // 指标相同
                    if (item5.metric_name === item4.zbCode) {
                      // 如果指标名称最后一位是率则 小数点后两位 并且乘以100 如果是空 则是空
                      const isType = item4.zbName.includes('率')
                      let isValue = ''
                      // 如果当前值
                      // 99999.99999
                      // 88888.88888
                      // 77777.77777
                      const filterValue = ['99999.99999', '88888.88888', '77777.77777']
                      // 如果  item5.index_value 为99999.99999 88888.88888 77777.77777 则为null

                      if (isType) {
                        isValue = item5.index_value
                          ? (item5.index_value * 100).toFixed(2) || ''
                          : ''
                      } else {
                        isValue = item5.index_value ? (item5.index_value * 1).toFixed(2) || '' : ''
                      }
                      if (filterValue.includes(item5.index_value + '')) {
                        isValue = ''
                      }
                      // 如果是NaN则保留原值
                      if (isNaN(isValue)) {
                        isValue = item5.index_value
                      }

                      item4['colValue' + item.org_code + '' + item2.year] = isValue
                      item4 = JSON.parse(JSON.stringify(item4 || {}))
                    }
                  })
                })
              })
            })
          })
          // 再次遍历tableData将children首位code zbName 添加到上层 并是删除children首位
          tableData.forEach((item) => {
            item.children.forEach((item2, i) => {
              const obj = JSON.parse(JSON.stringify(item2 || {}))
              if (i === 0) {
                item.children.shift()
              }
              // 删除所有非colValue开头的
              Object.keys(obj).forEach((key) => {
                if (!key.includes('colValue')) {
                  delete obj[key]
                }
              })
              item = JSON.parse(JSON.stringify(Object.assign(item, obj)))
            })
          })

          this.columns = [
            ...this.columnsInit,
            ...orColumns, // 操作插槽
            {
              children: [
                {
                  align: 'center',
                  title: '操作',
                  dataIndex: 'key',
                  width: '180px',
                  // 动态渲染
                  customRender: (text, record) => {
                    // 隐藏对比可视化
                    // 阻止穿透
                    return (
                      <div style='width:180px;'>
                        <a
                          style='margin:0 10px'
                          onClick={(e) => {
                            e.stopPropagation()
                            this.onUnShow(record)
                          }}
                        >
                          隐藏
                        </a>
                        <a
                          style='margin-right:10px'
                          onClick={(e) => {
                            e.stopPropagation()
                            this.showEcharts(record)
                          }}
                        >
                          可视化
                        </a>
                        <a
                          type='link'
                          onClick={(e) => {
                            e.stopPropagation()
                            this.onDiffFinancial(record)
                          }}
                        >
                          对比
                        </a>
                      </div>
                    )
                  },
                },
              ],
            },
          ]
          this.tableData = tableData
          this.tableKey++
        })
        .finally(() => {
          this.tableLoading = false
        })
    },
    onUnShow(record) {
      const zbCode = record.zbCode
      // 在指标选择器删除当前对应的指标名称,必须使用删除方法
      const onKeys = JSON.parse(
        JSON.stringify(this.targetKeysList.filter((item) => item !== zbCode))
      )
      this.targetKeysList = onKeys
      this.targetKeys = onKeys
      this.initTable()
      // 并且重新刷新数据
      // this.echartsShow = false
      // this.tagetKeysList = this.targetKeysList.filter((item) => item !== record.colTitle)
    },
    onDiffFinancial(record) {
      // 跳转对比
      const params = {
        mdg_orgCode: this.searchForm.orgId,
        year: this.searchForm.year || [],
        orgList: this.orgList || [],
        zbName: record.zbName || '',
        zbCode: record.zbCode || '',
        // 指标名称 指标code
      }
      window.open('#/audit-contrast-view?params=' + JSON.stringify(params))
    },
    showEcharts(record) {
      this.onRecord = record
      this.echartsShow = true
      this.$nextTick(() => {
        this.initEcharts(record)
      })
    },
    initEcharts(record) {
      record = this.onRecord
      // 过滤所有不以colValue开头的
      const allDataArr = Object.keys(record).filter((item) => item.includes('colValue'))
      // 年份
      let allYear = allDataArr.map((item) => item.slice(-4))
      // 每年的指标值
      allYear = Array.from(new Set(allYear))
      // 单位 CNY 如果colTitle含率则单位为%
      const dw = this.onRecord.zbDw
      // 指标值
      const seriesList = allYear.map((item, i) => {
        return {
          name: item,
          data: allDataArr.filter((val) => val.includes(item)).map((item2) => record[item2] || ''),
          type: this.action === 1 ? 'bar' : 'line',
          // 柱子宽度
          barMaxWidth: 50,
          // 柱状图颜色
          itemStyle: {
            color: i % 2 === 0 ? '#1890ff' : '#E76F00',
          },
        }
      })
      // {
      //   name: this.onRecord.colTitle,
      //   data: allDataArr,
      //   type: this.action === 1 ? 'bar' : 'line',
      //   // 柱子宽度
      //   barMaxWidth: 50,
      //   // 柱状图颜色
      //   itemStyle: {
      //     color: '#1890ff',
      //   },
      // },

      this.myChart = echarts.init(document.getElementById('echartsContent'))
      const option = {
        title: {
          text: this.onRecord.zbName,
          textStyle: {
            rich: {
              a: {
                fontSize: 16,
                fontWeight: 600,
              },
            },
          },
          top: '0%',
          left: '45%',
        },
        tooltip: {
          trigger: 'item',
          // 带单位
          formatter: '{a} <br/>{b} : {c}' + dw,
        },

        grid: {
          left: '5%', // grid布局设置适当调整避免X轴文字只能部分显示
          right: '10%', // grid布局设置适当调整避免X轴文字只能部分显示
          bottom: '10%',
          containLabel: true,
        },

        xAxis: {
          type: 'category',
          data: record.orgNameList,
          axisLabel: {
            show: true, // 是否显示刻度标签，默认显示
            interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
            inside: false, // 刻度标签是否朝内，默认朝外
            margin: 6, // 刻度标签与轴线之间的距离
            // formatter: '{value}', // 刻度标签的内容格式器
            // 旋转30度
            rotate: -15,
          },
        },

        yAxis: {
          name: dw,
          type: 'value',
          minInterval: 1,
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#111',
            },
          },
        },
        dataZoom: [
          {
            type: 'slider',
            show: true,
            xAxisIndex: [0],
            startValue: 0, // 起始值
            endValue: 5, // 结束值
            // 滑动条
            // 最多显示五条数据
          },
          {
            type: 'inside',
            xAxisIndex: [0],
            start: 0,
            end: 10,
          },
          // 最多显示五条数据
        ],
        // 图例
        legend: {
          data: [this.onRecord.colTitle],
          textStyle: {
            align: 'right',
          },
          top: '2%',
          right: '2%',
        },
        series: seriesList,
      }
      this.myChart.setOption(option)
    },
    onTypeChange(type) {
      this.action = type
      // 折线图

      this.initEcharts()
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;

.table-sapn {
  display: inline-block;
  width: 100px;
  margin: 0 15px;
}
.form {
  margin-bottom: 20px;
}
.echarts-util {
  display: flex;
  flex-direction: column;
  height: 100%;
  .echarts-type {
    display: flex;
    justify-content: flex-start;
    padding: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #e8e8e8;
  }
}
.echarts-content {
  width: 100%;
}
.content {
  width: 100%;
  min-height: 500px;
}
.table-content {
  .title-content {
    display: flex;
    justify-content: flex-end;
    padding-right: 10px;
    margin-bottom: 20px;
    span {
      margin-left: 20px;
    }
  }
}
</style>

<style lang="scss" scoped>
@use '@/common/design' as *;

::v-deep .col-header {
  font-weight: 600;
  color: $table-header-color !important;
  background: #fafafa;
}
::v-deep .ant-table-scroll table .ant-table-fixed-columns-in-body:not([colspan]) > * {
  visibility: visible;
}
</style>