gis-one-map-web/src/views/gis/business/enterprise/index.vue

<template>
  <BusinessMainCom title="企业一张图">
    <div class="enterprise">
      <div class="__gis-business-main_title">数量统计</div>
      <FocusContentCom class="one" v-loading="loading.statistic">
        <div class="one-top">
          <img src="@/assets/images/gis-business/enterprise_icon1.png" alt=""/>
          <StatisticTitleCom title="企业总数" :num="statistic.qy.total" unit="家"/>
        </div>
        <div class="one-bottom">
          <div class="one-bottom-item">
            <div class="chart">
              <PieSimpleChartCom :num="statistic.qy.lgszyjkscsb" :total="statistic.qy.total" color="#00FFFF"/>
            </div>
            <div class="text">零关税自用<br/>进口生产设备</div>
          </div>
          <div class="one-bottom-item">
            <div class="chart">
              <PieSimpleChartCom :num="statistic.qy.jgzzmgs" :total="statistic.qy.total" color="#FFCC8F"/>
            </div>
            <div class="text">加工增值免关税</div>
          </div>
          <div class="one-bottom-item">
            <div class="chart">
              <PieSimpleChartCom :num="statistic.qy.lgsjkyfl" :total="statistic.qy.total" color="#EB90FF"/>
            </div>
            <div class="text">零关税进口<br/>原辅料</div>
          </div>
        </div>
      </FocusContentCom>
      <FocusContentCom class="two" v-loading="loading.statistic">
        <div class="two-main">
          <img src="@/assets/images/gis-business/enterprise_icon2.png" alt=""/>
          <StatisticTitleCom title="预警总数" :num="statistic.warning" unit="条"/>
        </div>
      </FocusContentCom>
      <div class="__gis-business-main_title">企业列表</div>
      <div class="form">
        <CusFormColumn
            labelWidth="44"
            :span="24"
            link="select"
            label="类型:"
            v-model:param="enterprise.tempForm.type"
            multiple
            collapse-tags
            :options="[
              {dictLabel: '零关税自用进口生产设备', dictValue: 'lgszyjkscsb'},
              {dictLabel: '加工增值免关税', dictValue: 'jgzzmgs'},
              {dictLabel: '零关税进口原辅料', dictValue: 'lgsjkyfl'},
            ]"
        />
        <div class="form-two">
          <CusFormColumn
              labelWidth="44"
              :span="24"
              label="搜索:"
              v-model:param="enterprise.tempForm.name"
          />
          <div class="__cus-buttons-2">
            <div class="__cus-button-submit __hover" @click="onSearch">搜索</div>
            <div class="__cus-button-cancel __hover" @click="onReset">重置</div>
          </div>
        </div>
      </div>
      <div class="table" v-loading="enterprise.table.loading">
        <div class="table-card">
          <template v-for="(item, index) in enterprise.table.data">
            <div class="table-card-item __hover" :class="{active: item.id === $store.state.gis.activeQyId}" @click="handleClick(item)">
              <img src="@/assets/images/gis-business/enterprise_list-icon1.png" alt=""/>
              <div class="table-card-item-right">
                <div class="table-card-item-right-top">
                  <CusEllipsis :value="`${(enterprise.table.pageNum - 1) * enterprise.table.pageSize + index + 1}.${item.qymc}`"/>
                </div>
                <div class="table-card-item-right-bottom">
                  <img src="@/assets/images/gis-business/enterprise_list-icon2.png" alt=""/>
                  {{item.qykx}}
                </div>
              </div>
            </div>
          </template>
        </div>
        <el-pagination
            class="__cus-pagination"
            :current-page="enterprise.table.pageNum"
            :page-size="enterprise.table.pageSize"
            :total="enterprise.table.total"
            layout="total,prev,pager,next,jumper"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </BusinessMainCom>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  nextTick
} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import {ElMessage, ElMessageBox} from "element-plus";
import BusinessMainCom from '../common/business-main.vue'
import FocusContentCom from '../common/focus-content.vue'
import PieSimpleChartCom from '../common/pie-simple-chart.vue'
import StatisticTitleCom from '../common/statistic-title.vue'
import {enterpriseQuery, staticsQuery} from "@/api/modules/enterprise";

