态势一张图基本布局

src/views/gis/business/clue/index.vue

@@ -103,7 +103,6 @@ export default defineComponent({
     const route = useRoute();
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
     const state = reactive({
-      expend: true,
       clue: {
         form: {},
         tempForm: {

src/views/gis/business/enterprise/index.vue

@@ -84,7 +84,6 @@ export default defineComponent({
     const route = useRoute();
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
     const state = reactive({
-      expend: true,
       enterprise: {
         form: {},
         tempForm: {

src/views/gis/business/situation/index.vue

@@ -1,5 +1,64 @@
 <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(60px + ${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">
@@ -18,25 +77,216 @@ import {
 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: {},
+  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({})
+    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;
+  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>