Prechádzať zdrojové kódy

完成overTime页面及组织企业树组件

Yue 3 rokov pred
rodič
commit
b69c60cc31

+ 13 - 52
components.d.ts

@@ -9,8 +9,6 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    AddCustomerModal: typeof import('./src/components/modals/forms/AddCustomerModal.vue')['default']
-    Advanced: typeof import('./src/components/subscriptions/add/Advanced.vue')['default']
     BaseChart: typeof import('./src/components/charts/BaseChart.vue')['default']
     CalendarApp1: typeof import('./src/components/calendar/CalendarApp1.vue')['default']
     Card: typeof import('./src/components/cards/Card.vue')['default']
@@ -20,14 +18,9 @@ declare module '@vue/runtime-core' {
     Card4: typeof import('./src/components/cards/Card4.vue')['default']
     CodeHighlighter: typeof import('./src/components/highlighters/CodeHighlighter.vue')['default']
     CodeHighlighter2: typeof import('./src/components/highlighters/CodeHighlighter2.vue')['default']
-    copy: typeof import('./src/components/Table/table-partials/table-content/table-fixed/TableFixed copy.vue')['default']
-    CreateAccountModal: typeof import('./src/components/modals/wizards/CreateAccountModal.vue')['default']
-    CreateAPIKeyModal: typeof import('./src/components/modals/forms/CreateAPIKeyModal.vue')['default']
-    CreateAppModal: typeof import('./src/components/modals/wizards/create-app-modal/CreateAppModal.vue')['default']
-    CreateAppModalForm: typeof import('./src/components/modals/wizards/create-app-modal/CreateAppModalForm.vue')['default']
     CreditBalance: typeof import('./src/components/customers/cards/overview/CreditBalance.vue')['default']
-    Customer: typeof import('./src/components/subscriptions/add/Customer.vue')['default']
-    Details: typeof import('./src/components/subscriptions/view/Details.vue')['default']
+    DateRangeSelect: typeof import('./src/components/select/DateRangeSelect.vue')['default']
+    DateSelect: typeof import('./src/components/select/DateSelect.vue')['default']
     Dropdown1: typeof import('./src/components/dropdown/Dropdown1.vue')['default']
     Dropdown2: typeof import('./src/components/dropdown/Dropdown2.vue')['default']
     Dropdown3: typeof import('./src/components/dropdown/Dropdown3.vue')['default']
@@ -38,51 +31,36 @@ declare module '@vue/runtime-core' {
     DySelectTree2: typeof import('./src/components/select/DySelectTree2.vue')['default']
     Earnings: typeof import('./src/components/customers/cards/statments/Earnings.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCol: typeof import('element-plus/es')['ElCol']
+    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElElFormItem: typeof import('element-plus/es')['ElElFormItem']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElRow: typeof import('element-plus/es')['ElRow']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElTree: typeof import('element-plus/es')['ElTree']
     Events: typeof import('./src/components/customers/cards/events-and-logs/Events.vue')['default']
-    ExportCustomerModal: typeof import('./src/components/modals/forms/ExportCustomerModal.vue')['default']
     File: typeof import('./src/components/files/File.vue')['default']
     Folder: typeof import('./src/components/files/Folder.vue')['default']
-    InviteFriendsModal: typeof import('./src/components/modals/general/InviteFriendsModal.vue')['default']
     Invoices: typeof import('./src/components/customers/cards/overview/Invoices.vue')['default']
-    Item1: typeof import('./src/components/activity-timeline-items/Item1.vue')['default']
-    Item2: typeof import('./src/components/activity-timeline-items/Item2.vue')['default']
-    Item3: typeof import('./src/components/activity-timeline-items/Item3.vue')['default']
-    Item4: typeof import('./src/components/activity-timeline-items/Item4.vue')['default']
-    Item5: typeof import('./src/components/activity-timeline-items/Item5.vue')['default']
-    Item6: typeof import('./src/components/activity-timeline-items/Item6.vue')['default']
-    Item7: typeof import('./src/components/activity-timeline-items/Item7.vue')['default']
-    Item8: typeof import('./src/components/activity-timeline-items/Item8.vue')['default']
-    KTDataTable: typeof import('./src/components/kt-datatable/KTDataTable.vue')['default']
     Loading: typeof import('./src/components/Table/table-partials/Loading.vue')['default']
     Logs: typeof import('./src/components/customers/cards/events-and-logs/Logs.vue')['default']
     MenuComponent: typeof import('./src/components/menu/MenuComponent.vue')['default']
-    MessageIn: typeof import('./src/components/messenger-parts/MessageIn.vue')['default']
-    MessageOut: typeof import('./src/components/messenger-parts/MessageOut.vue')['default']
-    NewAddressModal: typeof import('./src/components/modals/forms/NewAddressModal.vue')['default']
-    NewCardModal: typeof import('./src/components/modals/forms/NewCardModal.vue')['default']
-    NewEventModal: typeof import('./src/components/modals/forms/NewEventModal.vue')['default']
-    NewTargetModal: typeof import('./src/components/modals/forms/NewTargetModal.vue')['default']
     Notice: typeof import('./src/components/Notice.vue')['default']
-    PaymentMethod: typeof import('./src/components/subscriptions/add/PaymentMethod.vue')['default']
+    OrgCompany: typeof import('./src/components/Tree/OrgCompany.vue')['default']
     PaymentMethods: typeof import('./src/components/customers/cards/overview/PaymentMethods.vue')['default']
     PaymentRecords: typeof import('./src/components/customers/cards/overview/PaymentRecords.vue')['default']
     'PreviewCode ': typeof import('./src/components/prismjs/PreviewCode .vue')['default']
-    Products: typeof import('./src/components/subscriptions/add/Products.vue')['default']
     Profile: typeof import('./src/components/page-layouts/Profile.vue')['default']
     Questions: typeof import('./src/components/devs/Questions.vue')['default']
     Replies: typeof import('./src/components/devs/Replies.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    ShareAndEarnModal: typeof import('./src/components/modals/general/ShareAndEarnModal.vue')['default']
     Statement: typeof import('./src/components/customers/cards/statments/Statement.vue')['default']
-    Step1: typeof import('./src/components/wizard/steps/Step1.vue')['default']
-    Step2: typeof import('./src/components/wizard/steps/Step2.vue')['default']
-    Step3: typeof import('./src/components/wizard/steps/Step3.vue')['default']
-    Step4: typeof import('./src/components/wizard/steps/Step4.vue')['default']
-    Step5: typeof import('./src/components/wizard/steps/Step5.vue')['default']
-    Summary: typeof import('./src/components/subscriptions/add/Summary.vue')['default']
     TableBodyRow: typeof import('./src/components/Table/table-partials/table-content/table-body/TableBodyRow.vue')['default']
     TableContent: typeof import('./src/components/Table/table-partials/table-content/TableContent.vue')['default']
     TableFixed: typeof import('./src/components/Table/table-partials/table-content/table-fixed/TableFixed.vue')['default']
@@ -92,23 +70,6 @@ declare module '@vue/runtime-core' {
     TablePagination: typeof import('./src/components/Table/table-partials/table-content/table-footer/TablePagination.vue')['default']
     TableRightFixed: typeof import('./src/components/Table/table-partials/table-content/table-fixed/TableRightFixed.vue')['default']
     TextFormatting: typeof import('./src/components/devs/TextFormatting.vue')['default']
-    TwoFactorAuthModal: typeof import('./src/components/modals/wizards/TwoFactorAuthModal.vue')['default']
-    UpgradePlanModal: typeof import('./src/components/modals/general/UpgradePlanModal.vue')['default']
     VbDataTable: typeof import('./src/components/Table/VbDataTable.vue')['default']
-    ViewUsersModal: typeof import('./src/components/modals/general/ViewUsersModal.vue')['default']
-    Widget1: typeof import('./src/components/widgets/charts/Widget1.vue')['default']
-    Widget10: typeof import('./src/components/widgets/mixed/Widget10.vue')['default']
-    Widget11: typeof import('./src/components/widgets/mixed/Widget11.vue')['default']
-    Widget12: typeof import('./src/components/widgets/mixed/Widget12.vue')['default']
-    Widget13: typeof import('./src/components/widgets/mixed/Widget13.vue')['default']
-    Widget14: typeof import('./src/components/widgets/mixed/Widget14.vue')['default']
-    Widget2: typeof import('./src/components/widgets/charts/Widget2.vue')['default']
-    Widget3: typeof import('./src/components/widgets/charts/Widget3.vue')['default']
-    Widget4: typeof import('./src/components/widgets/charts/Widget4.vue')['default']
-    Widget5: typeof import('./src/components/widgets/charts/Widget5.vue')['default']
-    Widget6: typeof import('./src/components/widgets/charts/Widget6.vue')['default']
-    Widget7: typeof import('./src/components/widgets/charts/Widget7.vue')['default']
-    Widget8: typeof import('./src/components/widgets/charts/Widget8.vue')['default']
-    Widget9: typeof import('./src/components/widgets/mixed/Widget9.vue')['default']
   }
 }

+ 8 - 2
src/App.vue

@@ -1,5 +1,7 @@
 <template>
-  <RouterView />
+  <el-config-provider :locale="locale">
+    <RouterView />
+  </el-config-provider>
 </template>
 
 <script lang="ts">
@@ -8,6 +10,7 @@ import { RouterView } from "vue-router"
 import appStore from "@/stores"
 import { themeMode } from "@/core/helpers/config"
 import { initializeComponents } from "@/core/plugins/keenthemes"
+import zhCn from "element-plus/lib/locale/lang/zh-cn"
 
 export default defineComponent({
   name: "app",
@@ -16,7 +19,7 @@ export default defineComponent({
   },
   setup() {
     const configBodyStore = appStore.bodyConfigStore
-
+    const locale = zhCn
     onBeforeMount(() => {
       /**
        * Overrides the layout config using saved data from localStorage
@@ -37,6 +40,9 @@ export default defineComponent({
         configBodyStore.removeBodyClassName("page-loading")
       })
     })
+    return {
+      locale,
+    }
   },
 })
 </script>

+ 187 - 0
src/components/Tree/OrgCompany.vue

@@ -0,0 +1,187 @@
+<script setup lang="ts">
+//import { defineProps, withDefaults } from "vue"
+import { ref, defineEmits, onMounted } from "vue"
+import { getAssetPath } from "@/core/helpers/assets"
+import Rs from "@/core/services/RequestService"
+import { useRoute } from "vue-router"
+const route = useRoute()
+//const props = withDefaults(defineProps<{ value: string }>(), { value: "" })
+
+const emits = defineEmits<{
+  (e: "update:value", v: string): void
+  (e: "node-click", node: any): void
+  (e: "clear"): void
+  (e: "selected", id: string, key: string): void
+}>()
+const expandedKeys = ref<Array<string>>([])
+const selectedKeys = ref<Array<string>>([])
+const searchWord = ref("")
+const data = ref<any>([])
+const defaultProps = {
+  children: "children",
+  label: "title",
+}
+
+function loadData(fun: () => void) {
+  expandedKeys.value = []
+  Rs.get("sys/onlineData/getOrgCompanyTree?&monitoring_type=0&type=3&companyName=" + (searchWord.value ?? "")).then(
+    (res) => {
+      data.value = res.data
+      fun && fun()
+    }
+  )
+}
+function onClear() {
+  searchWord.value = ""
+  onSearch()
+  emits("clear")
+}
+function onSearch() {
+  loadData(() => {
+    findCompany(false)
+  })
+}
+
+function findCompany(hasKey = true) {
+  if (!data.value?.length) {
+    return
+  }
+  let key = ""
+  //console.log(searchWord)
+  data.value.forEach((v: any) => {
+    if ((hasKey && v.title == searchWord.value) || v.title.search(searchWord.value) >= 0) {
+      key = v.key
+    } else {
+      if (v.children) {
+        _findCompany(v.children, key, v.key)
+      }
+    }
+  })
+  function _findCompany(list: Array<any>, key: string, fatherKey: string) {
+    list.forEach((v) => {
+      if (
+        (hasKey && v.key == "10_" + route.query.company_id) ||
+        (v.key.search("10_") >= 0 && v.title.search(searchWord.value) >= 0)
+      ) {
+        key = v.key
+        const keys = fatherKey.split("-")
+        keys.forEach((val: string) => {
+          if (val != "") {
+            expandedKeys.value.push(val)
+          }
+        })
+
+        emits("selected", key.split("_")[0], key)
+        setTimeout(() => {
+          selectedKeys.value = [key]
+        }, 100)
+        return key
+      } else {
+        if (v.children) {
+          const tempFatherkey = fatherKey + "-" + v.key
+          _findCompany(v.children, key, tempFatherkey)
+        }
+      }
+    })
+  }
+}
+
+function getIconClass(node: any) {
+  //console.log(node)
+  let str = ""
+
+  switch (node.level) {
+    case 1:
+      str = "fas fa-city text-primary"
+      break
+    case 2:
+      str = "fas fa-hotel text-success"
+      break
+    case 3:
+      str = "fas fa-building text-info"
+      break
+    case 4:
+      str = "fas fa-house-user text-primary"
+      break
+    case 5:
+      str = "fas fa-map-marked-alt text-success"
+      break
+    case 6:
+      str = "fas fa-map-marker-alt text-info"
+      break
+  }
+  return str
+}
+function onNodeClick(nodeData: any) {
+  //const nodeData = node.data
+  console.log(nodeData)
+  emits("selected", nodeData.key.split("_")[1], nodeData.key)
+  emits("node-click", nodeData)
+}
+function init() {
+  const name = route.query.comName as string
+  if (name) {
+    searchWord.value = name
+  }
+  loadData(findCompany)
+}
+
+onMounted(() => {
+  init()
+})
+</script>
+<template>
+  <div class="d-flex">
+    <el-input
+      class="w-100 me-5 mb-3"
+      v-model="searchWord"
+      placeholder="请输入搜索内容"
+      size="large"
+      :clearable="true"
+      @clear="onClear"
+      @keyup.enter="onSearch"
+    />
+    <el-button class="btn btn-primary" size="large" @click="onSearch()">搜索</el-button>
+  </div>
+  <el-tree
+    :data="data"
+    :props="defaultProps"
+    node-key="key"
+    :default-expanded-keys="expandedKeys"
+    @node-click="onNodeClick"
+  >
+    <template #default="{ node, data }">
+      <div>
+        <i class="me-5" :class="getIconClass(node)"></i>
+        <span>
+          {{ node.label }} (
+          <span class="px-2 text-danger">{{ data.attr }}</span>
+          家企业)
+        </span>
+      </div>
+      <span v-if="!node.isLeaf">
+        <inline-svg v-if="node.expanded" :src="getAssetPath('media/icons/duotune/arrows/arr073.svg')" />
+        <inline-svg v-else :src="getAssetPath('media/icons/duotune/arrows/arr072.svg')" />
+      </span>
+    </template>
+  </el-tree>
+</template>
+
+<style lang="scss" scoped>
+::v-deep .el-tree-node {
+  &__content {
+    height: 35px;
+    color: #181c32;
+    justify-content: space-between;
+    &:hover {
+      background-color: #ddedf4;
+    }
+    svg {
+      color: #777;
+    }
+    .el-icon {
+      display: none;
+    }
+  }
+}
+</style>

+ 106 - 0
src/components/select/DateRangeSelect.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { ref, toRefs, defineProps, withDefaults, defineEmits, onMounted } from "vue"
+import moment from "moment"
+export interface DateSelectOption {
+  text: string
+  value: [Date, Date]
+}
+const props = withDefaults(
+  defineProps<{
+    dateValue: [Date, Date]
+    selectValue: number | string
+    dateArray: Array<DateSelectOption>
+    label?: string
+    rangeSeparator?: string
+    placeholder?: string
+    startPlaceholder?: string
+    endPlaceholder?: string
+    size?: "large" | "default" | "small"
+    unlinkPanels?: boolean
+    disabledDate?: (v: Date) => boolean
+    selectClass?: string
+    dateClass?: string
+  }>(),
+  {
+    value: () => {
+      return [new Date(), new Date()]
+    },
+    label: "日期",
+    placeholder: "请选择日期",
+    startPlaceholder: "开始日期",
+    endPlaceholder: "结束日期",
+    unlinkPanels: true,
+    size: "large",
+    rangeSeparator: "~",
+    selectClass: "mb-0",
+    dateClass: "mb-0",
+  }
+)
+const emits = defineEmits<{
+  (e: "update:dateValue", v: [Date, Date]): void
+  (e: "update:selectValue", v: string | number): void
+  (e: "change", v: [Date, Date]): void
+}>()
+const dateStr = ref(``)
+const { dateValue, selectValue } = toRefs(props)
+const defaultDateValue = ref<[Date, Date]>([moment(dateValue.value[0]).add(-1, "d").toDate(), dateValue.value[1]])
+const optionArray = ref<Array<string>>([])
+const dateArray = ref<Array<[Date, Date]>>([])
+const showDate = ref(false)
+function checkDate(v: Date) {
+  if (props.disabledDate) {
+    return props.disabledDate(v)
+  } else {
+    return new Date() < v
+  }
+}
+function selectChange(v: any) {
+  if (v == -1) {
+    showDate.value = true
+  } else {
+    showDate.value = false
+    emits("update:dateValue", dateArray.value[Number(v)])
+    emits("change", dateArray.value[Number(v)])
+  }
+  emits("update:selectValue", v)
+}
+function dateChange(v: any) {
+  emits("update:dateValue", v)
+  emits("change", v)
+}
+
+function init() {
+  optionArray.value = []
+  dateArray.value = []
+  props.dateArray.forEach((v: DateSelectOption) => {
+    optionArray.value.push(v.text)
+    dateArray.value.push(v.value)
+  })
+}
+
+onMounted(() => {
+  init()
+})
+</script>
+<template>
+  <el-form-item :label="label" :class="selectClass">
+    <el-select v-model="selectValue" :placeholder="placeholder" :size="size" @change="selectChange">
+      <el-option v-for="(item, index) in optionArray" :key="index" :label="item" :value="index" />
+      <el-option label="自定义日期" :value="-1" />
+    </el-select>
+  </el-form-item>
+  <el-form-item v-if="showDate" label="自定义日期" :class="dateClass">
+    <el-date-picker
+      v-model="dateStr"
+      type="daterange"
+      :unlink-panels="unlinkPanels"
+      :range-separator="rangeSeparator"
+      :default-value="defaultDateValue"
+      :start-placeholder="startPlaceholder"
+      :end-placeholder="endPlaceholder"
+      :size="size"
+      :disabled-date="checkDate"
+      @change="dateChange"
+    />
+  </el-form-item>
+</template>

+ 18 - 1
src/views/goLineData/oilFumeConcentration.vue

@@ -1,7 +1,24 @@
 <script setup lang="ts">
 import { defineProps, reactive, ref, toRefs } from "vue"
+const id = ref("")
+const key = ref("")
+function onSelected(selectedId: string, selectedKey: string) {
+  id.value = selectedId
+  key.value = selectedKey
+}
 </script>
 
 <template>
-  <div>oilFumeConcentration</div>
+  <el-row :gutter="20" class="h-100">
+    <el-col class="bg-white p-5 h-100" :span="6">
+      <OrgCompany class="grid-content" @selected="onSelected"></OrgCompany>
+    </el-col>
+    <el-col :span="18">
+      <div class="bg-white p-5 h-100">
+        <span>{{ id }}</span>
+        <br />
+        <span>{{ key }}</span>
+      </div>
+    </el-col>
+  </el-row>
 </template>

+ 136 - 21
src/views/overAnalysis/overTime.vue

@@ -1,8 +1,12 @@
 <script setup lang="ts">
 import VbDataTable from "@/components/Table/VbDataTable.vue"
-import { defineProps, reactive, ref, watch } from "vue"
+import { ref } from "vue"
 import moment from "moment"
 import type { Header } from "@/components/Table/table-partials/models"
+import type { DateSelectOption } from "@/components/select/DateRangeSelect.vue"
+import { useRouter } from "vue-router"
+const router = useRouter()
+
 const cols = ref<Array<Header>>([
   {
     name: "区域",
@@ -40,40 +44,154 @@ const cols = ref<Array<Header>>([
     width: 150,
   },
 ])
+const startDate = ref(new Date())
+const endDate = ref(new Date())
+const dateStr = ref(``)
+const dateValue = ref<[Date, Date]>([startDate.value, endDate.value])
+const selectValue = ref(0)
+const dates: Array<DateSelectOption> = [
+  {
+    text: "当日",
+    value: [new Date(), new Date()],
+  },
+  {
+    text: "近三日",
+    value: [moment(new Date()).add(-3, "d").toDate(), new Date()],
+  },
+  {
+    text: "近一周",
+    value: [moment(new Date()).add(-7, "d").toDate(), new Date()],
+  },
+  {
+    text: "近一月",
+    value: [moment(new Date()).add(-1, "M").toDate(), new Date()],
+  },
+  {
+    text: "本月",
+    value: [moment(new Date()).startOf("month").toDate(), new Date()],
+  },
+]
+
+const queryType = ref(0)
+const timeType = ref(0)
+const name = ref("区域")
 const tableSelect = ref([])
 const queryParams = ref({
-  query_type: 0,
-  time_type: 0,
+  query_type: queryType.value,
+  time_type: timeType.value,
   query_start_time: [moment(), moment()][0].format("YYYYMMDD"),
   query_end_time: [moment(), moment()][1].format("YYYYMMDD"),
 })
 const table = ref()
-const detail = function (v: any) {
-  console.log("DETAIL", v)
-  // if (table.value) {
-  //   table.value.search()
-  // }
-  queryParams.value.time_type = 1
-  //table.value.search(queryParams.value)
+
+function changeQueryType(type: number) {
+  queryType.value = type
+  name.value = type == 0 ? "区域" : type == 1 ? "菜系" : type == 2 ? "规模" : "类型"
+  queryParams.value = {
+    query_type: type,
+    time_type: 0,
+    query_start_time: moment().format("YYYYMMDD"),
+    query_end_time: moment().format("YYYYMMDD"),
+  }
 }
-function onSelectAll(isChecked: boolean, rows: any) {
-  console.log("ON_SELECT_ALL", isChecked, rows)
+function changeDate(v: Date[]) {
+  startDate.value = v[0]
+  endDate.value = v[1]
 }
-function c(c: boolean, row: any) {
-  console.log("=======", c, row, tableSelect.value)
+function search() {
+  queryParams.value = {
+    query_type: queryType.value,
+    time_type: timeType.value,
+    query_start_time: moment(startDate.value).format("YYYYMMDD"),
+    query_end_time: moment(endDate.value).format("YYYYMMDD"),
+  }
 }
-function s(v: any) {
-  console.log("SELECT", v)
+function reset() {
+  selectValue.value = 0
+  startDate.value = new Date()
+  endDate.value = new Date()
+  dateValue.value = [startDate.value, endDate.value]
+  dateStr.value = `${moment(startDate.value).format("YYYY-MM-DD")}至${moment(endDate.value).format("YYYY-MM-DD")}`
+  search()
+}
+function exported() {
+  let str = ""
+  for (const key in queryParams.value) {
+    str += `${key}=${queryParams.value[key]}&`
+  }
+  //console.log("/api/sys/overStandardAnalysis/exportAnalysis?" + str)
+  window.open("/api/sys/overStandardAnalysis/exportAnalysis?" + str)
+}
+const detail = function (v: any) {
+  console.log("DETAIL", v)
+  //TODO 详情页面未做
+  router.push({
+    path: "/overAnalysis/overTime/detail",
+    query: {
+      needPase: 1,
+      query_type: queryType.value,
+      name_code: v.name_code,
+      time_type: timeType.value,
+      query_start_time: moment(startDate.value).format("YYYYMMDD"),
+      query_end_time: moment(endDate.value).format("YYYYMMDD"),
+    },
+  })
 }
 </script>
 
 <template>
+  <div class="btn-group mb-3">
+    <button
+      class="btn btn-outline btn-light-primary"
+      :class="queryType == 0 ? 'active btn-active-primary' : ''"
+      @click="changeQueryType(0)"
+    >
+      区域
+    </button>
+    <button
+      class="btn btn-outline btn-light-primary"
+      :class="queryType == 1 ? 'active btn-active-primary' : ''"
+      @click="changeQueryType(1)"
+    >
+      菜系
+    </button>
+    <button
+      class="btn btn-outline btn-light-primary"
+      :class="queryType == 2 ? 'active btn-active-primary' : ''"
+      @click="changeQueryType(2)"
+    >
+      规模
+    </button>
+    <button
+      class="btn btn-outline btn-light-primary"
+      :class="queryType == 3 ? 'active btn-active-primary' : ''"
+      @click="changeQueryType(3)"
+    >
+      类型
+    </button>
+  </div>
+  <el-form class="mb-3 align-items-center" :inline="true" label-width="90px">
+    <DateRangeSelect
+      v-model:date-value="dateValue"
+      v-model:select-value="selectValue"
+      :date-array="dates"
+      :select-class="'mb-0 align-items-center'"
+      :date-class="'mb-0 align-items-center'"
+      @change="changeDate"
+    />
+    <el-form-item class="mb-0 align-items-center">
+      <el-button class="ms-3 mt-0 btn btn-sm btn-primary" @click="search">查询</el-button>
+      <el-button class="ms-3 mt-0 btn btn-sm btn-light-primary btn-outline" @click="reset">重置</el-button>
+      <el-button class="ms-3 mt-0 btn btn-sm btn-light-info btn-outline" @click="exported">导出</el-button>
+    </el-form-item>
+  </el-form>
   <!-- 
     :fixed-column="true"
     :fixed-number="2"
     :fixed-right-number="1"
     :scroll="{ x: 2000 }"
      -->
+
   <VbDataTable
     ref="table"
     :header="cols"
@@ -84,12 +202,9 @@ function s(v: any) {
     :pagination="false"
     :has-checkbox="false"
     checkbox-field="name_code"
-    @on-items-select="s"
-    @on-items-change="c"
-    @on-items-all-change="onSelectAll"
   >
-    <template v-slot:name_header="{ row }">
-      <span class="text-danger text-center">{{ row.name }}</span>
+    <template v-slot:name_header="">
+      <span class="text-danger text-center">{{ name }}</span>
     </template>
     <template #name="{ row }">
       <div class="text-danger w-100">{{ row.name }}</div>