export default defineComponent({
  name: '',
  components: {
    BusinessMainCom,
    FocusContentCom,
    PieSimpleChartCom,
    StatisticTitleCom
  },
  props: {},
  setup(props, {emit}) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({
      enterprise: {
        form: {},
        tempForm: {
          type: '',
          name: ''
        },
        table: {
          data: <any>[],
          pageNum: 1,
          pageSize: 10,
          total: 0,
          loading: false
        }
      },
      statistic: {
        qy: {
          total: 0,
          lgszyjkscsb: 0,
          jgzzmgs: 0,
          lgsjkyfl: 0
        },
        warning: 0
      },
      loading: {
        statistic: false
      }
    })
    const onSearch = () => {
      state.enterprise.table.pageNum = 1
      state.enterprise.form = JSON.parse(JSON.stringify(state.enterprise.tempForm))
      handleSearch()
    }
    const onReset = () => {
      state.enterprise.tempForm = {
        name: '',
        type: ''
      }
      onSearch()
    }
    const handleCurrentChange = (val: number) => {
      state.enterprise.table.pageNum = val
      handleSearch()
    }
    const handleSearch = () => {
      state.enterprise.table.data = []
      const params = {
        pageNumber: state.enterprise.table.pageNum,
        pageSize: state.enterprise.table.pageSize,
      }
      if (state.enterprise.form.name) {
        params.entName = state.enterprise.form.name
      }
      if (state.enterprise.form.type?.length > 0) {
        params.entType = state.enterprise.form.type.map(v => store.getters['dictionary/elementTypeMap'].get(v)).join(',')
      }
      state.enterprise.table.loading = true
      that.$api.enterpriseQuery(params).then((res: any) => {
        state.enterprise.table.data = res.datas || []
        state.enterprise.table.total = res.recordCount || 0
        state.enterprise.table.loading = false
      }).catch(() => {
        state.enterprise.table.loading = false
      })
    }
    const initStatistic = () => {
      state.loading.statistic = true
      that.$api.staticsQuery().then(res => {
        if (res.resp_code === 0) {
          state.statistic = {
            qy: {
              total: res.datas?.count || 0,
              lgszyjkscsb: res.datas?.deviceCount || 0,
              jgzzmgs: res.datas?.noTaxCount || 0,
              lgsjkyfl: res.datas?.materialCount || 0
            },
            warning: res.datas?.alertCount || 0
          }
        }
        state.loading.statistic = false
      }).catch(() => {
        state.loading.statistic = false
      })
    }
    const handleClick = (item) => {
      const qyLayer = store.state.gis.map.getLayers().getArray().filter(v => v.get('layerName') === 'qy')?.[0]
      if (qyLayer) {
        const f = qyLayer.getSource().getFeatureById(item.id)
        if (f) {
          if (item.id === store.state.gis.activeQyId) {
            f.get('reset')()
          } else {
            f.get('mockClick')()
            store.state.gis.map.getView().animate({
              center: f.getGeometry().getCoordinates(),
              zoom: store.state.gis.map.getView().getMaxZoom(),
            });
          }
        } else {
          ElMessage.warning('未找到该企业位置！')
        }
      }
    }
    onMounted(() => {
      state.enterprise.form = JSON.parse(JSON.stringify(state.enterprise.tempForm))
      handleSearch()
      initStatistic()
    })
    return {
      ...toRefs(state),
      onSearch,
      onReset,
      handleCurrentChange,
      handleClick
    }
  },
})
</script>

<style scoped lang="scss">
@import "../main";
.enterprise {
  flex: 1;
  padding: 0 12px 10px 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .one {
    height: 238px;
    display: flex;
    flex-direction: column;
    .one-top {
      display: flex;
      align-items: center;
      padding: 12px 22px 20px 23px;
      >img {
        margin-right: 16px;
      }
    }
    .one-bottom {
      display: flex;
      justify-content: space-between;
      padding: 0 12px;
      .one-bottom-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        .chart {
          width: 100px;
          height: 100px;
        }
        .text {
          margin-top: 8px;
          flex: 1;
          text-align: center;
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #434343;
          line-height: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
  .two {
    margin-top: 10px;
    height: 100px;
    .two-main {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      padding: 12px 22px 20px 23px;
      >img {
        margin-right: 16px;
      }
    }
  }
  .form {
    :deep(.el-form-item) {
      margin-bottom: 7px;
    }
    .form-two {
      display: flex;
      align-items: flex-start;
      .cus-form-column {
        flex: 1;
        margin-right: 8px;
      }
    }
  }
  .table {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .table-card {
      flex: 1;
      overflow-y: auto;
      display: grid;
      row-gap: 10px;
      .table-card-item {
        overflow: hidden;
        width: 100%;
        height: 62px;
        border: 1px solid #D6D6D6;
        border-radius: 2px;
        display: flex;
        align-items: center;
        padding: 11px 8px;
        &.active {
          background: rgba(16,140,243,0.1);
          border: 1px solid #1270DA;
        }
        .table-card-item-right {
          overflow: hidden;
          flex: 1;
          margin-left: 6px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .table-card-item-right-top {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #434343;
          }
          .table-card-item-right-bottom {
            margin-top: 7px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #FF8217;
            display: flex;
            align-items: center;
            >img {
              margin-right: 6px;
            }
          }
        }
      }
    }
    .__cus-pagination {
      height: 20px;
    }
  }
}
</style>