2021-09-28

src/components/board/index.vue

@@ -0,0 +1,49 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-09-28 10:51:27
+ * @LastEditTime: 2021-09-28 14:10:05
+ * @LastEditors: Please set LastEditors
+ * @Description: 各看板大框架
+ * @FilePath: \hyyfClient\src\components\board\index.vue
+-->
+<template>
+  <div class="board">
+    <div class="header">
+      <span>{{ title }}</span>
+    </div>
+    <div class="content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+<style scoped>
+  .board {
+    width: 100%;
+    border: 1px solid rgba(235, 238, 245, 1);
+  }
+
+  .header {
+    background-color: rgb(243, 243, 243);
+    padding: 10px 15px;
+    color: rgb(192, 188, 189);
+    border-bottom: 1px solid rgba(235, 238, 245, 1);
+  }
+  .header>span {
+    font-size: 18px;
+    font-weight: 700;
+  }
+
+  .content {
+    background-color: #fff;
+  }
+</style>

src/components/newTable/NewTable.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-09-18 16:30:17
- * @LastEditTime: 2021-09-26 15:19:32
+ * @LastEditTime: 2021-09-28 14:00:26
  * @LastEditors: Please set LastEditors
  * @Description: 表格的封装
  * @FilePath: \hyyfClient\src\components\NewTable.vue
@@ -18,34 +18,18 @@
       </div>
     </div>
     <div class="content">
-      <el-table :data="listData" border :height="height" @selection-change="handleSelectionChange">
-
-        <el-table-column 
-          v-if="shows.showSelect" 
-          type="selection" 
-          align="center">
-        </el-table-column>
-
-        <el-table-column 
-          v-if="shows.showIndex" 
-          type="index" label="序号" 
-          align="center" width="70">
-        </el-table-column>
-
-        <template v-for="item in tableItems">
-          <el-table-column :key="item.prop" v-bind="item" align="center">
-            <template slot-scope="scope">
-              <slot :name="item.slotName" :row="scope.row">
-                {{ scope.row[item.prop] }}
-              </slot>
-            </template>
-          </el-table-column>
-        </template>
-      </el-table>
+      <table-content 
+        :listData="listData" 
+        :height="height" 
+        :shows="shows"
+        :tableItems="tableItems"
+        @selectionChange="handleSelectionChange">
+      </table-content>
     </div>
   </div>
 </template>
 <script>
