日期选择

src/views/datamanager/platformdata/PlatformData.vue

@@ -1,77 +1,42 @@
 <template>
-    <div class="platform-content">
-        <div class="flex platform-head-tabs">
-          <div
-            class="flex justify-center items-center tab-item"
-            :class="{ 'tab-item-active': activeName === 'count' }"
-            @click="activeName = 'count'"
-          >
-            访问次数统计
-          </div>
-          <div
-            class="flex justify-center items-center tab-item"
-            :class="{ 'tab-item-active': activeName === 'score' }"
-            @click="activeName = 'score'"
-          >
-            积分统计
-          </div>
-        </div>
-        <Query v-if="activeName === 'count'" />
-        <Score v-else />
+  <div class="platform-content">
+    <div class="flex platform-head-tabs">
+      <div
+        class="flex justify-center items-center tab-item"
+        :class="{ 'tab-item-active': activeName === 'count' }"
+        @click="activeName = 'count'"
+      >
+        访问次数统计
+      </div>
+      <div
+        class="flex justify-center items-center tab-item"
+        :class="{ 'tab-item-active': activeName === 'score' }"
+        @click="activeName = 'score'"
+      >
+        积分统计
+      </div>
     </div>
+    <Query v-if="activeName === 'count'" />
+    <Score v-else />
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-// import type { TabsPaneContext } from 'element-plus';
-import Query from './compoents/query/Query.vue'
-import Score from './compoents/score/Score.vue';
+  import { ref } from 'vue';
+  import Query from './compoents/query/Query.vue';
+  import Score from './compoents/score/Score.vue';
 
-const activeName = ref('count');
-export type LabelType = 'count' | 'score';
-// const currentLabel = ref<LabelType>('count');
-
-// const handleClick = (tab: TabsPaneContext) => {
-//     console.log(tab.paneName);
-//     if (tab.paneName === 'count') {
-//         currentLabel.value = 'count';
-//     } else {
-//         currentLabel.value = 'score';
-//     }
-// };
+  const activeName = ref('count');
+  export type LabelType = 'count' | 'score';
 </script>
 
-<!-- <style>
-.demo-tabs>.el-tabs__content {
-    padding: 32px;
-    color: #6b778c;
-    font-size: 32px;
-    font-weight: 600;
-}
-/* .el-tabs__content:hover {
-    color
-} */
-
-.el-tabs__item:hover {
-    color: #6b778c;
-    /* color: rgb(53, 120, 220); */
-    /* background-color: rgb(53, 120, 220); */
-}
-
-.el-tabs__item.is-active {
-    /* color: rgb(221, 239, 255); */
-    background-color: rgb(221, 239, 255);
-    border: 1px solid #4693f1;
-}
-</style> -->
-
 <style scoped lang="scss">
