加入G2图表控件

src/dashoo.cn/frontend_web/nuxt.config.ignore.js

@@ -96,7 +96,8 @@ module.exports = {
     '@/plugins/element-ui',
     // '@/plugins/axios-defaults',
     {src: '@/plugins/clipboard', ssr: false},
-    {src: '@/plugins/error-handler', ssr: false}
+    {src: '@/plugins/error-handler', ssr: false},
+    {src: '@/plugins/viser-vue', ssr: false}
   ],
 
   modules: [
@@ -132,8 +133,8 @@ module.exports = {
   },
 
   axios: {
-    baseURL: '//localhost:10091/api/' // 本机开发使用
-    //baseURL: '//47.92.212.59:10091/api/' // Lims使用
+    //baseURL: '//localhost:10091/api/' // 本机开发使用
+    baseURL: '//47.92.212.59:10091/api/' // Lims使用
     // baseURL: '//api09.labsop.cn/api/'
     // baseURL: '//52.80.133.197:10091/api/' // DQM 爱萨尔发布使用
     // baseURL: '//192.168.0.211:10091/api/' // 花生所系统
@@ -154,38 +155,11 @@ module.exports = {
     upfilehost: 'http://weed1.labsop.cn:9333/dir/assign', // 附件上传
     // imgserverhost: 'http://192.168.0.211:10091', // 花生所系统服务地址,图片上传文件
     // upfilehost: 'http://192.168.0.211:9333/dir/assign' // 花生所系统附件上传
-    limsimgserverhost:'http://47.92.212.59:10091',//lims图片上传
+    limsimgserverhost: 'http://47.92.212.59:10091', //lims图片上传
     onlyofficeUrl: 'http://47.92.212.59:9221', //onlyoffice地址 Lims
     onlyofficeCallBackUrl: 'http://47.92.212.59:10091', //onlyofficeCallBack地址  Lims
     baseURL: '//47.92.212.59:10091/api/'
   },
   ignore: [
-    'pages/customer/**/*.*',
-    'pages/detection/**/*.*',
-    'pages/documentmanage/**/*.*',
-    'pages/handover/**/*.*',
-    'pages/hospitalresult/**/*.*',
-    'pages/donors/**/*.*',
-    'pages/equipment/**/*.*',
-    'pages/handover/**/*.*',
-    'pages/hospitalresult/**/*.*',
-    'pages/instrument/!**!/!*.*',
-    'pages/labInfo/**/*.*',
-    'pages/lims/!**!/!*.*',
-    'pages/lisapply/**/*.*',
-    'pages/lispackageresult/**/*.*',
-    'pages/log/**/*.*',
-    'pages/makerTemplates/**/*.*',
-    'pages/material/**/*.*',
-    'pages/positivereport/**/*.*',
-    'pages/preprocess/**/*.*',
-    'pages/projectmanage/**/*.*',
-    'pages/qualitycontrol/**/*.*',
-    'pages/report/**/*.*',
-    'pages/sampleboard/**/*.*',
-    'pages/samples/**/*.*',
-    'pages/sampletest/**/*.*',
-    /*'pages/setting/!**!/!*.*',*/
-    'pages/transferLab/**/*.*',
   ]
 }

src/dashoo.cn/frontend_web/nuxt.config.js

@@ -123,7 +123,11 @@ module.exports = {
     {
       src: '@/plugins/error-handler',
       ssr: false
-    }
+    },
+    {
+      src: '@/plugins/viser-vue',
+      ssr: false
+	}
   ],
 
   modules: [

src/dashoo.cn/frontend_web/package.json

@@ -17,6 +17,10 @@
     "precommit": "npm run lint"
   },
   "dependencies": {
+    "@antv/data-set": "^0.10.2",
+    "@antv/g2": "^3.5.3",
+    "@antv/g2-brush": "^0.0.2",
+    "@antv/g2-plugin-slider": "^2.1.1",
     "@nuxtjs/axios": "^4.4.0",
     "axios": "^0.16.2",
     "chart.js": "^2.7.0",
@@ -31,6 +35,7 @@
     "normalize.css": "^7.0.0",
     "nuxt": "^1.0.0",
     "store": "^2.0.12",
+    "viser-vue": "^2.4.5",
     "vue-chartjs": "^3.0.0",
     "vue-class-component": "^5.0.1",
     "vue-clipboards": "^1.1.0",

src/dashoo.cn/frontend_web/src/pages/prototype/leaderIndex.vue

@@ -0,0 +1,255 @@
+<template>
+  <div style="width: 100%; overflow-y: auto">
+    <el-row :gutter="10" style="width: 100%; overflow: hidden">
+      <el-col :span="6">
+        <el-card class="box-card">
+          <div slot="header">
+            <legend style="color:#436EEE"></legend>
+            <i class="icon icon-database"> 本月实际计划</i>
+          </div>
+          <el-progress type="circle" :percentage="80"></el-progress>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card class="box-card">
+          <div slot="header">
+            <legend style="color:#436EEE"></legend>
+            <i class="icon icon-database"> 本月实际检测</i>
+          </div>
+          <el-progress type="circle" :percentage="80"></el-progress>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card class="box-card">
+          <div slot="header">
+            <legend style="color:#436EEE"></legend>
+            <i class="icon icon-database"> 同比检测</i>
+          </div>
+          <el-progress type="circle" :percentage="89" color="#8e71c7"></el-progress>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card class="box-card">
+          <div slot="header">
+            <legend style="color:#436EEE"></legend>
+            <i class="icon icon-database"> 环比检测</i>
+          </div>
+          <el-progress type="circle" :percentage="90"></el-progress>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="10" style="margin-top: 10px">
+      <el-col :span="24">
+        <el-card class="box-card">
+          <div slot="header">
+            <legend style="color:#436EEE"></legend>
+            <i class="icon icon-database">各单位检测数量统计</i>
+          </div>
+          <v-chart :force-fit="true" :height="height" :data="mdata" :scale="mscale">
+			  <v-tooltip />
+			  <v-axis />
+			  <v-legend />
+			  <v-line position="month*temperature" color="city" />
+			  <v-point position="month*temperature" color="city" :size="4" :v-style="style" :shape="'circle'" />
+			</v-chart>
+
+          </el-table>
+        </el-card>
+      </el-col>
+
+      <el-col :span="12">
+        <el-card class="box-card">
+          <div slot="header">
+            <legend style="color:#436EEE"></legend>
+            <i class="icon icon-database"> 历年报告数量</i>
+          </div>
+          <v-chart :forceFit="true" :height="height" :data="chartData" :scale="scale">
+            <v-tooltip />
+            <v-axis />
+            <v-bar position="year*sales" />
+          </v-chart>
+        </el-card>
+      </el-col>
+
+      <el-col :span="12">
+        <el-card class="box-card">
+          <div slot="header">
+            <legend style="color:#436EEE"></legend>
+            <i class="icon icon-database"> 历年合格报告数量</i>
+          </div>
+          <v-chart :forceFit="true" :height="height" :data="lineData" :scale="lineScale">
+            <v-tooltip />
+            <v-axis />
+            <v-line position="year*value" />
+            <v-point position="year*value" shape="circle" />
+          </v-chart>
+        </el-card>
+      </el-col>
+	  
+	  <el-col :span="12">
+        <el-card class="box-card">
+          <div slot="header">
+            <legend style="color:#436EEE"></legend>
+            <i class="icon icon-database"> 检测报告分类统计</i>
+          </div>
+         <v-chart :forceFit="true" :height="height" :data="lineData" :scale="lineScale">
+            <v-tooltip />
+            <v-axis />
+            <v-line position="year*value" />
+            <v-point position="year*value" shape="circle" />
+          </v-chart>
+        </el-card>
+      </el-col>
+
+      <el-col :span="12">
+        <el-card class="box-card">
+          <div slot="header">
+            <legend style="color:#436EEE"></legend>
+            <i class="icon icon-database"> 合格率</i>
+          </div>
+          <v-chart :forceFit="true" :height="height" :data="lineData" :scale="lineScale">
+            <v-tooltip />
+            <v-axis />
+            <v-line position="year*value" />
+            <v-point position="year*value" shape="circle" />
+          </v-chart>
+        </el-card>
+      </el-col>
+
+    </el-row>
+
+  </div>
+
+
+</template>
+
+<style>
+  .el-table .warning-row {
+    background: oldlace;
+  }
+
+  .el-table .success-row {
+    background: #f0f9eb;
+  }
+</style>
+
+<script>
+  const chartData = [
+    { year: '1951 年', sales: 38 },
+    { year: '1952 年', sales: 52 },
+    { year: '1956 年', sales: 61 },
+    { year: '1957 年', sales: 145 },
+    { year: '1958 年', sales: 48 },
+    { year: '1959 年', sales: 38 },
+    { year: '1960 年', sales: 38 },
+    { year: '1962 年', sales: 38 },
+  ];
+
+  const scale = [{
+    dataKey: 'sales',
+    tickInterval: 20,
+  }];
+
+  const lineData = [
+    { year: '1991', value: 3 },
+    { year: '1992', value: 4 },
+    { year: '1993', value: 3.5 },
+    { year: '1994', value: 5 },
+    { year: '1995', value: 4.9 },
+    { year: '1996', value: 6 },
+    { year: '1997', value: 7 },
+    { year: '1998', value: 9 },
+    { year: '1999', value: 13 },
+  ];
+
+  const lineScale = [{
+    dataKey: 'value',
+    min: 0,
+  },{
+    dataKey: 'year',
+    min: 0,
+    max: 1,
+  }];
+  
+  const DataSet = require('@antv/data-set');
+
+const msourceData = [
+  { month: 'Jan', 特检站: 7.0, 宇信公司: 3.9, 计量站: 3.9 },
+  { month: 'Feb', 特检站: 6.9, 宇信公司: 4.2, 计量站: 3.9 },
+  { month: 'Mar', 特检站: 9.5, 宇信公司: 5.7, 计量站: 3.9 },
+  { month: 'Apr', 特检站: 14.5, 宇信公司: 8.5, 计量站: 3.9 },
+  { month: 'May', 特检站: 18.4, 宇信公司: 11.9, 计量站: 3.9 },
+  { month: 'Jun', 特检站: 21.5, 宇信公司: 15.2, 计量站: 3.9 },
+  { month: 'Jul', 特检站: 25.2, 宇信公司: 17.0, 计量站: 3.9 },
+  { month: 'Aug', 特检站: 26.5, 宇信公司: 16.6, 计量站: 3.9 },
+  { month: 'Sep', 特检站: 23.3, 宇信公司: 14.2, 计量站: 3.9 },
+  { month: 'Oct', 特检站: 18.3, 宇信公司: 10.3, 计量站: 3.9 },
+  { month: 'Nov', 特检站: 13.9, 宇信公司: 6.6, 计量站: 3.9 },
+  { month: 'Dec', 特检站: 9.6, 宇信公司: 4.8, 计量站: 3.9 },
+];
+
+const dv = new DataSet.View().source(msourceData);
+dv.transform({
+  type: 'fold',
+  fields: ['特检站', '宇信公司', '计量站'],
+  key: 'city',
+  value: 'temperature',
+});
+const mdata = dv.rows;
+
+const mscale = [{
+  dataKey: 'month',
+  min: 0,
+  max: 1,
+}];
+
+  export default {
+    methods: {
+      tableRowClassName({row, rowIndex}) {
+        if (rowIndex === 1) {
+          return 'warning-row';
+        } else if (rowIndex === 3) {
+          return 'success-row';
+        }
+        return '';
+      }
+    },
+    created () {
+
+    },
+    data () {
+      return {
+        chartData,
+        scale,
+        lineData,
+        lineScale,
+		mdata,
+		mscale,
+		style: { stroke: '#fff', lineWidth: 1 },
+        height: 400,
+        tableData: [{
+          precent: 70,
+          date: '2016-05-02',
+          name: 'A001',
+          address: '无游梁式抽油机检测',
+        }, {
+          precent: 60,
+          date: '2016-05-04',
+          name: 'B002',
+          address: '阻火器检测'
+        }, {
+          precent: 66,
+          date: '2016-05-01',
+          name: 'C003',
+          address: '呼吸阀检测',
+        }, {
+          precent: 80,
+          date: '2016-05-03',
+          name: 'D004',
+          address: '空气泡沫产生器检测'
+        }]
+      }
+    }
+  }
+</script>

src/dashoo.cn/frontend_web/src/pages/prototype/towLevelUnitIndex.vue

@@ -0,0 +1,269 @@
+<template>
+  <div style="width: 100%; overflow-y: auto">
+    <el-row :gutter="10" style="width: 100%; overflow: hidden">
+      <el-col :span="6">
+        <el-card class="box-card">
+          <div slot="header">
+            <legend style="color:#436EEE"></legend>
+            <i class="icon icon-database"> 本月实际计划</i>
+          </div>
+          <el-progress type="circle" :percentage="80"></el-progress>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card class="box-card">
+          <div slot="header">
+            <legend style="color:#436EEE"></legend>
+            <i class="icon icon-database"> 本月实际检测</i>
+          </div>
+          <el-progress type="circle" :percentage="80"></el-progress>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card class="box-card">
+          <div slot="header">
+            <legend style="color:#436EEE"></legend>
+            <i class="icon icon-database"> 同比检测</i>
+          </div>
+          <el-progress type="circle" :percentage="89" color="#8e71c7"></el-progress>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card class="box-card">
+          <div slot="header">
+            <legend style="color:#436EEE"></legend>
+            <i class="icon icon-database"> 环比检测</i>
+          </div>
+          <el-progress type="circle" :percentage="90"></el-progress>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="10" style="margin-top: 10px">
+      <el-col :span="12">
+        <el-card class="box-card">
+          <div slot="header">
+            <legend style="color:#436EEE"></legend>
+            <i class="icon icon-database"> 检测任务进度</i>
+          </div>
+          <el-table
+            :data="tableData"
+            style="width: 100%"
+            :row-class-name="tableRowClassName">
+            <el-table-column
+              prop="precent"
+              width="180"
+              label="进度">
+              <template slot-scope="scope">
+                <el-progress :percentage="scope.row.precent"></el-progress>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="date"
+              label="日期"
+              width="180">
+            </el-table-column>
+            <el-table-column
+              prop="name"
+              label="委托单号"
+              width="180">
+            </el-table-column>
+            <el-table-column
+              prop="address"
+              label="检测项目"
+              >
+            </el-table-column>
+
+          </el-table>
+        </el-card>
+      </el-col>
+
+      <el-col :span="12">
+        <el-card class="box-card">
+          <div slot="header">
+            <legend style="color:#436EEE"></legend>
+            <i class="icon icon-database"> 已出报告</i>
+          </div>
+          <el-table
+            :data="tableData"
+            style="width: 100%"
+            :row-class-name="tableRowClassName">
+            <el-table-column
+              prop="date"
+              label="日期"
+              width="180">
+            </el-table-column>
+            <el-table-column
+              prop="name"
+              label="委托单号"
+              width="180">
+            </el-table-column>
+            <el-table-column
+              prop="address"
+              label="检测项目">
+            </el-table-column>
+
+          </el-table>
+        </el-card>
+      </el-col>
+
+      <el-col :span="12">
+        <el-card class="box-card">
+          <div slot="header">
+            <legend style="color:#436EEE"></legend>
+            <i class="icon icon-database"> 历年报告数量</i>
+          </div>
+          <v-chart :forceFit="true" :height="height" :data="chartData" :scale="scale">
+            <v-tooltip />
+            <v-axis />
+            <v-bar position="year*sales" />
+          </v-chart>
+        </el-card>
+      </el-col>
+
+      <el-col :span="12">
+        <el-card class="box-card">
+          <div slot="header">
+            <legend style="color:#436EEE"></legend>
+            <i class="icon icon-database"> 历年合格报告数量</i>
+          </div>
+          <v-chart :forceFit="true" :height="height" :data="lineData" :scale="lineScale">
+            <v-tooltip />
+            <v-axis />
+            <v-line position="year*value" />
+            <v-point position="year*value" shape="circle" />
+          </v-chart>
+        </el-card>
+      </el-col>
+	  
+	  <el-col :span="12">
+        <el-card class="box-card">
+          <div slot="header">
+            <legend style="color:#436EEE"></legend>
+            <i class="icon icon-database"> 检测报告分类统计</i>
+          </div>
+         <v-chart :forceFit="true" :height="height" :data="lineData" :scale="lineScale">
+            <v-tooltip />
+            <v-axis />
+            <v-line position="year*value" />
+            <v-point position="year*value" shape="circle" />
+          </v-chart>
+        </el-card>
+      </el-col>
+
+      <el-col :span="12">
+        <el-card class="box-card">
+          <div slot="header">
+            <legend style="color:#436EEE"></legend>
+            <i class="icon icon-database"> 合格率</i>
+          </div>
+          <v-chart :forceFit="true" :height="height" :data="lineData" :scale="lineScale">
+            <v-tooltip />
+            <v-axis />
+            <v-line position="year*value" />
+            <v-point position="year*value" shape="circle" />
+          </v-chart>
+        </el-card>
+      </el-col>
+
+    </el-row>
+
+  </div>
+
+
+</template>
+
+<style>
+  .el-table .warning-row {
+    background: oldlace;
+  }
+
+  .el-table .success-row {
+    background: #f0f9eb;
+  }
+</style>
+
+<script>
+  const chartData = [
+    { year: '1951 年', sales: 38 },
+    { year: '1952 年', sales: 52 },
+    { year: '1956 年', sales: 61 },
+    { year: '1957 年', sales: 145 },
+    { year: '1958 年', sales: 48 },
+    { year: '1959 年', sales: 38 },
+    { year: '1960 年', sales: 38 },
+    { year: '1962 年', sales: 38 },
+  ];
+
+  const scale = [{
+    dataKey: 'sales',
+    tickInterval: 20,
+  }];
+
+  const lineData = [
+    { year: '1991', value: 3 },
+    { year: '1992', value: 4 },
+    { year: '1993', value: 3.5 },
+    { year: '1994', value: 5 },
+    { year: '1995', value: 4.9 },
+    { year: '1996', value: 6 },
+    { year: '1997', value: 7 },
+    { year: '1998', value: 9 },
+    { year: '1999', value: 13 },
+  ];
+
+  const lineScale = [{
+    dataKey: 'value',
+    min: 0,
+  },{
+    dataKey: 'year',
+    min: 0,
+    max: 1,
+  }];
+
+  export default {
+    methods: {
+      tableRowClassName({row, rowIndex}) {
+        if (rowIndex === 1) {
+          return 'warning-row';
+        } else if (rowIndex === 3) {
+          return 'success-row';
+        }
+        return '';
+      }
+    },
+    created () {
+
+    },
+    data () {
+      return {
+        chartData,
+        scale,
+        lineData,
+        lineScale,
+        height: 400,
+        tableData: [{
+          precent: 70,
+          date: '2016-05-02',
+          name: 'A001',
+          address: '无游梁式抽油机检测',
+        }, {
+          precent: 60,
+          date: '2016-05-04',
+          name: 'B002',
+          address: '阻火器检测'
+        }, {
+          precent: 66,
+          date: '2016-05-01',
+          name: 'C003',
+          address: '呼吸阀检测',
+        }, {
+          precent: 80,
+          date: '2016-05-03',
+          name: 'D004',
+          address: '空气泡沫产生器检测'
+        }]
+      }
+    }
+  }
+</script>

src/dashoo.cn/frontend_web/src/plugins/viser-vue.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import Viser from 'viser-vue'
+
+Vue.use(Viser)