|
|
@@ -1,30 +1,41 @@
|
|
|
<template>
|
|
|
<Card title="采集趋势" :loading="loading">
|
|
|
- <template #extra>
|
|
|
+ <template #extra v-if="!hiddens">
|
|
|
<div class="condition">
|
|
|
<div class="selct" style="display: inline-block">
|
|
|
<!-- <span style="margin-right:15px"></span> -->
|
|
|
- <Select
|
|
|
- v-model:value="type"
|
|
|
+ <ApiTreeSelect
|
|
|
+ v-model:value="SearchData.districtCode"
|
|
|
style="width: 100px; margin-right: 8px"
|
|
|
+ :dropdown-match-select-width="false"
|
|
|
+ :dropdown-style="{ maxHeight: '400px', overflow: 'auto', minWidth: '300px' }"
|
|
|
placeholder="全部地区"
|
|
|
- :options="typeOptions"
|
|
|
+ show-search
|
|
|
+ tree-node-filter-prop="label"
|
|
|
+ :getPopupContainer="(trigger) => trigger.parentNode"
|
|
|
+ allowClear
|
|
|
+ :treeData="district"
|
|
|
@change="handleType"
|
|
|
/>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="selct" style="display: inline-block">
|
|
|
- <!-- <span style="margin-right:15px">颗粒度</span> -->
|
|
|
+ <div class="selct" style="display: inline-block" v-if="jyType.length">
|
|
|
<Select
|
|
|
- v-model:value="value"
|
|
|
+ v-model:value="SearchData.jyType"
|
|
|
style="width: 100px; margin-right: 8px"
|
|
|
placeholder="全部警种"
|
|
|
- :options="options"
|
|
|
+ allowClear
|
|
|
+ :options="jyType"
|
|
|
@change="handleData"
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="selct" style="display: inline-block; margin-right: 0px">
|
|
|
- <RangePicker v-model:value="selectTime" :picker="picker" />
|
|
|
+ <RangePicker
|
|
|
+ @change="handleTime"
|
|
|
+ valueFormat="YYYY-MM-DD"
|
|
|
+ :getCalendarContainer="(trigger) => trigger.parentNode"
|
|
|
+ v-model:value="SearchData.timeList"
|
|
|
+ :picker="picker"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -36,46 +47,33 @@
|
|
|
// import { dateUtil } from '/@/utils/dateUtil';
|
|
|
</script>
|
|
|
<script lang="ts" setup>
|
|
|
+ import { sceneTrend } from '/@/api/statistics/index';
|
|
|
import { Card, Select, DatePicker } from 'ant-design-vue';
|
|
|
const { RangePicker } = DatePicker;
|
|
|
- import { ref, Ref, watch } from 'vue';
|
|
|
- // import type { dataItemType } from './props';
|
|
|
+ import ApiTreeSelect from '/@/components/Form/src/components/ApiTreeSelect.vue';
|
|
|
+ import { ref, Ref, onMounted } from 'vue';
|
|
|
+ // import { district, jyType } from '/@/views/statistics/scene/data';
|
|
|
import { useECharts } from '/@/hooks/web/useECharts';
|
|
|
import type { Dayjs } from 'dayjs';
|
|
|
const props = defineProps({
|
|
|
loading: Boolean,
|
|
|
+ hiddens: Boolean,
|
|
|
...basicProps,
|
|
|
});
|
|
|
-
|
|
|
+ console.log('district', props);
|
|
|
+ const district = ref(props.district);
|
|
|
+ const jyType = ref(props.jyType);
|
|
|
+ const hiddens = ref(props.hiddens || false);
|
|
|
type RangeValue = [Dayjs, Dayjs];
|
|
|
const picker = ref('date');
|
|
|
- const value = ref(null);
|
|
|
- const selectTime = ref<RangeValue>();
|
|
|
- const options = ref<SelectProps['options']>([
|
|
|
- {
|
|
|
- value: '1',
|
|
|
- label: '日',
|
|
|
- },
|
|
|
- {
|
|
|
- value: '2',
|
|
|
- label: '周',
|
|
|
- },
|
|
|
- {
|
|
|
- value: '2',
|
|
|
- label: '月',
|
|
|
- },
|
|
|
- ]);
|
|
|
- const type = ref(null);
|
|
|
- const typeOptions = ref<SelectProps['options']>([
|
|
|
- {
|
|
|
- value: '1',
|
|
|
- label: '数量',
|
|
|
- },
|
|
|
- {
|
|
|
- value: '2',
|
|
|
- label: '金额',
|
|
|
- },
|
|
|
- ]);
|
|
|
+ const SearchData = ref({
|
|
|
+ timeList: [],
|
|
|
+ jyType: null,
|
|
|
+ platformId: props.platformId,
|
|
|
+ cameraType: props.cameraType,
|
|
|
+ districtCode: null,
|
|
|
+ type: 2,
|
|
|
+ });
|
|
|
const viewStaticsData = ref<number[]>([1, 5, 6, 8, 55, 1, 5, 6, 8, 1]);
|
|
|
const shareStaticsData = ref<number[]>([2, 55, 10, 2, 6, 1, 5, 6, 8, 1]);
|
|
|
const yixStringData = ref<string[]>(['11', '22', '33', '44', 'ss', '11', '22', '33', '44', 'ss']);
|
|
|
@@ -83,17 +81,40 @@
|
|
|
const chartRef = ref<HTMLDivElement | null>(null);
|
|
|
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
|
|
|
function handleData(val) {
|
|
|
- let obj = {
|
|
|
- 1: 'date',
|
|
|
- 2: 'week',
|
|
|
- 3: 'month',
|
|
|
- };
|
|
|
- console.log('handleChange', val);
|
|
|
+ console.log('handleData', val, SearchData.value.jyType);
|
|
|
+ // SearchData.value.jyType = val;
|
|
|
+ getList();
|
|
|
}
|
|
|
+ function handleTime(val) {
|
|
|
+ console.log('handleChange', val, SearchData.value.timeList);
|
|
|
+ // SearchData.value.districtCode = val;
|
|
|
+ getList();
|
|
|
+ }
|
|
|
+
|
|
|
function handleType(val) {
|
|
|
console.log('handleChange', val);
|
|
|
+ // SearchData.value.districtCode = val;
|
|
|
+ getList();
|
|
|
}
|
|
|
function handlesetOptions() {
|
|
|
+ let series = [
|
|
|
+ {
|
|
|
+ data: shareStaticsData.value,
|
|
|
+ type: 'line',
|
|
|
+ itemStyle: { color: '#4cca73' },
|
|
|
+ // barMaxWidth: 80,
|
|
|
+ name: '采集场景',
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ if (!hiddens.value) {
|
|
|
+ series.unshift({
|
|
|
+ data: viewStaticsData.value,
|
|
|
+ type: 'line',
|
|
|
+ itemStyle: { color: '#38a0ff' },
|
|
|
+ // barMaxWidth: 80,
|
|
|
+ name: '采集人数',
|
|
|
+ });
|
|
|
+ }
|
|
|
setOptions({
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
@@ -108,10 +129,8 @@
|
|
|
orient: 'horizontal',
|
|
|
bottom: 0,
|
|
|
},
|
|
|
- // grid: { left: '2%', right: '2%', top: '10%', bottom: '10%', containLabel: true },
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
- // data: [...new Array(30)].map((_item, index) => `${index + 1}日`),
|
|
|
data: yixStringData.value,
|
|
|
},
|
|
|
yAxis: {
|
|
|
@@ -119,54 +138,57 @@
|
|
|
max: maxSize.value,
|
|
|
splitNumber: 4,
|
|
|
},
|
|
|
- series: [
|
|
|
- {
|
|
|
- data: viewStaticsData.value,
|
|
|
- type: 'line',
|
|
|
- itemStyle: { color: '#38a0ff' },
|
|
|
- // barMaxWidth: 80,
|
|
|
- name: '用户浏览量',
|
|
|
- },
|
|
|
- {
|
|
|
- data: shareStaticsData.value,
|
|
|
- type: 'line',
|
|
|
- itemStyle: { color: '#4cca73' },
|
|
|
- // barMaxWidth: 80,
|
|
|
- name: '用户分享数',
|
|
|
- },
|
|
|
- ],
|
|
|
+ series: series,
|
|
|
+ // [
|
|
|
+ // {
|
|
|
+ // data: viewStaticsData.value,
|
|
|
+ // type: 'line',
|
|
|
+ // itemStyle: { color: '#38a0ff' },
|
|
|
+ // // barMaxWidth: 80,
|
|
|
+ // name: '采集人数',
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // data: shareStaticsData.value,
|
|
|
+ // type: 'line',
|
|
|
+ // itemStyle: { color: '#4cca73' },
|
|
|
+ // // barMaxWidth: 80,
|
|
|
+ // name: '采集场景',
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
});
|
|
|
}
|
|
|
- // props.viewStatics,
|
|
|
- watch(
|
|
|
- // () => [props.viewStatics, props.shareStatics],
|
|
|
- // ([data1, data2]) => {
|
|
|
- () => props.loading,
|
|
|
- () => {
|
|
|
- console.log('viewStatics-data');
|
|
|
- // viewStaticsData.value = data1.reduce<number[]>(
|
|
|
- // (prev: number[], current) => prev.concat(Number(current.amount)),
|
|
|
- // [],
|
|
|
- // );
|
|
|
-
|
|
|
- // yixStringData.value = data1.reduce<string[]>(
|
|
|
- // (prev: string[], current) => prev.concat(current.date),
|
|
|
- // [],
|
|
|
- // );
|
|
|
- // shareStaticsData.value = data2.reduce<number[]>(
|
|
|
- // (prev: number[], current) => prev.concat(Number(current.amount)),
|
|
|
- // [],
|
|
|
- // );
|
|
|
-
|
|
|
- const maxNumber = Math.max(...viewStaticsData.value.concat(shareStaticsData.value));
|
|
|
- const pow = Math.pow(10, maxNumber.toString().length - 1);
|
|
|
- maxSize.value = maxNumber > 10 ? Math.floor(maxNumber / 10) * 10 + pow * 2 : 10;
|
|
|
- console.log('maxSize', maxSize.value);
|
|
|
- handlesetOptions();
|
|
|
- },
|
|
|
- {
|
|
|
- immediate: true,
|
|
|
- deep: true,
|
|
|
- },
|
|
|
- );
|
|
|
+ async function getList() {
|
|
|
+ const xData = [],
|
|
|
+ data1 = [],
|
|
|
+ data2 = [];
|
|
|
+ const list = await sceneTrend(SearchData.value);
|
|
|
+ console.log('sceneTrend', list, hiddens.value);
|
|
|
+ // const list1 = list.find((ele) => ele.type == 'scene') || { list: [] };
|
|
|
+ // const list2 = list.find((ele) => ele.type == 'user') || { list: [] };
|
|
|
+ list.map((ele) => {
|
|
|
+ xData.push(ele.groupKey);
|
|
|
+ data1.push(ele.sceneCount || 0);
|
|
|
+ data2.push(ele.userCount || 0);
|
|
|
+ });
|
|
|
+ // list2.list.map((ele) => {
|
|
|
+ // data2.push(ele.totalCount || 0);
|
|
|
+ // });
|
|
|
+ shareStaticsData.value = data1;
|
|
|
+ viewStaticsData.value = data2;
|
|
|
+ yixStringData.value = xData;
|
|
|
+ const maxNumber = Math.max(...viewStaticsData.value.concat(shareStaticsData.value));
|
|
|
+ const pow = Math.pow(10, maxNumber.toString().length - 1);
|
|
|
+ maxSize.value = maxNumber > 10 ? Math.floor(maxNumber / 10) * 10 + pow * 2 : 10;
|
|
|
+ console.log(
|
|
|
+ 'maxSize',
|
|
|
+ maxSize.value,
|
|
|
+ viewStaticsData.value,
|
|
|
+ shareStaticsData.value,
|
|
|
+ yixStringData.value,
|
|
|
+ );
|
|
|
+ handlesetOptions();
|
|
|
+ }
|
|
|
+ onMounted(() => {
|
|
|
+ getList();
|
|
|
+ });
|
|
|
</script>
|