feat: 统计数据柱状图

src/api/datamanagement/dataplatform.ts

@@ -51,6 +51,17 @@ export interface DepartMentModel {
     treePath: string,
 }
 
+export interface TableModel {
+    deptId: number;
+    deptName: string;
+    monthVisits: number;
+    nickName: string;
+    staffNo: string;
+    todayVisits: number;
+    totalVisits: number;
+    userId: number;
+  }
+
 // 查询访问次数列表
 export function getList(pageNumber: number, pageSize: number) {
     return http.request<Visits<Records>>({

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

@@ -1,10 +1,108 @@
-<template> <div id="bar-chart" ref="barChart" class="chart"></div> </template>
+<template>
+  <div id="bar-chart" ref="barChart" class="chart" :style="{ height: props.height }"></div>
+</template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import * as echarts from 'echarts/core';
+  import {
+    TooltipComponent,
+    TooltipComponentOption,
+    GridComponent,
+    GridComponentOption,
+  } from 'echarts/components';
+  import { BarChart, BarSeriesOption } from 'echarts/charts';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import { onMounted, watch } from 'vue';
+
+  echarts.use([TooltipComponent, GridComponent, BarChart, CanvasRenderer]);
+  type EChartsOption = echarts.ComposeOption<
+    TooltipComponentOption | GridComponentOption | BarSeriesOption
+  >;
+
+  const props = withDefaults(
+    defineProps<{
+      chartData: number[];
+      chartLable: string[];
+      height?: string;
+    }>(),
+    {
+      height: '372px',
+    },
+  );
+
+  onMounted(() => {
+    const bar: echarts.ECharts = echarts.init(document.getElementById('bar-chart')!);
+
+    initBarChart(bar);
+
+    watch(
+      () => props.chartData,
+      () => {
+        drawBarChart(bar);
+      },
+    );
+  });
+
+  const initBarChart = (bar: echarts.ECharts) => {
+    const barOption: EChartsOption = {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+        },
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true,
+      },
+      xAxis: [
+        {
+          type: 'category',
+          data: props.chartLable,
+          axisTick: {
+            alignWithLabel: true,
+          },
+        },
+      ],
+      yAxis: [
+        {
+          name: '访问次数',
+          type: 'value',
+        },
+      ],
+      series: [
+        {
+          // name: props.chartCategory,
+          type: 'bar',
+          barWidth: '60%',
+          data: props.chartData,
+        },
+      ],
+    };
+    bar.setOption(barOption);
+  };
+
+  const drawBarChart = (bar: echarts.ECharts) => {
+    const barOption: EChartsOption = {
+      xAxis: [
+        {
+          data: props.chartLable,
+        },
+      ],
+      series: [
+        {
+          data: props.chartData,
+        },
+      ],
+    };
+    bar.setOption(barOption);
+  };
+</script>
 
 <style scoped lang="scss">
   #bar-chart {
-    width: 100%;
-    height: 372px;
+    width: 968px;
   }
 </style>

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

@@ -1,10 +1,92 @@
-<template> <div id="line-chart" ref="lineChart" class="chart"></div> </template>
+<template>
+  <div id="line-chart" ref="lineChart" class="chart" :style="{ height: props.height }"></div>
+</template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import * as echarts from 'echarts/core';
+  import { GridComponent, GridComponentOption } from 'echarts/components';
+  import { LineChart, LineSeriesOption } from 'echarts/charts';
+  import { UniversalTransition } from 'echarts/features';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import { onMounted, watch } from 'vue';
+
+  echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);
+  type EChartsOption = echarts.ComposeOption<GridComponentOption | LineSeriesOption>;
+  const props = withDefaults(
+    defineProps<{
+      chartData: number[];
+      chartLable: string[];
+      height?: string;
+    }>(),
+    {
+      height: '372px',
+    },
+  );
+  onMounted(() => {
+    const line: echarts.ECharts = echarts.init(document.getElementById('line-chart')!);
+
+    initLineChart(line);
+
+    watch(
+      () => props.chartData,
+      () => {
+        drawLineChart(line);
+      },
+    );
+  });
+
+  const initLineChart = (line: echarts.ECharts) => {
+    const lineOption: EChartsOption = {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+        },
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true,
+      },
+      xAxis: [
+        {
+          type: 'category',
+          data: props.chartLable,
+        },
+      ],
+      yAxis: [
+        {
+          name: '积分',
+          type: 'value',
+        },
+      ],
+      series: [
+        {
+          name: '分数段',
+          type: 'line',
+          data: props.chartData,
+        },
+      ],
+    };
+    line.setOption(lineOption);
+  };
+
+  const drawLineChart = (line: echarts.ECharts) => {
+    const lineOption: EChartsOption = {
+      series: [
+        {
+          data: props.chartData,
+        },
+      ],
+    };
+    line.setOption(lineOption);
+  };
+</script>
 
 <style scoped lang="scss">
   #line-chart {
