修改了首页

pages/workbench/UnfinishedContract.vue

+<template>
+  <div>
+    <Card style="width:100%">
+      <div class="config_meta">
+        <p class="fl">待完成委托 {{total}} </p>
+        <div class="fr">
+          <Tooltip content="刷新" placement="left-start">
+            <Icon @click="_request" type="ios-refresh" size="30" color="#2d8cf0" style="cursor:pointer;"></Icon>
+          </Tooltip>
+          <Tooltip content="查看更多" placement="left-start" style="margin-left: 5px">
+            <Icon @click="_detail" type="ios-more" size="30" color="#2d8cf0" style="cursor:pointer;"></Icon>
+          </Tooltip>
+        </div>
+        <div class="clear"></div>
+      </div>
+      <div style="width: 100%;">
+        <element-table ref="pageTable" :pageColumns="pageColumns"
+                       :tableHeight="tableHeight" :getPage="tableData" hide-checkbox>
+          <el-table-column
+            :prop="item.key"
+            :label="item.title"
+            :min-width="item.width?item.width:200"
+            :fixed="item.fixed?item.fixed:undefined"
+            v-for="item in pageColumns"
+            :key="item.key"
+            show-overflow-tooltip sortable>
+            <template slot-scope="scope">
+              <span v-if="item.date">{{$dateformat(scope.row[item.key],'yyyy-mm-dd')}}</span>
+              <span v-else>{{scope.row[item.key]}}</span>
+            </template>
+          </el-table-column>
+        </element-table>
+      </div>
+    </Card>
+    <!--未完成委托列表-->
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  data() {
+    return {
+      tableData: { records: [] },
+      pageColumns: [
+        { title: '委托单位', key: 'cname' },
+        { title: '委托编号', key: 'code', width: 180 },
+        { title: '应出报告日期', key: 'reportDueDate', date: true },
+        { title: '状态', key: 'progress', width: 110 }
+      ],
+      tableHeight: '280',
+      total: ''
+    }
+  },
+  mounted() {
+    // this._request()
+  },
+  methods: {
+    _detail() {
+      this.$refs.unfinishedDetail._open()
+    },
+    _request() {
+      this.$refs.pageTable._hideLoading()
+      this.$store
+        .dispatch('FoodContract/unfinishedContract', { page: 1, rows: 7 })
+        .then(() => {
+          const tableData = this.$store.state.FoodContract.page.records
+          const total = this.$store.state.FoodContract.page.total
+
+          if (total === 0) {
+            this.total = ''
+          } else {
+            this.total = '（共 ' + total + ' 条）'
+          }
+          let num = 0
+          if (tableData.length < 7) {
+            num = tableData.length
+          } else {
+            num = 7
+          }
+          for (let i = 0; i < num; i++) {
+            this.tableData.records.push(tableData[i])
+          }
+        })
+    }
+  }
+}
+</script>

pages/workbench/UnfinishedItem.vue

+<template>
+  <div>
+    <Card style="width:100%">
+      <div class="config_meta">
+        <p class="fl">待检检测项目 {{total}} </p>
+        <div class="fr">
+          <Tooltip content="刷新" placement="left-start">
+            <Icon @click="_request" type="ios-refresh" size="30" color="#2d8cf0" style="cursor:pointer;"></Icon>
+          </Tooltip>
+          <Tooltip content="查看更多" placement="left-start" style="margin-left: 5px">
+            <Icon @click="_detail" type="ios-more" size="30" color="#2d8cf0" style="cursor:pointer;"></Icon>
+          </Tooltip>
+        </div>
+        <div class="clear"></div>
+      </div>
+      <div style="width: 100%;">
+        <element-table ref="pageTable" :pageColumns="pageColumns"
+                       :tableHeight="tableHeight" :getPage="tableData" hide-checkbox>
+          <el-table-column
+            :prop="item.key"
+            :label="item.title"
+            :min-width="item.width"
+            :fixed="item.fixed?item.fixed:undefined"
+            v-for="item in pageColumns"
+            :key="item.key"
+            show-overflow-tooltip sortable>
+            <template slot-scope="scope">
+              <span v-if="item.status">{{scope.row.progress.display}}</span>
+              <span v-else>{{scope.row[item.key]}}</span>
+            </template>
+          </el-table-column>
+        </element-table>
+      </div>
+    </Card>
+    <!--未完成检测项目列表-->
+    <FoodUnfinishedItem ref="unfinishedDetail"></FoodUnfinishedItem>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  data() {
+    return {
+      tableData: { records: [] },
+      pageColumns: [
+        { title: '状态', key: 'progress', width: 110, status: true },
+        { title: '检测项目名称', key: 'name', width: 150 },
+        { title: '检测依据', key: 'testBasis', width: 140 },
+        { title: '样品编号', key: 'num', width: 180 },
+        { title: '样品名称', key: 'sampleName', width: 120 },
+        { title: '所属科室', key: 'groupName', width: 100 }
+      ],
+      tableHeight: '280',
+      total: ''
+    }
+  },
+  mounted() {
+    // this._request()
+  },
+  methods: {
+    _detail() {
+      this.$refs.unfinishedDetail._open()
+    },
+    _request() {
+      this.$refs.pageTable._hideLoading()
+      this.$store
+        .dispatch('StatisticContract/pageItem', { page: 1, rows: 7 })
+        .then(() => {
+          const tableData = this.$store.state.StatisticContract.page.records
+          const total = this.$store.state.StatisticContract.page.total
+
+          if (total === 0) {
+            this.total = ''
+          } else {
+            this.total = '（共 ' + total + ' 条）'
+          }
+          let num = 0
+          if (tableData.length < 7) {
+            num = tableData.length
+          } else {
+            num = 7
+          }
+          for (let i = 0; i < num; i++) {
+            this.tableData.records.push(tableData[i])
+          }
+        })
+    }
+  }
+}
+</script>

