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

<template>
  <BusinessMainCom title="态势一张图">
    <div class="situation">
      <div class="statistic-form">
        <CusFormColumn
            labelWidth="72"
            :span="24"
            label="时间范围:"
            link="datetime"
            type="datetimerange"
            v-model:param="situation.tempForm.datetime"
            :disabled="datetimeType !== '0'"
            :disabled-date="(v) => v > new Date()"
        />
        <div class="datetime-buttons">
          <template v-for="item in datetimeMapper">
            <div class="datetime-buttons-item __hover" :class="{active: datetimeType === item.value}" @click="datetimeType = item.value">
              {{item.label}}
            </div>
          </template>
        </div>
        <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 class="statistic-content">
        <div class="__gis-business-main_title">事件数量</div>
        <FocusContentCom class="one">1</FocusContentCom>
        <div class="__gis-business-main_title">热点类型</div>
        <FocusContentCom class="two">2</FocusContentCom>
        <div class="__gis-business-main_title">类型占比</div>
        <FocusContentCom class="three">3</FocusContentCom>
        <div class="__gis-business-main_title">反走私事件列表</div>
        <div class="form-two">
          <CusFormColumn
              labelWidth="44"
              :span="24"
              label="搜索:"
              v-model:param="fzssj.tempForm.text"
          />
          <div class="__cus-buttons-2">
            <div class="__cus-button-submit __hover" @click="onSearchFzssj">搜索</div>
            <div class="__cus-button-cancel __hover" @click="onResetFzssj">重置</div>
          </div>
        </div>
        <div class="table" :style="`height: calc(66px + ${fzssj.table.data.length} * 40px);`">
          <CusTable
              ref="ref_cusTable"
              :tableData="fzssj.table.data"
              :tableHead="fzssj.table.head"
              :total="fzssj.table.total"
              :page="fzssj.table.pageNum"
              :pageSize="fzssj.table.pageSize"
              @handlePage="handlePage"
          >
          </CusTable>
        </div>
      </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'

export default defineComponent({
  name: '',
  components: {
    BusinessMainCom,
    FocusContentCom,
  },
  props: {},
  setup(props, {emit}) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({
      situation: {
        form: {},
        tempForm: {
          datetime: <Array<string>>[]
        },
      },
      datetimeType: '',
      datetimeMapper: [
        {label: '近一月', value: '1'},
        {label: '近三月', value: '2'},
        {label: '近六月', value: '3'},
        {label: '近一年', value: '4'},
        {label: '自定义', value: '0'},
      ],
      fzssj: {
        form: {},
        tempForm: {
          text: ''
        },
        table: {
          head: [
            {value: "location", label: "查获地点", show: true,},
            {value: "type", label: "物品归类", show: true},
            {value: "date", label: "立案审批日期", show: true, width: 100},
          ],
          data: <any>[],
          pageNum: 1,
          pageSize: 10,
          total: 0
        }
      },
    })
    const onSearch = () => {
      state.situation.form = JSON.parse(JSON.stringify(state.situation.tempForm))
    }
    const onReset = () => {
      state.datetimeType = '1'
      const end = new Date().getTime()
      const start = end - that.$util.oneDayTime * 30
      state.situation.tempForm = {
        datetime: [
          that.$util.YMDHms(start),
          that.$util.YMDHms(end),
        ],
      }
      onSearch()
    }
    watch(() => state.datetimeType, (n) => {
      const end = new Date().getTime()
      if (n === '1') {
        const start = end - that.$util.oneDayTime * 30
        state.situation.tempForm.datetime = [
          that.$util.YMDHms(start),
          that.$util.YMDHms(end),
        ]
      } else if (n === '2') {
        const start = end - that.$util.oneDayTime * 90
        state.situation.tempForm.datetime = [
          that.$util.YMDHms(start),
          that.$util.YMDHms(end),
        ]
      } else if (n === '3') {
        const start = end - that.$util.oneDayTime * 180
        state.situation.tempForm.datetime = [
          that.$util.YMDHms(start),
          that.$util.YMDHms(end),
        ]
      } else if (n === '4') {
        const start = end - that.$util.oneDayTime * 360
        state.situation.tempForm.datetime = [
          that.$util.YMDHms(start),
          that.$util.YMDHms(end),
        ]
      }
    })
    const handlePage = ({page, pageSize}: any) => {
      state.fzssj.table.pageNum = page
      state.fzssj.table.pageSize = pageSize
      initFzssj()
    }
    const initFzssj = () => {
      state.fzssj.table.data = []
      state.fzssj.table.total = 0
      for (let i = 0; i < 10; i++) {
        state.fzssj.table.data.push({
          location: '每南省三童市天涯区南边海路136号',
          type: '物品归类',
          date: '2023-11-05',
        })
      }
    }
    const onSearchFzssj = () => {
      state.fzssj.table.pageNum = 1
      state.fzssj.form = JSON.parse(JSON.stringify(state.fzssj.tempForm))
      initFzssj()
    }
    const onResetFzssj = () => {
      state.fzssj.tempForm.text = ''
      onSearchFzssj()
    }
    onMounted(() => {
      state.datetimeType = '1'
      state.situation.form = JSON.parse(JSON.stringify(state.situation.tempForm))
      state.fzssj.form = JSON.parse(JSON.stringify(state.fzssj.tempForm))
    })
    return {
      ...toRefs(state),
      onSearch,
      onReset,
      handlePage,
      initFzssj,
      onSearchFzssj,
      onResetFzssj,
    }
  },
})
</script>

<style scoped lang="scss">
@import "../main";
.situation {
  flex: 1;
  padding: 0 12px 10px 12px;
    display: flex;
  flex-direction: column;
  overflow: hidden;
  .statistic-form {
    :deep(.el-form-item) {
      margin-bottom: 7px;
      .el-range-editor {
        .el-range-separator {
          padding: 0;
        }
        .el-range-input {
          width: calc((100% - 40px) / 2);
          font-size: 12px;
        }
      }
    }
    .datetime-buttons {
      padding-left: 72px;
      margin-bottom: 7px;
      width: 100%;
      height: 24px;
      display: flex;
      justify-content: space-between;
      .datetime-buttons-item {
        width: 58px;
        height: 100%;
        border-radius: 2px;
        border: 1px solid #0093FF;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #108DF3;
        display: flex;
        align-items: center;
        justify-content: center;
        &.active {
          background-color: #79C6FF;
          color: #FFFFFF;
          border-color: #79C6FF;
        }
      }
    }
    .__cus-buttons-2 {
      height: 28px;
    }
  }
  .statistic-content {
    flex: 1;
    overflow-y: auto;
    .one {
      height: 150px;
    }
    .two {
      height: 220px;
    }
    .three {
      height: 190px;
    }
    .form-two {
      display: flex;
      align-items: flex-start;
      :deep(.el-form-item) {
        margin-bottom: 7px;
      }
      .cus-form-column {
        flex: 1;
        margin-right: 8px;
      }
    }
    .table {
    }
  }
}
</style>