-    width: 100%;
+    width: 768px;
     height: 372px;
   }
 </style>

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

@@ -1,358 +1,20 @@
 <template>
   <Timenation />
-  <BarChart v-if="true" />
-  <LineChart v-else />
-  <!-- <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> -->
+  <BarChart :chart-data="props.chartData.val" :chart-lable="chartData.label" />
+  <!-- <LineChart v-else-if="cameraData" :chart-data="cameraData.val" :chart-lable="cameraData.label" /> -->
 </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();
-  // })
+  // import LineChart from '../../charts/LineChart.vue';
+
+  const props = defineProps<{
+    chartData: {
+      label: string[];
+      val: number[];
+    };
+  }>();
 </script>
 
 <style scoped></style>

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

@@ -53,12 +53,11 @@
       highlight-current-row
       :default-sort="{ prop: 'todayVisits', order: 'descending' }"
     >
-
       <el-table-column label="姓名" prop="nickName" align="center"></el-table-column>
       <el-table-column label="工号" prop="staffNo" align="center"></el-table-column>
       <el-table-column label="部门" prop="deptName" align="center"></el-table-column>
       <el-table-column
-        :label="'当日' + tableLabel"
+        :label="'当日' + props.tableLabel"
         prop="todayVisits"
         sortable
         align="right"
@@ -101,17 +100,16 @@
   import { defineProps } from 'vue';
   import { FormInstance } from 'element-plus';
   import { DepartMentModel } from '@/api/datamanagement/dataplatform';
-  import { TableModel } from '../../compoents/query/Query.vue';
+  import { TableModel } from '@/api/datamanagement/dataplatform';
   // import { DepartMentModel, Records, Visits, VisitsModel, getDeptList } from '@/api/datamanagement/dataplatform';
 
   const searchLabel = ref('姓名');
   const searchValue = ref('');
 
   const props = defineProps<{
-    tableData: TableModel[],
-    tableLabel: string,
+    tableData: TableModel[];
+    tableLabel: string;
   }>();
-  console.log(props.tableData);
 
   export interface FormModelCommon {
     dept: string;
@@ -291,5 +289,5 @@
 
   .el-pagination {
     margin-top: 30px;
-  } 
+  }
 </style>

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

@@ -1,58 +1,164 @@
 <template>
   <div class="timenation">
+    <div v-if="true" class="workshop-select">
+      <el-select
+        v-model="selectedWorkshop"
+        multiple
+        clearable
+        collapse-tags
+        placeholder="请添加车间"
+        :max-collapse-tags="1"
+        style="width: 240px"
+      >
+        <el-checkbox v-model="checkAll" :indeterminate="false" @change="handleCheckAll">
+          全选
+        </el-checkbox>
+        <el-option
+          v-for="shop in workshops"
+          :key="shop.value"
+          :label="shop.label"
+          :value="shop.value"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <!-- <div class="date-shortcut">
+      <el-button @click="changeDateToday">今日</el-button>
+      <el-button @click="changeDateThisMonth">本月</el-button>
+      <el-button @click="changeDateTotal">累计</el-button>
+    </div> -->
     <el-date-picker