pages/workbench/YearContractNum.vue

+<template>
+  <div>
+    <Card style="width:100%;">
+      <div class="config_meta">
+        <p class="fl">年度委托量统计</p>
+        <div class="fr">
+          <Tooltip content="刷新" placement="left-start">
+            <Icon @click="_request" type="ios-refresh" size="30" color="#2d8cf0" style="cursor:pointer;"></Icon>
+          </Tooltip>
+        </div>
+        <div class="clear"></div>
+      </div>
+      <Row>
+        <Col span="24" style="margin-bottom: 10px">
+        日期：
+        <DatePicker v-model="date" :editable="false" @on-change="_dateChange" :clearable="false"
+                    type="year" style="width:90px"></DatePicker>
+        </Col>
+        <Col span="24">
+        <div style="width:100%">
+          <!--柱状图-->
+          <IEcharts :option="option" :style="{width}" @click="_detail" style="height: 302px"></IEcharts>
+        </div>
+        </Col>
+      </Row>
+    </Card>
+    <!--月详情-->
+<!--    <contractNumDetail ref="contractNumDetail"></contractNumDetail>-->
+  </div>
+</template>
+<script>
+// import IEcharts from 'vue-echarts-v3/src/full.js'
+
+export default {
+  components: {},
+  data() {
+    return {
+      width: '',
+      date: new Date(),
+      option: {
+        color: this.$echartColor,
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            crossStyle: {
+              color: '#999'
+            }
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+          x: 130
+        },
+        legend: {
+          data: ['合同量']
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: [],
+            axisPointer: {
+              type: ''
+            },
+            axisLine: {
+              lineStyle: {
+                color: 'gray'
+              }
+            },
+            splitLine: { show: false }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '委托量(份)',
+            min: 0,
+            axisLabel: {
+              formatter: '{value}'
+            },
+            axisLine: {
+              lineStyle: {
+                color: 'gray'
+              }
+            },
+            splitLine: { show: false }
+          },
+          {
+            type: 'value',
+            name: '委托金额(元)',
+            min: 0,
+            axisLabel: {
+              formatter: '{value}'
+            },
+            axisLine: {
+              lineStyle: {
+                color: 'gray'
+              }
+            },
+            splitLine: { show: false }
+          }
+        ],
+        series: [
+          {
+            name: '委托量',
+            type: 'bar',
+            data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120]
+          },
+          {
+            name: '委托金额',
+            type: 'line',
+            yAxisIndex: 1,
+            data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120]
+          }
+        ]
+      },
+      // 临时存储x轴数据
+      tempXAxis: []
+    }
+  },
+  mounted() {
+    this.width = (document.documentElement.clientWidth - 300) / 2 + 'px'
+    this._dateChange(this.$dateformat(new Date(), 'yyyy'))
+  },
+  methods: {
+    _request() {
+      this._openBar(this.year)
+    },
+    // 改变年份
+    _dateChange(data) {
+      // this._openBar(data)
+    },
+    _openBar(data) {
+      this.year = data
+      this.option.xAxis[0].data = []
+      this.tempXAxis = []
+      for (let i = 1; i < 13; i++) {
+        if (i < 10) {
+          this.tempXAxis.push(data + '-0' + i)
+        } else {
+          this.tempXAxis.push(data + '-' + i)
+        }
+        this.option.xAxis[0].data.push(i + '月')
+      }
+      this.$store
+        .dispatch('StatisticContract/pageYearContract', { year: data })
+        .then(() => {
+          const bar = this.$store.state.StatisticContract.page
+          this.option.series[0].data = []
+          this.option.series[1].data = []
+          for (let j = 0; j < bar.length; j++) {
+            for (let k = 0; k < this.tempXAxis.length; k++) {
+              if (bar[j].yearMonth === this.tempXAxis[k]) {
+                this.option.series[0].data[k] = bar[j].total
+                this.option.series[1].data[k] = bar[j].price
+              }
+            }
+          }
+        })
+    },
+    // 查看每月详情
+    _detail(data) {
+      // 11月 转换成 2018-11
+      const index = this.option.xAxis[0].data.indexOf(data.name)
+      const yearMonth = this.tempXAxis[index]
+      this.$refs.contractNumDetail._open({ yearMonth: yearMonth })
+    }
+  }
+}
+</script>

pages/workbench/workbench.vue

@@ -34,6 +34,15 @@
           <Col span="12" style="margin-bottom: 10px">
 <!--            <taskCalendar />-->
           </Col>
+          <Col span="12" style="margin-bottom: 10px">
+            <UnfinishedContract></UnfinishedContract>
+          </Col>
+          <Col span="12" style="margin-bottom: 10px">
+            <UnfinishedItem></UnfinishedItem>
+          </Col>
+          <Col span="12" style="margin-bottom: 10px">
+            <YearContractNum></YearContractNum>
+          </Col>
         </Row>
       </div>
     </div>
@@ -47,6 +56,9 @@ import toDoTask from './ToDoTask'
 import myTask from './MyTask'
 import taskFlow from './TaskFlow'
 // import taskCalendar from './task-calendar/TaskCalendar'
+import UnfinishedContract from './UnfinishedContract'
+import UnfinishedItem from './UnfinishedItem'
+import YearContractNum from './YearContractNum'
 export default {
   name: 'Workbench',
   components: {
@@ -54,8 +66,11 @@ export default {
     messagePanel,
     myTask,
     toDoTask,
-    taskFlow
+    taskFlow,
     // taskCalendar
+    UnfinishedContract,
+    UnfinishedItem,
+    YearContractNum
   }
 }
 </script>