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">
          <div class="one-main">
            <div class="one-main-left">
              <div class="one-main-left-title">
                <div>总数</div>
                <div>{{ sjsl.total }}<span>起</span></div>
              </div>
              <img src="@/assets/images/gis-business/clue_sh-bg.png" alt=""/>
            </div>
            <div class="one-main-right">
              <div class="one-main-right-total">国籍分布</div>
              <div class="one-main-right-info">
                <SjslChartCom title="国内" color="#00BD7E" :num="sjsl.in" :total="sjsl.total"/>
                <SjslChartCom title="国外" color="#FFA254" :num="sjsl.out" :total="sjsl.total"/>
                <SjslChartCom title="未知" color="#783FD4" :num="sjsl.none" :total="sjsl.total"/>
              </div>
            </div>
          </div>
        </FocusContentCom>
        <div class="__gis-business-main_title">热点类型</div>
        <FocusContentCom class="two">2</FocusContentCom>
        <div class="__gis-business-main_title">类型占比</div>
        <FocusContentCom class="three">
          <LxzbChartCom :data="lxzbData"/>
        </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'
import SjslChartCom from './sjsl-chart.vue'
import LxzbChartCom from './lxzb-chart.vue'

export default defineComponent({
  name: '',
  components: {
    BusinessMainCom,
    FocusContentCom,
    SjslChartCom,
    LxzbChartCom,
  },
  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'},
      ],
      sjsl: {
        total: 2285,
        in: 380,
        out: 1226,
        none: 679
      },
      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
        }
      },
      lxzbData: [
        {value: '171', name: '反走私'},
        {value: '101', name: '酒类'},
        {value: '70', name: '苹果手机'},
        {value: '230', name: '其他'},
        {value: '171', name: '手表'},
      ]
    })
    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: 12px;
        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;
      >div {
        font-size: 12px;
      }
    }
  }
  .statistic-content {
    flex: 1;
    overflow-y: auto;
    .one {
      height: 150px;
      .one-main {
        width: 100%;
        height: 100%;
        padding: 20px 16px;
        display: flex;
        align-items: center;
        .one-main-left {
          height: 100%;
          width: 113px;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          .one-main-left-title {
            position: absolute;
            bottom: 55px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            >div:nth-child(1) {
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 600;
              color: #434343;
            }
            >div:nth-child(2) {
              font-size: 26px;
              font-family: YouSheBiaoTiHei;
              font-weight: 400;
              line-height: 22px;
              background: linear-gradient(180deg, #50EAFF 0%, #007EFF 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              >span {
                font-size: 16px;
              }
            }
          }
          >img {
            z-index: -1;
            position: absolute;
            bottom: 7px;
          }
        }
        .one-main-right {
          flex: 1;
          margin-left: 10px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .one-main-right-total {
            display: flex;
            align-items: center;
            padding-left: 10px;
            background: linear-gradient(270deg, rgba(18,128,241,0.05) 0%, rgba(18,128,241,0.1) 60%, rgba(18,128,241,0.2) 100%);
            width: 100%;
            height: 24px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 600;
            color: #434343;
            position: relative;
            &:before {
              content: '';
              position: absolute;
              width: 2px;
              height: 100%;
              left: 0;
              background-color: #1DA5FF;
            }
          }
          .one-main-right-info {
            width: 100%;
            height: 68px;
            padding: 10px 0 0 10px;
            display: flex;
            >div {
              width: 67px;
              height: 67px;
            }
          }
        }
      }
    }
    .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>