首页数据钻取

src/dashoo.cn/frontend_web/src/pages/lims/secondcenter/pieCheckResult.vue

@@ -0,0 +1,161 @@
+<template>
+  <div>
+    <el-form :inline="true" :model="formSearch" class="demo-form-inline" size="mini">
+      <el-form-item label="检测地点">
+        <el-select v-model="formSearch.checkPosition" placeholder="检测地点">
+          <el-option label="采油一厂" value="shanghai"></el-option>
+          <el-option label="采油二厂" value="beijing"></el-option>
+          <el-option label="采油三厂" value="beijing2"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">查询</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10">
+      <el-col :span="12">
+        <v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
+          <v-tooltip :showTitle="false" dataKey="item*percent" />
+          <v-axis />
+          <v-legend dataKey="item" />
+          <v-pie position="percent" color="item" :v-style="pieStyle" :label="labelConfig" />
+          <v-coord type="theta" />
+        </v-chart>
+      </el-col>
+      <el-col :span="12">
+        <el-table
+          :data="tableData"
+          size="mini"
+          :height="450"
+          stripe>
+          <el-table-column
+            prop="address"
+            width="190"
+            fixed="left"
+            label="检测地点">
+          </el-table-column>
+
+          <el-table-column
+            prop="number"
+            label="设备总量"
+            width="180">
+          </el-table-column>
+
+          <el-table-column
+            prop="number"
+            label="全年待检"
+            width="180">
+          </el-table-column>
+
+          <el-table-column
+            prop="name"
+            label="全年已检"
+            width="180">
+          </el-table-column>
+
+          <el-table-column
+            prop="name"
+            label="合格率"
+            width="180">
+          </el-table-column>
+
+        </el-table>
+      </el-col>
+
+    </el-row>
+
+  </div>
+
+
+</template>
+
+<style>
+  .el-table .warning-row {
+    background: oldlace;
+  }
+
+  .el-table .success-row {
+    background: #f0f9eb;
+  }
+</style>
+
+<script>
+  const DataSet = require('@antv/data-set')
+  import ElCol from "element-ui/packages/col/src/col";
+
+  const sourceData = [
+    { item: '全年待检', count: 40 },
+    { item: '全年已检', count: 60 }
+  ]
+
+  const scale = [{
+    dataKey: 'percent',
+    min: 0,
+    formatter: '.0%'
+  }]
+
+  const dv = new DataSet.View().source(sourceData)
+  dv.transform({
+    type: 'percent',
+    field: 'count',
+    dimension: 'item',
+    as: 'percent'
+  })
+  const data = dv.rows
+
+  export default {
+    components: {ElCol},
+    created () {
+
+    },
+    data () {
+      return {
+        formSearch: {
+          daterange: [],
+          checkPosition: '',
+          equipments: []
+        },
+        height: 400,
+        tableData: [{
+          precent: 70,
+          date: '120',
+          name: '111',
+          address: '采油一厂',
+        }, {
+          precent: 60,
+          date: '120',
+          name: '111',
+          address: '采油二厂'
+        }, {
+          precent: 66,
+          date: '120',
+          name: '111',
+          address: '采油三厂',
+        }, {
+          precent: 80,
+          date: '120',
+          name: '111',
+          address: '采油四厂'
+        }],
+
+        data,
+        scale,
+        pieStyle: {
+          stroke: "#fff",
+          lineWidth: 1
+        },
+        labelConfig: ['percent', {
+          formatter: (val, item) => {
+            return item.point.item + ': ' + val;
+          }
+        }]
+
+      }
+    },
+    methods: {
+      onSubmit () {
+      }
+    }
+  }
+</script>

src/dashoo.cn/frontend_web/src/pages/lims/secondcenter/towLevelCenter.vue

@@ -34,20 +34,25 @@
           </el-form-item>
         </el-form>
       </div>
-      <el-table :data="tableData" style="width: 100%" stripe   v-loading="loading">
-        <el-table-column prop="DeviceName" label="设备名称" ></el-table-column>
+      <el-table :data="tableData" size="mini" style="width: 100%" stripe   v-loading="loading">
+        <el-table-column prop="DeviceName" label="设备名称" >
+
+          <template slot-scope="scope">
+            <el-link type="primary" @click="showPie(scope.row)">{{scope.row.DeviceName}}</el-link>
+          </template>
+        </el-table-column>
 
         <el-table-column prop="DeviceQty" label="设备总量" ></el-table-column>
 
-        <el-table-column prop="WaitMonth" label="本月待检"></el-table-column>
+        <!--<el-table-column prop="WaitMonth" label="本月待检"></el-table-column>
 
-        <el-table-column prop="FinishMonth" label="本月检测" ></el-table-column>
+        <el-table-column prop="FinishMonth" label="本月检测" ></el-table-column>-->
 
         <el-table-column prop="WaitYear" label="全年待检"></el-table-column>
 
         <el-table-column prop="FinishYear" label="全年已检"></el-table-column>
 
-        <el-table-column prop="FinishYear" label="全年检测"></el-table-column>
+       <!-- <el-table-column prop="FinishYear" label="全年检测"></el-table-column>-->
 
         <el-table-column prop="PassRate" label="合格率(%)"></el-table-column>
       </el-table>
@@ -63,6 +68,10 @@
       </v-chart>
     </el-card>
 
+    <el-dialog :visible="pieDialogVisible" width="85%" title="防雷装置检测率">
+      <pie-check-result></pie-check-result>
+    </el-dialog>
+
   </div>
 
 
@@ -70,6 +79,8 @@
 
 <script>
   import api from '@/api/lims/secondcenter'
+
+  import pieCheckResult from './pieCheckResult.vue'
   import {
     mapGetters
   } from 'vuex'
@@ -79,9 +90,13 @@
     computed: mapGetters({
       authUser: 'authUser'
     }),
+    components: {
+      pieCheckResult
+    },
     data () {
       return {
         loading: true,
+        pieDialogVisible: false,
         Isauthority: false,
         beijiance: false,
         jiancedidian: false,
@@ -152,6 +167,9 @@
       this.getDictOptions()
     },
     methods: {
+      showPie (row) {
+        this.pieDialogVisible = true
+      },
       getAuthority () {
         let params = {
           Code: 'lims.secondcenter.all'