+      class="date-picker"
       v-model="dateRange"
       type="daterange"
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      @change="change"
+      :shortcuts="shortcuts"
+      @change="dateChange"
       style="max-width: 299px"
+      :default-value="[0, new Date()]"
     ></el-date-picker>
-    <div class="shortcut">
-      <el-button @click="changeDateToday">今日</el-button>
-      <el-button @click="changeDateThisMonth">本月</el-button>
-      <el-button @click="changeDateTotal">累计</el-button>
-    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue';
+  import { ref, watch } from 'vue';
 
   const dateRange = ref<Date[]>();
-  const change = (val: any) => {
+  const dateChange = (val: any) => {
     console.log(val);
   };
 
-  const changeDateToday = () => {
-    const end = new Date();
-    const start = new Date();
-    dateRange.value = [start, end];
-  };
+  const shortcuts = [
+    {
+      text: '今天',
+      value: () => {
+        return [new Date(), new Date()];
+      },
+    },
+    {
+      text: '本月',
+      value: () => {
+        const start = new Date();
+        start.setTime(start.getTime() - 3600 * 1000 * 24 * (start.getDate() - 1));
+        return [start, new Date()];
+      },
+    },
+    {
+      text: '累计',
+      value: () => {
+        return [0, new Date()];
+      },
+    },
+  ];
 
-  const changeDateThisMonth = () => {
-    const end = new Date();
-    const start = new Date();
-    const nowDate = start.getDate();
-    start.setTime(start.getTime() - 3600 * 1000 * 24 * (nowDate - 1));
-    dateRange.value = [start, end];
-  };
+  // const changeDateToday = () => {
+  //   const end = new Date();
+  //   const start = new Date();
+  //   dateRange.value = [start, end];
+  // };
+
+  // const changeDateThisMonth = () => {
+  //   const end = new Date();
+  //   const start = new Date();
+  //   const nowDate = start.getDate();
+  //   start.setTime(start.getTime() - 3600 * 1000 * 24 * (nowDate - 1));
+  //   dateRange.value = [start, end];
+  // };
+
+  // const changeDateTotal = () => {
+  //   const end = new Date();
+  //   const start = new Date();
+  //   start.setTime(0);
+  //   dateRange.value = [start, end];
+  // };
 
-  const changeDateTotal = () => {
-    const end = new Date();
-    const start = new Date();
-    start.setTime(0);
-    dateRange.value = [start, end];
+  const selectedWorkshop = ref<string[]>();
+
+  const workshops = [
+    {
+      value: '车间1',
+      label: '车间1',
+    },
+    {
+      value: '车间sskkccvnzzzzzz',
+      label: '车间sskkccvnzzzzzz',
+    },
+    {
+      value: '55669',
+      label: '55669',
+    },
+    {
+      value: '车间',
+      label: '车间',
+    },
+    {
+      value: '车间17896541236554123265849654',
+      label: '车间17896541236554123265849654',
+    },
+    {
+      value: 'workshop',
+      label: 'workshop',
+    },
+    {
+      value: '车间2',
+      label: '车间2',
+    },
+  ];
+
+  const checkAll = ref(false);
+  const handleCheckAll = (val: boolean) => {
+    if (val) {
+      selectedWorkshop.value = workshops.map((item) => item.value);
+    } else {
+      selectedWorkshop.value = [];
+    }
   };
+  watch(
+    () => selectedWorkshop.value,
+    (val) => {
+      if (val !== undefined) {
+        if (val.length === workshops.length) {
+          checkAll.value = true;
+        } else {
+          checkAll.value = false;
+        }
+      }
+    },
+    { immediate: true },
+  );
 </script>
 
 <style lang="scss" scoped>
+  .workshop-select {
+    width: 250px;
+  }
   .timenation {
     padding-right: 25px;
     width: 100%;
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-start;
     align-items: center;
   }
 </style>

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

@@ -2,41 +2,43 @@
   <div>
     <el-button type="primary" @click="showWorkshopData()">车间统计数据</el-button>
     <el-button type="primary" @click="showCameraData()">相机统计数据</el-button>
-    <PlatformTable :table-data="tableData" table-label="访问次数"/>
-    <el-dialog v-model="chartDialogVisible" width="800px" :close-on-click-modal="true" center>
-      <ChartIndex />
+    <PlatformTable :table-data="tableData" table-label="访问次数" />
+    <el-dialog
+      v-model="dialogVisible"
+      width="1000px"
+      :title="dialogTitle"
+      :close-on-click-modal="true"
+      center
+    >
+      <ChartIndex :chart-data="chartData" />
     </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
   // import { getList, getMonthVisits, getPersonalVisits, getTodayVisits, getTotalVisits } from '@/api/datamanagement/dataplatform';
+  // import { ElMessageBox, ElMessage } from 'element-plus';
   import PlatformTable from '../common/PlatformTable.vue';
   import ChartIndex from '../common/ChartIndex.vue';
   import { ref } from 'vue';
-  // import { ElMessageBox, ElMessage } from 'element-plus';
+  import { TableModel } from '@/api/datamanagement/dataplatform';
 
-  const chartDialogVisible = ref(false);
+  const dialogVisible = ref(false);
+  const chartData = ref();
+  const dialogTitle = ref('');
 
   const showWorkshopData = () => {
-    chartDialogVisible.value = true;
+    dialogVisible.value = true;
+    chartData.value = workshopData.value;
+    dialogTitle.value = '车间统计数据';
   };
 
   const showCameraData = () => {
-    chartDialogVisible.value = true;
+    dialogVisible.value = true;
+    chartData.value = cameraData.value;
+    dialogTitle.value = '相机统计数据';
   };
 
-  export interface TableModel {
-    deptId: number;
-    deptName: string;
-    monthVisits: number;
-    nickName: string;
-    staffNo: string;
-    todayVisits: number;
-    totalVisits: number;
-    userId: number;
-  }
-
   const tableData = ref<TableModel[]>([
     {
       deptId: 1,
@@ -137,9 +139,25 @@
       todayVisits: 10,
       totalVisits: 10,
       userId: 10014,
-    }
+    },
   ]);
 
+  const workshopData = ref<{
+    label: string[];
+    val: number[];
+  }>({
+    label: ['车间1', '车间2', '车间3', '车间4', '车间5', '车间6'],
+    val: [9, 66, 77, 82, 35, 100],
+  });
+
+  const cameraData = ref<{
+    label: string[];
+    val: number[];
+  }>({
+    label: ['相机1', '相机2', '相机3', '相机4', '相机5', '相机6'],
+    val: [99, 66, 77, 82, 35, 1],
+  });
+
   // // 查询访问次数列表
   // function queryData(pageNumber: number, pageSize: number) {
   //     return getList(pageNumber, pageSize).then((res) => {
@@ -248,9 +266,19 @@
 
 <style scoped lang="scss">
   :deep(.el-dialog__header) {
-    padding: 0;
+    text-align: left;
+    border-bottom: 1px solid rgba(232, 232, 232, 1);
+    padding-bottom: 16px;
+    margin-bottom: 16px;
   }
-  :deep(.el-dialog__headerbtn) {
-    padding-top: 23px;
+
+  :deep(.el-dialog__title) {
+    font-weight: 600;
+    font-size: 16px;
+    color: rgba(0, 0, 0, 0.88);
+    line-height: 24px;
   }
+  // :deep(.el-dialog__headerbtn) {
+  //   padding-top: 23px;
+  // }
 </style>

src/views/datamanager/platformdata/compoents/score/Score.vue

@@ -17,7 +17,7 @@
   import { ref } from 'vue';
   // import { ElMessageBox, ElMessage } from 'element-plus';
   import PlatformTable from '../common/PlatformTable.vue';
-  import { TableModel } from '../query/Query.vue';
+  import { TableModel } from '@/api/datamanagement/dataplatform';
  
   const tableData = ref<TableModel[]>([
     {