feat: 平台数据柱状图和折线图

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

@@ -86,7 +86,7 @@
 
 <style scoped lang="scss">
   #line-chart {
-    width: 768px;
+    width: 968px;
     height: 372px;
   }
 </style>

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

@@ -1,20 +0,0 @@
-<template>
-  <Timenation />
-  <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';
-
-  const props = defineProps<{
-    chartData: {
-      label: string[];
-      val: number[];
-    };
-  }>();
-</script>
-
-<style scoped></style>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="timenation">
-    <div v-if="true" class="workshop-select">
+    <div v-if="needWorkshop" class="workshop-select">
       <el-select
         v-model="selectedWorkshop"
         multiple
@@ -19,14 +19,10 @@
           :label="shop.label"
           :value="shop.value"
         >
+          <!-- <el-checkbox :label="shop.label"> </el-checkbox> -->
         </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"
@@ -35,19 +31,53 @@
       start-placeholder="开始日期"
       end-placeholder="结束日期"
       :shortcuts="shortcuts"
-      @change="dateChange"
       style="max-width: 299px"
-      :default-value="[0, new Date()]"
     ></el-date-picker>
+    <el-button @click="onSearch" type="primary" style="width: 65px; height: 32px; margin-left: 16px"
+      >搜 索
+    </el-button>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { ref, watch } from 'vue';
+  import { onMounted, ref, watch } from 'vue';
+  import { ElMessage } from 'element-plus';
 
+  const checkAll = ref();
   const dateRange = ref<Date[]>();