+import TableContent from './TableContent.vue'
 
 export default {
   props: {
@@ -70,6 +54,9 @@ export default {
       default: 500
     }
   },
+  components: {
+    TableContent
+  },
   methods: {
     handleSelectionChange(rows) {
       this.$emit('selectionChange', rows)

src/components/newTable/TableContent.vue

@@ -0,0 +1,66 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-09-28 13:56:49
+ * @LastEditTime: 2021-09-28 14:40:04
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \hyyfClient\src\components\newTable\TableContent.vue
+-->
+<template>
+  <div class="table-content">
+    <el-table :data="listData" border :height="height" @selection-change="handleSelectionChange">
+
+        <el-table-column 
+          v-if="shows.showSelect" 
+          type="selection" 
+          align="center">
+        </el-table-column>
+
+        <el-table-column 
+          v-if="shows.showIndex" 
+          type="index" label="序号" 
+          align="center" width="70">
+        </el-table-column>
+
+        <template v-for="item in tableItems">
+          <el-table-column :key="item.prop" v-bind="item" align="center">
+            <template slot-scope="scope">
+              <slot :name="item.slotName" :row="scope.row">
+                {{ scope.row[item.prop] }}
+              </slot>
+            </template>
+          </el-table-column>
+        </template>
+      </el-table>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    listData: {
+      type: Array,
+      required: true
+    },
+    height: { // 表格高度控制
+      type: Number,
+      default: 500
+    },
+    tableItems: {
+      type: Array,
+      required: true
+    },
+    shows: {
+      type: Object,
+      default: () => ({ showIndex: true, showSelect: true})
+    },
+  },
+  methods: {
+    handleSelectionChange(rows) {
+      this.$emit('selectionChange', rows)
+    }
+  }
+}
+</script>
+<style scoped>
+  
+</style>

src/views/BioSafety/CarAdmin.vue

@@ -18,7 +18,7 @@
     <query-conditions :formItems="formItems" :propFormData="propFormData" @getQueryParams="handleQuery"></query-conditions>
 
     <!-- 表格 -->
-    <new-table :title="title" :listData="listData" :tableItems="tableItems" :shows="tableShows">
+    <new-table :title="title" :listData="listData" :tableItems="tableItems" :shows="tableShows" :height="475">
       <template v-slot:right>
         <template v-if="btnSelected === 1">
           <div>
@@ -37,6 +37,12 @@
         </template>
       </template>
     </new-table>
+    <table-footer
+      :totals="total"
+      :size="size"
+      @sizeChange="sizeChange"
+      @pageChange="pageChange">
+    </table-footer>
   </div>
 </template>
 
@@ -44,6 +50,7 @@
 import HeadBtns from 'components/bioSafety/Btns'
 import QueryConditions from 'components/bioSafety/QueryConditions'
 import NewTable from 'components/newTable/NewTable'
+import TableFooter from "../../components/TableFooter";
 
 import { formItems, propFormData } from './carAdmin/queryCondition.config'
 import { titles, tableItems, tableShows } from './carAdmin/table.config'
@@ -53,7 +60,8 @@ export default {
   components: {
     HeadBtns,
     QueryConditions,
-    NewTable
+    NewTable,
+    TableFooter
   },
   data() {
     return {
@@ -68,7 +76,12 @@ export default {
       title: '', // 传给 BioTable 组件的 title
       listData: [], // 传给 BioTable 组件的表格展示的值 listData
       tableItems: [], // 传给 BioTable 组件的表格的列表 tableItems
-      tableShows: {}
+      tableShows: {},
+      // table的翻页
+      total: 0,
+      size: 20,
+      pageNum: 1,
+      selectId: ''
     }
   },
   mounted() {
@@ -89,6 +102,25 @@ export default {
     // 获取查询条件
     handleQuery(params) {
       console.log(params)
+    },
+    // 修改size
+    sizeChange(val) {
+      this.size = val;
+      this.init();
+    },
+    // 修改页数
+    pageChange(val) {
+      this.pageNum= val;
+      this.init();
+    },
+    init() {
+      let params = {
+        pageNum: this.pageNum,
+        pageSize: this.size,
+        searchStr: this.keyword
+      }
+      console.log(params)
+      // 获取后端数据
     }
   },
 }

src/views/BioSafety/DeadPig.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: your name
  * @Date: 2021-09-16 11:27:35
- * @LastEditTime: 2021-09-26 14:47:56
- * @LastEditors: your name
+ * @LastEditTime: 2021-09-28 08:58:08
+ * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \hyyfClient\src\views\BioSafety\DeadPig.vue
 -->
@@ -12,13 +12,20 @@
     <query-conditions :formItems="formItems" :propFormData="propFormData" @getQueryParams="handleQuery"></query-conditions>
 
     <!-- 表格 -->
-    <new-table :title="title" :listData="listData" :tableItems="tableItems" :shows="tableShows"></new-table>
+    <new-table :title="title" :listData="listData" :tableItems="tableItems" :shows="tableShows" :height="535"></new-table>
+    <table-footer
+      :totals="total"
+      :size="size"
+      @sizeChange="sizeChange"
+      @pageChange="pageChange">
+    </table-footer>
   </div>
 </template>
 
 <script>
 import QueryConditions from 'components/bioSafety/QueryConditions'
 import NewTable from 'components/newTable/NewTable'
+import TableFooter from "../../components/TableFooter"
 
 import { formItems, propFormData } from './deadPig/queryCondition.config'
 import { title, tableItems, tableShows } from './deadPig/table.config'
@@ -27,7 +34,8 @@ export default {
   name: "DeadPig",
   components: {
     QueryConditions,
-    NewTable
+    NewTable,
+    TableFooter
   },
   data() {
     return {
@@ -36,7 +44,12 @@ export default {
       title: '', // 传给 BioTable 组件的 title
       listData: [], // 传给 BioTable 组件的表格展示的值 listData
       tableItems: [], // 传给 BioTable 组件的表格的列表 tableItems
-      tableShows: {}
+      tableShows: {},
+      // table的翻页
+      total: 0,
+      size: 20,
+      pageNum: 1,
+      selectId: ''
     }
   },
   mounted() {
@@ -50,6 +63,25 @@ export default {
     // 获取查询条件
     handleQuery(params) {
       console.log(params)
+    },
+    // 修改size
+    sizeChange(val) {
+      this.size = val;
+      this.init();
+    },
+    // 修改页数
+    pageChange(val) {
+      this.pageNum= val;
+      this.init();
+    },
+    init() {
+      let params = {
+        pageNum: this.pageNum,
+        pageSize: this.size,
+        searchStr: this.keyword
+      }
+      console.log(params)
+      // 获取后端数据
     }
   },
 }

src/views/BioSafety/PersonAdmin.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-09-16 11:27:35
- * @LastEditTime: 2021-09-26 14:32:00
+ * @LastEditTime: 2021-09-28 08:57:08
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \hyyfClient\src\views\BioSafety\PersonAdmin.vue
@@ -19,7 +19,7 @@
     <query-conditions :formItems="formItems" :propFormData="propFormData" @getQueryParams="handleQuery"></query-conditions>
 
     <!-- 表格 -->
-    <new-table :title="title" :listData="listData" :tableItems="tableItems" :shows="tableShows">
+    <new-table :title="title" :listData="listData" :tableItems="tableItems" :shows="tableShows" :height="475">
       <template v-slot:right>
         <template v-if="btnSelected === 1">
           <div>
@@ -39,6 +39,12 @@
         </template>
       </template>
     </new-table>
+    <table-footer
+      :totals="total"
+      :size="size"
+      @sizeChange="sizeChange"
+      @pageChange="pageChange">
+    </table-footer>
   </div>
 </template>
 
@@ -46,6 +52,7 @@
 import HeadBtns from 'components/bioSafety/Btns'
 import QueryConditions from 'components/bioSafety/QueryConditions'
 import NewTable from 'components/newTable/NewTable'
+import TableFooter from "../../components/TableFooter"
 
 import { formItems, propFormData } from './personAdmin/queryCondition.config'
 import { titles, tableItems, tableShows } from './personAdmin/table.config'
@@ -55,7 +62,8 @@ export default {
   components: {
     HeadBtns,
     QueryConditions,
-    NewTable
+    NewTable,
+    TableFooter
   },
   data() {
     return {
@@ -70,7 +78,12 @@ export default {
       title: '', // 传给 BioTable 组件的 title
       listData: [], // 传给 BioTable 组件的表格展示的值 listData
       tableItems: [], // 传给 BioTable 组件的表格的列表 tableItems
-      tableShows: {}
+      tableShows: {},
+      // table的翻页
+      total: 0,
+      size: 20,
+      pageNum: 1,
+      selectId: ''
     }
   },
   mounted() {
@@ -92,6 +105,25 @@ export default {
     // 获取查询条件
     handleQuery(params) {
       console.log(params)
+    },
+    // 修改size
+    sizeChange(val) {
+      this.size = val;
+      this.init();
+    },
+    // 修改页数
+    pageChange(val) {
+      this.pageNum= val;
+      this.init();
+    },
+    init() {
+      let params = {
+        pageNum: this.pageNum,
+        pageSize: this.size,
+        searchStr: this.keyword
+      }
+      console.log(params)
+      // 获取后端数据
     }
   },
 }

src/views/BioSafety/StiflingAdmin.vue

@@ -18,12 +18,19 @@
         <el-button @click="handleClick(scope.row)">删除</el-button>
       </template>
     </new-table>
+    <table-footer
+      :totals="total"
+      :size="size"
+      @sizeChange="sizeChange"
+      @pageChange="pageChange">
+    </table-footer>
   </div>
 </template>
 
 <script>
 import QueryConditions from 'components/bioSafety/QueryConditions'
 import NewTable from 'components/newTable/NewTable'
+import TableFooter from "../../components/TableFooter";
 
 import { formItems, propFormData } from './stiflingAdmin/queryCondition.config'
 import { title, tableItems, tableShows } from './stiflingAdmin/table.config'
@@ -32,7 +39,8 @@ export default {
   name: "PersonAdmin",
   components: {
     QueryConditions,
-    NewTable
+    NewTable,
+    TableFooter
   },
   data() {
     return {
@@ -50,7 +58,12 @@ export default {
       ],
       tableItems: [], // 传给 BioTable 组件的表格的列表 tableItems
       tableShows: {},
-      height: 550
+      height: 535,
+      // table的翻页
+      total: 0,
+      size: 20,
+      pageNum: 1,
+      selectId: ''
     }
   },
   mounted() {
@@ -70,6 +83,25 @@ export default {
     },
     handleSelectChange(rows) {
       console.log(rows)
+    },
+    // 修改size
+    sizeChange(val) {
+      this.size = val;
+      this.init();
+    },
+    // 修改页数
+    pageChange(val) {
+      this.pageNum= val;
+      this.init();
+    },
+    init() {
+      let params = {
+        pageNum: this.pageNum,
+        pageSize: this.size,
+        searchStr: this.keyword
+      }
+      console.log(params)
+      // 获取后端数据
     }
   },
 }

src/views/BioSafety/stiflingAdmin/table.config.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-09-18 16:06:51
- * @LastEditTime: 2021-09-26 14:38:57
+ * @LastEditTime: 2021-09-28 14:04:57
  * @LastEditors: Please set LastEditors
  * @Description: 表格的配置
  * @FilePath: \hyyfClient\src\views\BioSafety\personAdmin\table.config.js

src/views/PdcData/Analysis.vue

@@ -1,13 +1,104 @@
 <template>
-  <div>erp数据分析</div>
+  <div class="analysis">
+    <!-- 工作看板 -->
+    <board :title="title[0]">
+      <div>
+        <work-infos :dataList="workInfos" @workInfoClick="handleWorkInfoClick"></work-infos>
+        <div class="table-content">
+          <table-content 
+            :tableItems="tableItems" 
+            :height="height" 
+            :shows="tableShows"
+            :listData="tableData">
+          </table-content>
+        </div>
+      </div>
+    </board>
+
+    <!-- 存栏情况 -->
+    <board :title="title[1]">
+      <div></div>
+    </board>
+  </div>
 </template>
 
 <script>
+import Board from 'components/board/index.vue'
+import WorkInfos from './analysis/WorkInfos.vue'
+import TableContent from 'components/newTable/TableContent.vue'
+
+import { tableItems, tableShows } from './analysis/table.config'
+
 export default {
-  name: "Analysis"
+  name: "Analysis",
+  components: {
+    Board,
+    WorkInfos,
+    TableContent
+  },
+  data() {
+    return {
+      title: ['工作看板', '存栏情况'],
+      workInfos: [
+        {
+          label: '预警信息',
+          number: 10
+        },
+        {
+          label: '断奶数量',
+          number: 1150
+        },
+        {
+          label: '配种数量',
+          number: 1540
+        },
+        {
+          label: '转舍计划',
+          number: 108
+        },
+        {
+          label: '分娩数量',
+          number: 180
+        },
+        {
+          label: '日常计划',
+          number: 10
+        },
+        {
+          label: '天才计划',
+          number: 10
+        },
+        {
+          label: '保健计划',
+          number: 10
+        }
+      ],
+      tableItems: [], 
+      tableShows: {},
+      height: 300,
+      tableData: []
+    }
+  },
+  mounted() {
+    this.tableItems = tableItems
+    this.tableShows = tableShows
+  },
+  methods: {
+    handleWorkInfoClick(item) {
+      console.log(item)
+    }
+  },
 }
 </script>
 
 <style scoped>
-
+.analysis {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 20px;
+}
+.table-content {
+  padding: 10px 15px 12px;
+}
 </style>

src/views/PdcData/analysis/WorkInfos.vue

@@ -0,0 +1,61 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-09-28 11:28:08
+ * @LastEditTime: 2021-09-28 13:49:48
+ * @LastEditors: Please set LastEditors
+ * @Description: 工作看板的预警信息等统计
+ * @FilePath: \hyyfClient\src\views\PdcData\analysis\WorkInfos.vue
+-->
+<template>
+  <div class="work-info">
+    <el-row>
+      <template v-for="item in dataList">
+        <el-col :span="12" :key="item.label">
+          <div class="item" @click="handleClick(item)">
+            <span class="label">{{ item.label }}</span>
+            <span class="right">(<span class="number">{{ item.number }}</span>)</span>
+          </div>
+        </el-col>
+      </template>
+    </el-row>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    dataList: {
+      type: Array,
+      required: true
+    }
+  },
+  methods: {
+    handleClick(item) {
+      this.$emit('workInfoClick', item)
+    }
+  },
+}
+</script>
+<style scoped>
+  .work-info {
+    padding: 20px;
+  }
+
+  .item {
+    padding: 15px 15px 7px;
+    border-bottom: 1px solid rgba(235, 238, 245, 1);
+    font-size: 13px;
+    margin: 0px 10px;
+  }
+  .item:hover {
+    background-color: #eee;
+  }
+  .item>.label {
+    color: #bcbcbc;
+  }
+  .item>.right {
+    float: right;
+  }
+  .item>.right>.number {
+    color: #f04844;
+  }
+</style>

src/views/PdcData/analysis/table.config.js

@@ -0,0 +1,31 @@
+/*
+ * @Author: your name
+ * @Date: 2021-09-28 13:54:21
+ * @LastEditTime: 2021-09-28 13:54:22
+ * @LastEditors: Please set LastEditors
+ * @Description: 生产数据 - ERP数据分析 - 工作看板 的表格
+ * @FilePath: \hyyfClient\src\views\PdcData\analysis\table.config.js
+ */
+export const tableItems = [
+  {
+    prop: 'time',
+    label: '报警时间',
+    minWidth: '200',
+    slotName: 'time'
+  },
+  {
+    prop: 'content',
+    label: '内容',
+    minWidth: '400',
+    slotName: 'content'
+  },
+  {
+    label: '操作',
+    minWidth: '150',
+    slotName: 'handler'
+  }
+]
+
+export const tableShows = {
+  showIndex: false, showSelect: true
+}

vue.config.js

@@ -1,3 +1,11 @@
+/*
+ * @Author: your name
+ * @Date: 2021-09-16 11:27:35
+ * @LastEditTime: 2021-09-28 11:02:09
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \hyyfClient\vue.config.js
+ */
 const CompressionWebpackPlugin = require("compression-webpack-plugin");
 const path = require('path')
 const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;