线索一张图基本布局

src/assets/svg/business/tips.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
+<path class="st0" d="M64,7.7C32.9,7.7,7.7,32.9,7.7,64c0,0,0,0,0,0c0,31.1,25.2,56.3,56.3,56.3c31.1,0,56.3-25.2,56.3-56.3
+	c0,0,0,0,0,0C120.3,32.9,95.1,7.7,64,7.7z M58.9,76.8V33.3c0-2.8,2.3-5.1,5.1-5.1s5.1,2.3,5.1,5.1v43.5c0,2.8-2.3,5.1-5.1,5.1
+	S58.9,79.6,58.9,76.8C58.9,76.8,58.9,76.8,58.9,76.8z M64,99.8C64,99.8,64,99.8,64,99.8c-2.8,0-5.1-2.3-5.1-5.1
+	c0-2.8,2.3-5.1,5.1-5.1c2.8,0,5.1,2.3,5.1,5.1S66.8,99.8,64,99.8z"/>
+</svg>

src/style/cus.scss

@@ -263,9 +263,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  height: 36px;
   >div {
+    height: 100%;
     width: 80px;
-    height: 36px;
     border: 1px solid #1270DA;
     border-radius: 2px;
     display: flex;
@@ -291,9 +292,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  height: 36px;
   >div {
+    height: 100%;
     width: 50px;
-    height: 36px;
     border: 1px solid #1270DA;
     border-radius: 2px;
     display: flex;
@@ -319,9 +321,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  height: 20px;
   >div {
     width: 60px;
-    height: 20px;
+    height: 100%;
     border: 1px solid #1270DA;
     border-radius: 4px;
     display: flex;

src/utils/util.ts

@@ -84,6 +84,8 @@ export const formatTableHeadFilters = (arr: Array<any>, text = 'dictLabel', valu
   })
 }
 
+export const oneDayTime = 1000 * 60 * 60 * 24
+
 export const YMDHms = (date: any) => {
   const _date = new Date(date)
   const Y = `${_date.getFullYear()}`;

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

@@ -1,5 +1,74 @@
 <template>
-  线索一张图
+  <BusinessMainCom title="线索一张图">
+    <div class="clue">
+      <div class="statistic-form">
+        <CusFormColumn
+            labelWidth="72"
+            :span="24"
+            link="select"
+            label="搜索类型:"
+            v-model:param="clue.tempForm.type"
+            :options="[
+              {dictLabel: '零关税自用进口生产设备', dictValue: 'lgszyjkscsb'},
+              {dictLabel: '加工增值免关税', dictValue: 'jgzzmgs'},
+              {dictLabel: '零关税进口原辅料', dictValue: 'lgsjkyfl'},
+            ]"
+        />
+        <div class="statistic-form-two">
+          <CusFormColumn
+              labelWidth="72"
+              :span="24"
+              label="时间范围:"
+              link="datetime"
+              type="datetimerange"
+              v-model:param="clue.tempForm.datetime"
+              :disabled="datetimeType !== '0'"
+              :disabled-date="handleDisabledDate"
+              @calendar-change="(val) => calendarDate = val"
+              @clear="calendarStart = []"
+          />
+          <el-tooltip
+              effect="dark"
+              content="为避免数据量过大导致系统卡顿，本功能最多支持查询周期为6个月的有效线索"
+              placement="top"
+          >
+            <SvgIcon name="tips" size="18" color="#0096FF"/>
+          </el-tooltip>
+        </div>
+        <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">有效线索TOP5</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>
+        <div class="sh-area">
+          <CusFormColumn
+              :span="24"
+              link="select"
+              v-model:param="shArea"
+              placeholder="请选择区域"
+              static
+              :options="[]"
+          />
+        </div>
+        <FocusContentCom class="three">3</FocusContentCom>
+        <FocusContentCom class="four">4</FocusContentCom>
+      </div>
+
+    </div>
+  </BusinessMainCom>
 </template>
 
 <script lang="ts">
@@ -18,25 +87,212 @@ 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({
+      expend: true,
+      clue: {
+        form: {},
+        tempForm: {
+          type: '',
+          datetime: <Array<string>>[]
+        },
+      },
+      datetimeType: '',
+      datetimeMapper: [
+        {label: '近一天', value: '1'},
+        {label: '近三天', value: '2'},
+        {label: '近一周', value: '3'},
+        {label: '近一月', value: '4'},
+        {label: '自定义', value: '0'},
+      ],
+      calendarDate: <any>[],
+      shArea: ''
+    })
+    const onSearch = () => {
+      state.clue.form = JSON.parse(JSON.stringify(state.clue.tempForm))
+    }
+    const onReset = () => {
+      state.datetimeType = '1'
+      const end = new Date().getTime()
+      const start = end - that.$util.oneDayTime
+      state.clue.tempForm = {
+        type: '',
+        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
+        state.clue.tempForm.datetime = [
+            that.$util.YMDHms(start),
+            that.$util.YMDHms(end),
+        ]
+      } else if (n === '2') {
+        const start = end - that.$util.oneDayTime * 3
+        state.clue.tempForm.datetime = [
+          that.$util.YMDHms(start),
+          that.$util.YMDHms(end),
+        ]
+      } else if (n === '3') {
+        const start = end - that.$util.oneDayTime * 7
+        state.clue.tempForm.datetime = [
+          that.$util.YMDHms(start),
+          that.$util.YMDHms(end),
+        ]
+      } else if (n === '4') {
+        const start = end - that.$util.oneDayTime * 30
+        state.clue.tempForm.datetime = [
+          that.$util.YMDHms(start),
+          that.$util.YMDHms(end),
+        ]
+      }
+    })
+    watch(() => state.clue.tempForm.datetime, (n) => {
+      state.calendarDate = n
+    })
+    const handleDisabledDate = (d) => {
+      let flag = false
+      if (d > new Date()) {
+        flag = true
+      } else {
+        if (state.calendarDate?.length > 0) {
+          const s = state.calendarDate[0] ? new Date(state.calendarDate[0]).getTime() : null
+          const e = state.calendarDate[1] ? new Date(state.calendarDate[1]).getTime() : null
+          if (s && e) {
+            if (d.getTime() < s) {
+              flag = Math.abs(d.getTime() - e) / that.$util.oneDayTime > 180
+            } else if (d.getTime() > e) {
+              flag = Math.abs(d.getTime() - s) / that.$util.oneDayTime > 180
+            } else {
+              flag = flag
+            }
+          } else if (s) {
+            flag = Math.abs(d.getTime() - s) / that.$util.oneDayTime > 180
+          }
+        }
+      }
+      return flag
+    }
     onMounted(() => {
+      state.datetimeType = '1'
+      state.clue.form = JSON.parse(JSON.stringify(state.clue.tempForm))
     })
     return {
       ...toRefs(state),
+      onSearch,
+      onReset,
+      handleDisabledDate
     }
   },
 })
 </script>
 
 <style scoped lang="scss">
+@import "../main";
+.clue {
+  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;
+        }
+        //.el-range__close-icon {
+        //  display: none;
+        //}
+      }
+    }
+    .statistic-form-two {
+      display: flex;
+      align-items: flex-start;
+      .cus-form-column {
+        flex: 1;
+        margin-right: 8px;
+      }
+      .svg-icon {
+        margin-top: 10px;
+      }
+    }
+    .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: 144px;
+    }
+    .two {
+      height: 210px;
+    }
+    .sh-area {
+      :deep(.el-form-item) {
+        margin-bottom: 7px;
+      }
+    }
+    .three {
+      height: 140px;
+    }
+    .four {
+      margin-top: 10px;
+      height: 140px;
+    }
+  }
+
+}
 </style>

src/views/gis/layout/tools/select.vue

@@ -234,6 +234,7 @@ export default defineComponent({
     align-items: center;
     padding: 0 14px;
     .tools {
+      width: 100%;
       display: flex;
       align-items: center;
       .label {