-  const dateChange = (val: any) => {
-    console.log(val);
+  const selectedWorkshop = ref<string[]>();
+
+  export interface DialogParams {
+    date: Date[] | undefined;
+    workshops?: string[] | undefined;
+  }
+  const serchParams = ref<DialogParams>({
+    date: undefined,
+    // workshops: undefined,
+  });
+
+  const props = defineProps<{
+    needWorkshop: boolean;
+  }>();
+
+  const emits = defineEmits<{
+    (e: 'paramsChanged', parmas: DialogParams);
+  }>();
+
+  const onSearch = () => {
+    if (!dateRange.value) {
+      ElMessage.error('请选择时间范围');
+      return;
+    }
+    serchParams.value.date = dateRange.value;
+    if (props.needWorkshop) {
+      if (!selectedWorkshop.value || !selectedWorkshop.value.length) {
+        ElMessage.error('请至少选择一个车间');
+        return;
+      }
+      serchParams.value.workshops = selectedWorkshop.value;
+    }
+    emits('paramsChanged', serchParams.value);
   };
 
   const shortcuts = [
@@ -68,34 +98,11 @@
     {
       text: '累计',
       value: () => {
-        return [0, new Date()];
+        return [new Date(0), new Date()];
       },
     },
   ];
 
-  // 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 selectedWorkshop = ref<string[]>();
-
   const workshops = [
     {
       value: '车间1',
@@ -127,7 +134,6 @@
     },
   ];
 
-  const checkAll = ref(false);
   const handleCheckAll = (val: boolean) => {
     if (val) {
       selectedWorkshop.value = workshops.map((item) => item.value);
@@ -148,6 +154,11 @@
     },
     { immediate: true },
   );
+
+  onMounted(() => {
+    selectedWorkshop.value = workshops.map((item) => item.value);
+    dateRange.value = [new Date(0), new Date()];
+  });
 </script>
 
 <style lang="scss" scoped>

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

@@ -13,7 +13,6 @@
         style="max-width: 251px; margin-right: 50px"
         :placeholder="'请输入' + searchLabel"
       >
-      
         <template #prepend>
           <el-select v-model="searchLabel" style="width: 74px">
             <el-option value="姓名" />
@@ -33,27 +32,17 @@
           </el-option>
         </el-select>
       </el-form-item>
-
-      <el-button
-        type="primary"
-        @click="submitForm(ruleFormRef)"
-        style="width: 65px; height: 32px; position: absolute; right: 134px"
-        >搜 索</el-button
-      >
-      <el-button
-        @click="resetForm(ruleFormRef)"
-        style="width: 65px; height: 32px; position: absolute; right: 57px"
-        >重 置</el-button
-      >
+      <div style="float: right">
+        <el-button type="primary" @click="submitForm(ruleFormRef)" style="width: 65px; height: 32px"
+          >搜 索</el-button
+        >
+        <el-button @click="resetForm(ruleFormRef)" style="width: 65px; height: 32px"
+          >重 置</el-button
+        >
+      </div>
     </el-form>
 
-    <el-table
-      style="width: 100%; margin-top: 18px"
-      stripe
-      :data="tableData"
-      highlight-current-row
-      :default-sort="{ prop: 'todayVisits', order: 'descending' }"
-    >
+    <el-table style="width: 100%; margin-top: 18px" stripe :data="tableData" highlight-current-row>
       <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>
@@ -76,17 +65,20 @@
         align="right"
       ></el-table-column>
       <el-table-column v-if="tableLabel === '访问次数'" label="访问次数统计图" align="center">
-        <img
-          style="display: inline-block; margin-right: 20px"
-          src="@/assets/icons/chart-bar.png"
-          alt=""
-          @click="showBargraph()"
-        />
-        <img
-          style="display: inline-block"
-          src="@/assets/icons/chart-line.png"
-          alt=""
-          @click="showLinechart()" />
+        <template #default="scope">
+          <img
+            style="display: inline-block; margin-right: 20px"
+            src="@/assets/icons/chart-bar.png"
+            alt=""
+            @click="showBargraph(scope.row)"
+          />
+          <img
+            style="display: inline-block"
+            src="@/assets/icons/chart-line.png"
+            alt=""
+            @click="showLinechart(scope.row)"
+          />
+        </template>
       </el-table-column>
     </el-table>
 
@@ -100,26 +92,29 @@
         :close-dialog="closeDialog">
     </TableEcharts> -->
 
-    <el-dialog
-      v-model="bargraphVisible"
-      :title="bargraphTitle"
-      :close-on-click-modal="true"
-      width="1000px"
-      center
-      >
-        <div class="testbox"></div>
-    </el-dialog>
-
-    <el-dialog
-      v-model="linechartVisible"
-      :title="linechartTitle"
-      :close-on-click-modal="true"
-      width="1000px"
-      center
-      >
-        <div class="testbox"></div>
-    </el-dialog>
-
+  <el-dialog
+    v-model="bargraphVisible"
+    :title="bargraphTitle"
+    :close-on-click-modal="false"
+    :destroy-on-close="true"
+    width="1000px"
+    center
+  >
+    <DialogNavBar :need-workshop="false" @params-changed="(v) => console.log(v)" />
+    <BarChart :chart-data="barData.val" :chart-lable="barData.label" />
+  </el-dialog>
+
+  <el-dialog
+    v-model="linechartVisible"
+    :title="linechartTitle"
+    :close-on-click-modal="false"
+    :destroy-on-close="true"
+    width="1000px"
+    center
+  >
+    <DialogNavBar :need-workshop="true" @params-changed="(v) => console.log(v)" />
+    <LineChart :chart-data="LineData.val" :chart-lable="LineData.label" />
+  </el-dialog>
 </template>
 
 <script setup lang="ts">
@@ -128,6 +123,9 @@
   import { FormInstance } from 'element-plus';
   import { DepartMentModel } from '@/api/datamanagement/dataplatform';
   import { TableModel } from '@/api/datamanagement/dataplatform';
+  import DialogNavBar from '../common/DialogNavBar.vue';
+  import BarChart from '../../charts/BarChart.vue';
+  import LineChart from '../../charts/LineChart.vue';
   // import { DepartMentModel, Records, Visits, VisitsModel, getDeptList } from '@/api/datamanagement/dataplatform';
 
   const searchLabel = ref('姓名');
@@ -157,18 +155,33 @@
   //柱状图logo
   const bargraphVisible = ref(false);
   const bargraphTitle = ref('');
-  const showBargraph = () => {
+  const showBargraph = (rowData) => {
     bargraphVisible.value = true;
-    bargraphTitle.value = '张三访问车间统计柱状图';
-
-  }
+    bargraphTitle.value = rowData.nickName + '访问车间统计柱状图';
+  };
   //折线图logo
   const linechartVisible = ref(false);
   const linechartTitle = ref('');
-  const showLinechart = () => {
+  const showLinechart = (rowData) => {
     linechartVisible.value = true;
-    linechartTitle.value = '张三访问车间统计折线图'
-  }
+    linechartTitle.value = rowData.nickName + '访问车间统计折线图';
+  };
+
+  const barData = ref<{
+    label: string[];
+    val: number[];
+  }>({
+    label: ['车间1', '车间2', '车间3', '车间4', '车间5', '车间6'],
+    val: [9, 66, 77, 82, 35, 100],
+  });
+
+  const LineData = ref<{
+    label: string[];
+    val: number[];
+  }>({
+    label: ['日期1', '日期2', '日期3', '日期4', '日期5', '日期6'],
+    val: [9, 56, 77, 802, 0, 100],
+  });
 
   // 搜索数据
   function submitForm(formE1: FormInstance | undefined) {

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

@@ -7,10 +7,15 @@
       v-model="dialogVisible"
       width="1000px"
       :title="dialogTitle"
-      :close-on-click-modal="true"
+      :close-on-click-modal="false"
+      :destroy-on-close="true"
       center
     >
-      <ChartIndex :chart-data="chartData" />
+      <DialogNavBar
+        :need-workshop="dialogTitle === '相机统计数据'"
+        @params-changed="(v) => console.log(v)"
+      />
+      <BarChart :chart-data="chartData.val" :chart-lable="chartData.label" />
     </el-dialog>
   </div>
 </template>
@@ -19,9 +24,10 @@
   // 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 { TableModel } from '@/api/datamanagement/dataplatform';
+  import DialogNavBar from '../common/DialogNavBar.vue';
+  import BarChart from '../../charts/BarChart.vue';
 
   const dialogVisible = ref(false);
   const chartData = ref();