smartsearch/vue/src/views/position/test.vue

<template>
  <div class="card-search">
    <a-divider orientation="left">历史搜索使用方式</a-divider>
    <a-form ref="formRef" name="advanced_search" class="ant-advanced-search-form"
            :model="formState"
            @finish="onFinish">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item
            name="keyString"
            label="关键字"
            :label-col="{span:3}">
            <!--AutoComplete继承至vue-->
            <QueryHistoryComplete ref="queryHistoryComplete" v-model:value="formState.keyString"></QueryHistoryComplete>
          </a-form-item>
        </a-col>
        <a-col  :span="6" style="text-align: left">
          <a-button type="primary" html-type="submit" @click="onFinish">查询</a-button>
        </a-col>
      </a-row>
    </a-form>

    <a-divider orientation="left">热门搜索使用方式，实际应用改样式即可</a-divider>
    <div style="width: 600px;">
      <!--热门搜索历史使用示例，实际应用改样式即可-->
      <QueryHistoryList ref="queryHistoryList" :maxRows="20"></QueryHistoryList>
    </div>

    <a-divider orientation="left">列表单元格中显示简单的曲线图</a-divider>
    <div style="width:1000px;">
      <a-table :columns="columns" :data-source="data">
        <template #bodyCell="{ column, text }">
          <template v-if="column.dataIndex === 'chart'">
            <div style="height:40px">
              <!--列表单元格中显示曲线图，数据需要根据业务库整理-->
              <!--timeType day month year-->
              <!--dataType gas oil-->
              <ChartCell :timeType="('month')" :dataType="('oil')" :wellId="('吉45-144(A2)')" :lineColor="('#FF0000')"></ChartCell>
            </div>
          </template>
        </template>
      </a-table>
    </div>

    <a-divider orientation="left">Grid类型的图表</a-divider>
    <div style="width:1200px;">
      <ChartProdDynmics :wellId="('吉45-144(A2)')"></ChartProdDynmics>
    </div>

    <a-divider orientation="left">地图</a-divider>
    <div style="width:1000px;height: 400px">
      <ChartMap :wellId="('吉45-144(A2)')"></ChartMap>
    </div>
  </div>
</template>

<script  lang="ts">
import {ref,defineComponent,watch} from "vue";
import { useRoute} from 'vue-router';
import QueryHistoryList from '@/components/basic/querylog/history-list.vue'
import QueryHistoryComplete from '@/components/basic/querylog/history-complete.vue'
import ChartCell from '@/components/basic/chart/chart-cell.vue'
import ChartProdDynmics from '@/components/basic/chart/chart-prod-dynamics.vue'
import ChartMap from '@/components/basic/chart/chart-map.vue'

export default defineComponent({
  name: 'QueryTest',
  components: {QueryHistoryList, QueryHistoryComplete, ChartCell, ChartProdDynmics, ChartMap},
  setup() {
    const route = useRoute();
    const queryHistoryComplete = ref<typeof QueryHistoryComplete>();
    const formState = ref({
      keyString: ""
    });

    console.log(route, formState);

    watch(formState.value, async (newQuestion) => {
      console.log("formState", newQuestion);
    })

    const onFinish = () => {
      //记录搜索关键字日志
      (queryHistoryComplete.value as any).saveHistory(formState.value.keyString);
    };

    const columns = [
      { title: 'Name', dataIndex: 'name', key: 'name', },
      { title: 'Age', dataIndex: 'age', key: 'age', width: 80, },
      { title: 'Address', dataIndex: 'address', key: 'address 1', ellipsis: true, },
      { title: 'Long Column Long Column Long Column', dataIndex: 'address', key: 'address 2', ellipsis: true},
      { title: 'ChartCell', dataIndex: 'chart', key: 'ChartCell', width:160}
    ];

    const data = [
      { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park, New York No. 1 Lake Park', tags: ['nice', 'developer']},
      { key: '2', name: 'Jim Green', age: 42, address: 'London No. 2 Lake Park, London No. 2 Lake Park', tags: ['loser']},
      { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park', tags: ['cool', 'teacher']},
    ];

    return {
      formState,
      onFinish,
      queryHistoryComplete,

      columns,
      data
    };
  }
});
</script>