-.platform-content {
-    height: calc(100vh - 64px - 12px);
+  .platform-content {
+    height: calc(100vh - 64px - 18px);
     background-color: rgba(255, 255, 255, 1);
     padding: 21px;
-}
-.platform-head {
+  }
+  .platform-head {
     height: 56px;
 
     &-name {
@@ -84,6 +49,20 @@ export type LabelType = 'count' | 'score';
     &-tabs {
       margin: 18px 0;
 
+      .tab-item {
+        width: 188px;
+        height: 38px;
+        background: #fafafa;
+        border: 1px solid #d9d9d9;
+        cursor: pointer;
+
+        &-active {
+          color: rgba(22, 119, 255, 1);
+          background: #e2eefe;
+          border: 1px solid #1890ff;
+        }
+      }
+
       :first-child {
         border-radius: 8px 0px 0px 8px;
       }
@@ -93,18 +72,4 @@ export type LabelType = 'count' | 'score';
       }
     }
   }
-  
-  .tab-item {
-    width: 188px;
-    height: 38px;
-    background: #fafafa;
-    border: 1px solid #d9d9d9;
-    cursor: pointer;
-
-    &-active {
-    color:rgba(22, 119, 255, 1);
-      background: #e2eefe;
-      border: 1px solid #1890ff;
-    }
-  }
-</style>
+</style>

src/views/datamanager/platformdata/charts/BarChart.vue

@@ -0,0 +1,5 @@
+<template> <div id="bar-chart" ref="barChart" class="chart"></div> </template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss"></style>

src/views/datamanager/platformdata/charts/LineChart.vue

@@ -0,0 +1,5 @@
+<template> <div id="line-chart" ref="lineChart" class="chart"></div> </template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss"></style>

src/views/datamanager/platformdata/compoents/ChartIndex.vue

@@ -1,354 +0,0 @@
-<template>
-    <el-card>
-        <template #header>
-            <div>title</div>
-            <!-- <div v-if="isShowAll === false" style="text-align: center;">
-                <el-button type="text" @click="currentDayChart">今日</el-button>
-                <el-button type="text" @click="currentMonthChart">本月</el-button>
-                <el-button type="text" @click="allDatasChart">累计</el-button>
-            </div>
-            <div v-else>
-                <el-form inline ref="ruleFormRef" :model="form" style="width:600px">
-                    <el-form-item style="margin-top: 20px;">
-                        <el-select v-model="form.workspace" placeholder="请选择车间" style="width: 140px ;text-align: left;">
-                            <el-option v-for="item in departmentList" :key="item.deptId" :value="item.deptName"
-                                :label="item.deptName"></el-option>
-                        </el-select>
-                    </el-form-item>
-                    <el-button style="text-align: left;width: 100px;" type="primary"
-                        @click="getDepartmentData">生成柱状图</el-button>
-                    <el-button style="text-align: left; margin-left: 180px;" type="text"
-                        @click="currentDayChart">今日</el-button>
-                    <el-button style="text-align: left;" type="text" @click="currentMonthChart">本月</el-button>
-                    <el-button style="text-align: left;" type="text" @click="allDatasChart">累计</el-button>
-                </el-form>
-            </div> -->
-        </template>
-        <div id="container" style="width: 600px; height: 470px;margin-left: 20px;"></div>
-    </el-card>
-</template>
-
-<script setup lang="ts">
-// import * as echarts from 'echarts';
-// import { ref, markRaw } from 'vue';
-// import { watch } from 'vue';
-// import { onMounted } from 'vue';
-// import { DepartMentModel, VisitsModel, getDeptList } from '@/api/datamanagement/dataplatform';
-
-// interface DataOption {
-//     title: {},//标题
-//     tooltip: {},//虚线
-//     calculate: Boolean,
-//     xAxis: {},
-//     yAxis: {},
-//     series: SerialModel[]
-// }
-
-// const visible = ref(false);
-// const userId = ref(1);
-// const isShowAll = ref(false);//控制标题是否居中
-// const chart = ref<any>("");
-
-// const departmentList = ref<DepartMentModel[]>([]);
-// const getDepartmentList = () => {
-//     getDeptList().then((res) => {
-//         departmentList.value = res;
-//     });
-// };
-
-// watch(
-//     () => props.dialogVisible,
-//     (newvisible) => {
-//         visible.value = newvisible
-//         console.log('tablechart', visible.value)
-//     },
-//     { immediate: true },
-// )
-// watch(
-//     () => props.userId,
-//     (newuserId) => {
-//         userId.value = newuserId
-//         console.log('tablechart-data:', userId.value)
-//         currentDayChart()
-//     },
-//     { immediate: true },
-// )
-
-// const form = ref({
-//     workspace: '',
-// });
-
-// const props = defineProps<{
-//     stuffNo?: number | string | undefined,
-    
-    // currentDayChart: (d: number) => Promise<VisitsModel[]>,
-    // currentMonthChart: (d: number) => Promise<VisitsModel[]>,
-    // allDatasChart: (d: number) => Promise<VisitsModel[]>,
-    // getDepartmentData: () => Promise<unknown>,
-// }>();
-
-// function initChart(data: DataOption, title: [], series: []) {
-//     data.xAxis = {};
-//     const dataseries = ref<SerialModel[]>([]);
-//     const type = ref('category');
-//     const horidata = ref([]) //todo，获取横坐标
-//     const nameLocation = ref('center');
-//     const axisLabel = { interval: 0, rotate: 30 };
-//     const nameTextStyle = {
-//         color: 'red',
-//         fontSize: 6,
-//     };
-//     horidata.value = title;
-//     data.xAxis = { type: type.value, data: horidata.value, nameLocation: nameLocation.value, axisLabel: axisLabel, nameTextStyle: nameTextStyle }
-//     const seriesdata = ref<SerialModel>({
-//         data: [],//todo，获取数值,
-//         type: 'bar'
-//     })
-//     seriesdata.value.data = series;
-//     dataseries.value.push(seriesdata.value)
-//     data.series = dataseries.value;
-
-//     console.log('data.xAxis.data', data.xAxis);
-//     console.log('data.yAxis.data', data.series)
-//     console.log(data)
-//     createChart(data);
-// }
-
-// // 查看今日数据
-// function currentDayChart() {
-//     isShowAll.value = false;
-//     console.log('table-chart-currentday');
-//     const daytitle = ref();
-//     const seriesdata = ref();
-//     props.currentDayChart(userId.value).then(res => {
-//         daytitle.value = getHorizontalTitle(res);
-//         seriesdata.value = getVorizontalData(res);
-//         console.log('查看今日数据', res);
-//         console.log('查看今日数据', daytitle);
-//         console.log('查看今日数据', seriesdata);
-//         initChart(optionday.value, daytitle.value, seriesdata.value)
-//     })
-
-// };
-
-// // 查看本月数据
-// function currentMonthChart() {
-//     isShowAll.value = false;
-//     console.log('currentmonth:', userId.value);
-//     const monthtitle = ref();
-//     const monthseriesdata = ref()
-//     props.currentMonthChart(userId.value).then(res => {
-//         console.log('table-chart-currentmonth:', res);
-//         monthtitle.value = getHorizontalTitle(res);
-//         monthseriesdata.value = getVorizontalData(res);
-//         console.log('查看今日数据', res);
-//         console.log('查看今日数据', monthtitle);
-//         console.log('查看今日数据', monthseriesdata);
-//         initChart(optionmonth.value, monthtitle.value, monthseriesdata.value)
-//     })
-// };
-
-// // 查看累计数据
-// function allDatasChart() {
-//     isShowAll.value = true;
-//     console.log('alldata:', userId.value);
-//     const alltitle = ref();
-//     const allseriesdata = ref()
-//     props.allDatasChart(userId.value).then(res => {
-//         console.log(res);
-//         alltitle.value = getHorizontalTitle(res);
-//         allseriesdata.value = getVorizontalData(res);
-//         console.log('查看今日数据', res);
-//         console.log('查看今日数据', alltitle);
-//         console.log('查看今日数据', allseriesdata);
-//         initChart(optionall.value, alltitle.value, allseriesdata.value)
-//     })
-// }
-
-// interface SerialModel {
-//     data: [],
-//     type: string,
-// }
-
-// // 创建图表
-// function createChart(option: DataOption) {
-//     chart.value = markRaw(echarts.init(document.getElementById('container') as HTMLDivElement))
-
-//     chart.value.setOption(option);
-
-//     // 大小自适应
-//     window.addEventListener('resize', () => {
-//         chart.value.resize();
-//     })
-// }
-
-// // 创建柱状图
-// function getDepartmentData() {
-//     // todo,原型未定义
-// }
-
-// function getHorizontalTitle(data: VisitsModel[]) {
-//     console.log('getHorizontalTitle:', data)
-//     const title = ref<string[]>([]);
-//     for (var i = 0; i < data.length; i++) {
-//         title.value.push(data[i].workshopName)
-//         console.log('getHorizontalTitle-data-i', data[i].workshopName)
-//     }
-//     console.log('title:', title);
-//     return title;
-// }
-
-// function getVorizontalData(data: VisitsModel[]) {
-//     console.log('getvorizontaldata:', data)
-//     const seriesData = ref<number[]>([]);
-//     for (var i = 0; i < data.length; i++) {
-//         seriesData.value.push(data[i].visits)
-//         console.log('getHorizontalTitle-data-i', data[i].visits)
-//     }
-//     console.log('seriesData:', seriesData);
-//     return seriesData;
-// }
-
-// const optionday = ref();
-// optionday.value = {
-//     title: {
-//         text: '各车间地点访问次数柱状图(天)',
-//         x: "center", //设置标题位置居中
-//         textStyle: {//设置主标题的文字风格
-//             fontSize: 10 //文字大小
-//         },
-//     },//标题
-//     tooltip: {
-//         trigger: 'axis'
-//     },//虚线
-//     calculate: true,//显示数据
-//     xAxis: {
-//         type: 'category',
-//         data: [],//todo，获取横坐标
-//         nameLocation: 'center',
-//         axisLabel: { interval: 0, rotate: 30 },
-//         nameTextStyle: {
-//             color: 'red',
-//             fontSize: 6,
-
-//         }
-//     },
-//     yAxis: {
-//         type: 'value',
-//         name: '访问次数',
-//         nameTextStyle: {
-//             color: 'black',
-//             fontSize: 8,
-//             padding: 0,
-//         }
-
-//     },
-//     series: [
-//         {
-//             data: [],//todo，获取数值,
-//             type: 'bar'
-//         }
-//     ]
-// };
-
-
-// const optionmonth = ref();
-// optionmonth.value = {
-//     title: {
-//         text: '各车间地点访问次数柱状图(月)',
-//         x: "center", //设置标题位置居中
-//         textStyle: {//设置主标题的文字风格
-//             fontSize: 10 //文字大小
-//         },
-
-
-
-//     },//标题
-//     tooltip: {
-//         trigger: 'axis'
-//     },//虚线
-//     calculate: true,//显示数据
-//     xAxis: {
-//         type: 'category',
-//         data: [],//todo，获取横坐标
-//         nameLocation: 'center',
-//         axisLabel: { interval: 0, rotate: 30 },
-//         nameTextStyle: {
-//             color: 'red',
-//             fontSize: 6,
-
-//         }
-//     },
-//     yAxis: {
-//         type: 'value',
-//         name: '访问次数',
-//         nameTextStyle: {
-//             color: 'black',
-//             fontSize: 8,
-//             padding: 0,
-//         }
-
-//     },
-//     series: [
-//         {
-//             data: [],//todo，获取数值,
-//             type: 'bar'
-//         }
-//     ]
-// };
-
-
-// const optionall = ref();
-// optionall.value = {
-//     title: {
-//         text: '各车间地点访问次数柱状图(汇总)',
-//         x: "center", //设置标题位置居中
-//         textStyle: {//设置主标题的文字风格
-//             fontSize: 10 //文字大小
-//         },
-
-
-
-//     },//标题
-//     tooltip: {
-//         trigger: 'axis'
-//     },//虚线
-//     calculate: true,//显示数据
-//     xAxis: {
-//         type: 'category',
-//         data: [],//todo，获取横坐标
-//         nameLocation: 'center',
-//         axisLabel: { interval: 0, rotate: 30 },
-//         nameTextStyle: {
-//             color: 'red',
-//             fontSize: 6,
-
-//         }
-//     },
-//     yAxis: {
-//         type: 'value',
-//         name: '访问次数',
-//         nameTextStyle: {
-//             color: 'black',
-//             fontSize: 8,
-//             padding: 0,
-//         }
-
-//     },
-//     series: [
-//         {
-//             data: [],//todo，获取数值,
-//             type: 'bar'
-//         }
-//     ]
-// };
-
-
-// onMounted(() => {
-//     isShowAll.value = false;
-//     getDepartmentList();
-// })
-
-</script>
-
-<style scoped></style>

src/views/datamanager/platformdata/compoents/common/ChartIndex.vue

@@ -0,0 +1,358 @@
+<template>
+  <Timenation />
+  <BarChart />
+  <LineChart />
+  <!-- <div v-if="isShowAll === false" style="text-align: center">
+    <el-button type="text" @click="currentDayChart">今日</el-button>
+    <el-button type="text" @click="currentMonthChart">本月</el-button>
+    <el-button type="text" @click="allDatasChart">累计</el-button>
+  </div>
+  <div v-else>
+    <el-form inline ref="ruleFormRef" :model="form" style="width: 600px">
+      <el-form-item style="margin-top: 20px">
+        <el-select
+          v-model="form.workspace"
+          placeholder="请选择车间"
+          style="width: 140px; text-align: left"
+        >
+          <el-option
+            v-for="item in departmentList"
+            :key="item.deptId"
+            :value="item.deptName"
+            :label="item.deptName"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-button style="text-align: left; width: 100px" type="primary" @click="getDepartmentData"
+        >生成柱状图</el-button
+      >
+      <el-button style="text-align: left; margin-left: 180px" type="text" @click="currentDayChart"
+        >今日</el-button
+      >
+      <el-button style="text-align: left" type="text" @click="currentMonthChart">本月</el-button>
+      <el-button style="text-align: left" type="text" @click="allDatasChart">累计</el-button>
+    </el-form>
+  </div> -->
+  <!-- <div id="container" style="width: 600px; height: 470px; margin-left: 20px"></div> -->
+</template>
+
+<script setup lang="ts">
+  import Timenation from './Timenation.vue';
+  import BarChart from '../../charts/BarChart.vue';
+  import LineChart from '../../charts/LineChart.vue';
+
+  // import * as echarts from 'echarts';
+  // import { ref, markRaw } from 'vue';
+  // import { watch } from 'vue';
+  // import { onMounted } from 'vue';
+  // import { DepartMentModel, VisitsModel, getDeptList } from '@/api/datamanagement/dataplatform';
+
+  // interface DataOption {
+  //     title: {},//标题
+  //     tooltip: {},//虚线
+  //     calculate: Boolean,
+  //     xAxis: {},
+  //     yAxis: {},
+  //     series: SerialModel[]
+  // }
+
+  // const visible = ref(false);
+  // const userId = ref(1);
+  // const isShowAll = ref(false);//控制标题是否居中
+  // const chart = ref<any>("");
+
+  // const departmentList = ref<DepartMentModel[]>([]);
+  // const getDepartmentList = () => {
+  //     getDeptList().then((res) => {
+  //         departmentList.value = res;
+  //     });
+  // };
+
+  // watch(
+  //     () => props.dialogVisible,
+  //     (newvisible) => {
+  //         visible.value = newvisible
+  //         console.log('tablechart', visible.value)
+  //     },
+  //     { immediate: true },
+  // )
+  // watch(
+  //     () => props.userId,
+  //     (newuserId) => {
+  //         userId.value = newuserId
+  //         console.log('tablechart-data:', userId.value)
+  //         currentDayChart()
+  //     },
+  //     { immediate: true },
+  // )
+
+  // const form = ref({
+  //     workspace: '',
+  // });
+
+  // const props = defineProps<{
+  //     stuffNo?: number | string | undefined,
+
+  // currentDayChart: (d: number) => Promise<VisitsModel[]>,
+  // currentMonthChart: (d: number) => Promise<VisitsModel[]>,
+  // allDatasChart: (d: number) => Promise<VisitsModel[]>,
+  // getDepartmentData: () => Promise<unknown>,
+  // }>();
+
+  // function initChart(data: DataOption, title: [], series: []) {
+  //     data.xAxis = {};
+  //     const dataseries = ref<SerialModel[]>([]);
+  //     const type = ref('category');
+  //     const horidata = ref([]) //todo，获取横坐标
+  //     const nameLocation = ref('center');
+  //     const axisLabel = { interval: 0, rotate: 30 };
+  //     const nameTextStyle = {
+  //         color: 'red',
+  //         fontSize: 6,
+  //     };
+  //     horidata.value = title;
+  //     data.xAxis = { type: type.value, data: horidata.value, nameLocation: nameLocation.value, axisLabel: axisLabel, nameTextStyle: nameTextStyle }
+  //     const seriesdata = ref<SerialModel>({
+  //         data: [],//todo，获取数值,
+  //         type: 'bar'
+  //     })
+  //     seriesdata.value.data = series;
+  //     dataseries.value.push(seriesdata.value)
+  //     data.series = dataseries.value;
+
+  //     console.log('data.xAxis.data', data.xAxis);
+  //     console.log('data.yAxis.data', data.series)
+  //     console.log(data)
+  //     createChart(data);
+  // }
+
+  // // 查看今日数据
+  // function currentDayChart() {
+  //     isShowAll.value = false;
+  //     console.log('table-chart-currentday');
+  //     const daytitle = ref();
+  //     const seriesdata = ref();
+  //     props.currentDayChart(userId.value).then(res => {
+  //         daytitle.value = getHorizontalTitle(res);
+  //         seriesdata.value = getVorizontalData(res);
+  //         console.log('查看今日数据', res);
+  //         console.log('查看今日数据', daytitle);
+  //         console.log('查看今日数据', seriesdata);
+  //         initChart(optionday.value, daytitle.value, seriesdata.value)
+  //     })
+
+  // };
+
+  // // 查看本月数据
+  // function currentMonthChart() {
+  //     isShowAll.value = false;
+  //     console.log('currentmonth:', userId.value);
+  //     const monthtitle = ref();
+  //     const monthseriesdata = ref()
+  //     props.currentMonthChart(userId.value).then(res => {
+  //         console.log('table-chart-currentmonth:', res);
+  //         monthtitle.value = getHorizontalTitle(res);
+  //         monthseriesdata.value = getVorizontalData(res);
+  //         console.log('查看今日数据', res);
+  //         console.log('查看今日数据', monthtitle);
+  //         console.log('查看今日数据', monthseriesdata);
+  //         initChart(optionmonth.value, monthtitle.value, monthseriesdata.value)
+  //     })
+  // };
+
+  // // 查看累计数据
+  // function allDatasChart() {
+  //     isShowAll.value = true;
+  //     console.log('alldata:', userId.value);
+  //     const alltitle = ref();
+  //     const allseriesdata = ref()
+  //     props.allDatasChart(userId.value).then(res => {
+  //         console.log(res);
+  //         alltitle.value = getHorizontalTitle(res);
+  //         allseriesdata.value = getVorizontalData(res);
+  //         console.log('查看今日数据', res);
+  //         console.log('查看今日数据', alltitle);
+  //         console.log('查看今日数据', allseriesdata);
+  //         initChart(optionall.value, alltitle.value, allseriesdata.value)
+  //     })
+  // }
+
+  // interface SerialModel {
+  //     data: [],
+  //     type: string,
+  // }
+
+  // // 创建图表
+  // function createChart(option: DataOption) {
+  //     chart.value = markRaw(echarts.init(document.getElementById('container') as HTMLDivElement))
+
+  //     chart.value.setOption(option);
+
+  //     // 大小自适应
+  //     window.addEventListener('resize', () => {
+  //         chart.value.resize();
+  //     })
+  // }
+
+  // // 创建柱状图
+  // function getDepartmentData() {
+  //     // todo,原型未定义
+  // }
+
+  // function getHorizontalTitle(data: VisitsModel[]) {
+  //     console.log('getHorizontalTitle:', data)
+  //     const title = ref<string[]>([]);
+  //     for (var i = 0; i < data.length; i++) {
+  //         title.value.push(data[i].workshopName)
+  //         console.log('getHorizontalTitle-data-i', data[i].workshopName)
+  //     }
+  //     console.log('title:', title);
+  //     return title;
+  // }
+
+  // function getVorizontalData(data: VisitsModel[]) {
+  //     console.log('getvorizontaldata:', data)
+  //     const seriesData = ref<number[]>([]);
+  //     for (var i = 0; i < data.length; i++) {
+  //         seriesData.value.push(data[i].visits)
+  //         console.log('getHorizontalTitle-data-i', data[i].visits)
+  //     }
+  //     console.log('seriesData:', seriesData);
+  //     return seriesData;
+  // }
+
+  // const optionday = ref();
+  // optionday.value = {
+  //     title: {
+  //         text: '各车间地点访问次数柱状图(天)',
+  //         x: "center", //设置标题位置居中
+  //         textStyle: {//设置主标题的文字风格
+  //             fontSize: 10 //文字大小
+  //         },
+  //     },//标题
+  //     tooltip: {
+  //         trigger: 'axis'
+  //     },//虚线
+  //     calculate: true,//显示数据
+  //     xAxis: {
+  //         type: 'category',
+  //         data: [],//todo，获取横坐标
+  //         nameLocation: 'center',
+  //         axisLabel: { interval: 0, rotate: 30 },
+  //         nameTextStyle: {
+  //             color: 'red',
+  //             fontSize: 6,
+
+  //         }
+  //     },
+  //     yAxis: {
+  //         type: 'value',
+  //         name: '访问次数',
+  //         nameTextStyle: {
+  //             color: 'black',
+  //             fontSize: 8,
+  //             padding: 0,
+  //         }
+
+  //     },
+  //     series: [
+  //         {
+  //             data: [],//todo，获取数值,
+  //             type: 'bar'
+  //         }
+  //     ]
+  // };
+
+  // const optionmonth = ref();
+  // optionmonth.value = {
+  //     title: {
+  //         text: '各车间地点访问次数柱状图(月)',
+  //         x: "center", //设置标题位置居中
+  //         textStyle: {//设置主标题的文字风格
+  //             fontSize: 10 //文字大小
+  //         },
+
+  //     },//标题
+  //     tooltip: {
+  //         trigger: 'axis'
+  //     },//虚线
+  //     calculate: true,//显示数据
+  //     xAxis: {
+  //         type: 'category',
+  //         data: [],//todo，获取横坐标
+  //         nameLocation: 'center',
+  //         axisLabel: { interval: 0, rotate: 30 },
+  //         nameTextStyle: {
+  //             color: 'red',
+  //             fontSize: 6,
+
+  //         }
+  //     },
+  //     yAxis: {
+  //         type: 'value',
+  //         name: '访问次数',
+  //         nameTextStyle: {
+  //             color: 'black',
+  //             fontSize: 8,
+  //             padding: 0,
+  //         }
+
+  //     },
+  //     series: [
+  //         {
+  //             data: [],//todo，获取数值,
+  //             type: 'bar'
+  //         }
+  //     ]
+  // };
+
+  // const optionall = ref();
+  // optionall.value = {
+  //     title: {
+  //         text: '各车间地点访问次数柱状图(汇总)',
+  //         x: "center", //设置标题位置居中
+  //         textStyle: {//设置主标题的文字风格
+  //             fontSize: 10 //文字大小
+  //         },
+
+  //     },//标题
+  //     tooltip: {
+  //         trigger: 'axis'
+  //     },//虚线
+  //     calculate: true,//显示数据
+  //     xAxis: {
+  //         type: 'category',
+  //         data: [],//todo，获取横坐标
+  //         nameLocation: 'center',
+  //         axisLabel: { interval: 0, rotate: 30 },
+  //         nameTextStyle: {
+  //             color: 'red',
+  //             fontSize: 6,
+
+  //         }
+  //     },
+  //     yAxis: {
+  //         type: 'value',
+  //         name: '访问次数',
+  //         nameTextStyle: {
+  //             color: 'black',
+  //             fontSize: 8,
+  //             padding: 0,
+  //         }
+
+  //     },
+  //     series: [
+  //         {
+  //             data: [],//todo，获取数值,
+  //             type: 'bar'
+  //         }
+  //     ]
+  // };
+
+  // onMounted(() => {
+  //     isShowAll.value = false;
+  //     getDepartmentList();
+  // })
+</script>
+
+<style scoped></style>

src/views/datamanager/platformdata/compoents/common/Timenation.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="timenation">
+    <el-date-picker
+      v-model="dateRange"
+      type="daterange"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      @change="change"
+      :shortcuts="shortcuts"
+    ></el-date-picker>
+    <div class="shortcut">
+      <el-button @click="">最近一周</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+
+  const dateRange = ref('');
+  const change = (val: any) => {
+    console.log(val);
+  };
+
+  const shortcuts = [
+    {
+      text: '今日',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
+        return [start, end];
+      },
+    },
+    {
+      text: '本月',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+        return [start, end];
+      },
+    },
+    {
+      text: '累计',
+      value: () => {
+        const end = new Date();
+        const start = new Date();
+        start.setTime(0);
+        return [start, end];
+      },
+    },
+  ];
+</script>
+
+<style lang="scss" scoped>
+  .timenation {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+</style>

src/views/datamanager/platformdata/compoents/query/Query.vue

@@ -1,134 +1,132 @@
 <template>
-    <div>
-        <el-button type="primary" @click="showWorkshopData()">车间统计数据</el-button>
-        <el-button type="primary" @click="showCameraData()">相机统计数据</el-button>
-        <PlatformTable />
-        <el-dialog v-model="chartDialogVisible" width="800px" :close-on-click-modal="true" center>
-            <ChartIndex />
-        </el-dialog>
-    </div>
+  <div>
+    <el-button type="primary" @click="showWorkshopData()">车间统计数据</el-button>
+    <el-button type="primary" @click="showCameraData()">相机统计数据</el-button>
+    <PlatformTable />
+    <el-dialog v-model="chartDialogVisible" width="800px" :close-on-click-modal="true" center>
+      <ChartIndex />
+    </el-dialog>
+  </div>
 </template>
 
 <script setup lang="ts">
+  // import { getList, getMonthVisits, getPersonalVisits, getTodayVisits, getTotalVisits } from '@/api/datamanagement/dataplatform';
+  import PlatformTable from './PlatformTable.vue';
+  import ChartIndex from '../common/ChartIndex.vue';
+  import { ref } from 'vue';
+  // import { ElMessageBox, ElMessage } from 'element-plus';
 
-// import { getList, getMonthVisits, getPersonalVisits, getTodayVisits, getTotalVisits } from '@/api/datamanagement/dataplatform';
-import PlatformTable from './PlatformTable.vue';
-import ChartIndex from '../ChartIndex.vue';
-import { ref } from 'vue';
-// import { ElMessageBox, ElMessage } from 'element-plus';
+  const chartDialogVisible = ref(false);
 
-const chartDialogVisible = ref(false);
-
-const showWorkshopData = () => {
+  const showWorkshopData = () => {
     chartDialogVisible.value = true;
-}
+  };
 
-const showCameraData = () => {
+  const showCameraData = () => {
     chartDialogVisible.value = true;
-}
-
-// // 查询访问次数列表
-// function queryData(pageNumber: number, pageSize: number) {
-//     return getList(pageNumber, pageSize).then((res) => {
+  };
 
-//         console.log('table-querydata:', res)
-//         return res;
-//     }).catch(error => {
-//         ElMessageBox.alert(error, '异常', {
-//             confirmButtonText: 'OK',
-//             callback: () => {
-//                 ElMessage({
-//                     type: 'info',
-//                     message: `查询数据失败`,
-//                 })
-//             },
-//         })
-//         return Promise.reject()
-//     });
-// }
+  // // 查询访问次数列表
+  // function queryData(pageNumber: number, pageSize: number) {
+  //     return getList(pageNumber, pageSize).then((res) => {
 
-// // 查询今日访问次数
-// function getDayData(userId: number) {
-//     return getTodayVisits(userId).then((res) => {
-//         console.log('table-getdaydata:', res)
-//         return res;
-//     }).catch(error => {
-//         ElMessageBox.alert(error, '异常', {
-//             confirmButtonText: 'OK',
-//             callback: () => {
-//                 ElMessage({
-//                     type: 'info',
-//                     message: `查询数据失败`,
-//                 })
-//             },
-//         })
-//         return Promise.reject();
-//     });
-// }
+  //         console.log('table-querydata:', res)
+  //         return res;
+  //     }).catch(error => {
+  //         ElMessageBox.alert(error, '异常', {
+  //             confirmButtonText: 'OK',
+  //             callback: () => {
+  //                 ElMessage({
+  //                     type: 'info',
+  //                     message: `查询数据失败`,
+  //                 })
+  //             },
+  //         })
+  //         return Promise.reject()
+  //     });
+  // }
 
-// // 查询本月访问次数
-// function getMonthData(userId: number) {
-//     console.log('table-getmonthdata:', userId)
-//     return getMonthVisits(userId).then((res) => {
-//         console.log('table-getmonthdata:', res)
-//         return res;
-//     }).catch(error => {
-//         ElMessageBox.alert(error, '异常', {
-//             confirmButtonText: 'OK',
-//             callback: () => {
-//                 ElMessage({
-//                     type: 'info',
-//                     message: `查询数据失败`,
-//                 })
-//             },
-//         });
-//         return Promise.reject();
-//     });
-// }
+  // // 查询今日访问次数
+  // function getDayData(userId: number) {
+  //     return getTodayVisits(userId).then((res) => {
+  //         console.log('table-getdaydata:', res)
+  //         return res;
+  //     }).catch(error => {
+  //         ElMessageBox.alert(error, '异常', {
+  //             confirmButtonText: 'OK',
+  //             callback: () => {
+  //                 ElMessage({
+  //                     type: 'info',
+  //                     message: `查询数据失败`,
+  //                 })
+  //             },
+  //         })
+  //         return Promise.reject();
+  //     });
+  // }
 
-// // 查询累计访问次数
-// function getAllData(userId: number) {
-//     return getTotalVisits(userId).then((res) => {
+  // // 查询本月访问次数
+  // function getMonthData(userId: number) {
+  //     console.log('table-getmonthdata:', userId)
+  //     return getMonthVisits(userId).then((res) => {
+  //         console.log('table-getmonthdata:', res)
+  //         return res;
+  //     }).catch(error => {
+  //         ElMessageBox.alert(error, '异常', {
+  //             confirmButtonText: 'OK',
+  //             callback: () => {
+  //                 ElMessage({
+  //                     type: 'info',
+  //                     message: `查询数据失败`,
+  //                 })
+  //             },
+  //         });
+  //         return Promise.reject();
+  //     });
+  // }
 
-//         console.log('table-getalldata:', res)
-//         return res;
-//     }).catch(error => {
-//         ElMessageBox.alert(error, '异常', {
-//             confirmButtonText: 'OK',
-//             callback: () => {
-//                 ElMessage({
-//                     type: 'info',
-//                     message: `查询数据失败`,
-//                 })
-//             },
-//         })
-//         return Promise.reject();
-//     });
-// }
+  // // 查询累计访问次数
+  // function getAllData(userId: number) {
+  //     return getTotalVisits(userId).then((res) => {
 
-// // 查询个人访问次数-
-// function getPersonalVisitsData(deptId: number, nickName: string, pageNumber: number, pageSize: number, staffNo: string) {
-//     console.log('table-getPersonalVisitsData-deptid', deptId);
-//     console.log('table-getPersonalVisitsData-nama', nickName);
-//     console.log('table-getPersonalVisitsData', pageNumber, pageSize);
-//     console.log('table-getPersonalVisitsData-staffno', staffNo);
-//     return getPersonalVisits(pageNumber, pageSize, staffNo, deptId, nickName).then((res) => {
-//         console.log('table-getPersonalVisitsData:', res)
-//         return res;
-//     }).catch(error => {
-//         ElMessageBox.alert(error, '异常', {
-//             confirmButtonText: 'OK',
-//             callback: () => {
-//                 ElMessage({
-//                     type: 'info',
-//                     message: `查询数据失败`,
-//                 })
-//             },
-//         })
-//         return Promise.reject();
-//     });
-// }
+  //         console.log('table-getalldata:', res)
+  //         return res;
+  //     }).catch(error => {
+  //         ElMessageBox.alert(error, '异常', {
+  //             confirmButtonText: 'OK',
+  //             callback: () => {
+  //                 ElMessage({
+  //                     type: 'info',
+  //                     message: `查询数据失败`,
+  //                 })
+  //             },
+  //         })
+  //         return Promise.reject();
+  //     });
+  // }
 
+  // // 查询个人访问次数-
+  // function getPersonalVisitsData(deptId: number, nickName: string, pageNumber: number, pageSize: number, staffNo: string) {
+  //     console.log('table-getPersonalVisitsData-deptid', deptId);
+  //     console.log('table-getPersonalVisitsData-nama', nickName);
+  //     console.log('table-getPersonalVisitsData', pageNumber, pageSize);
+  //     console.log('table-getPersonalVisitsData-staffno', staffNo);
+  //     return getPersonalVisits(pageNumber, pageSize, staffNo, deptId, nickName).then((res) => {
+  //         console.log('table-getPersonalVisitsData:', res)
+  //         return res;
+  //     }).catch(error => {
+  //         ElMessageBox.alert(error, '异常', {
+  //             confirmButtonText: 'OK',
+  //             callback: () => {
+  //                 ElMessage({
+  //                     type: 'info',
+  //                     message: `查询数据失败`,
+  //                 })
+  //             },
+  //         })
+  //         return Promise.reject();
+  //     });
+  // }
 </script>
 
-<style scoped></style>
+<style scoped></style>