操作手册及统计原型

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

@@ -0,0 +1,210 @@
+<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; width: 100%; overflow: hidden">
+      <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-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/pages/prototype/leaderCenter.vue

@@ -0,0 +1,253 @@
+<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; width: 100%; overflow: hidden">
+      <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-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, 商检: 6.3 },
+    { month: 'Feb', 特检站: 6.9, 宇信公司: 4.2, 计量站: 3.9, 商检: 8.3 },
+    { month: 'Mar', 特检站: 9.5, 宇信公司: 5.7, 计量站: 3.9, 商检: 4.3 },
+    { month: 'Apr', 特检站: 14.5, 宇信公司: 8.5, 计量站: 3.9, 商检: 11.3 },
+    { month: 'May', 特检站: 18.4, 宇信公司: 11.9, 计量站: 3.9, 商检: 7.3 },
+    { month: 'Jun', 特检站: 21.5, 宇信公司: 15.2, 计量站: 3.9, 商检: 6.3 },
+    { month: 'Jul', 特检站: 25.2, 宇信公司: 17.0, 计量站: 3.9, 商检: 12.3 },
+    { month: 'Aug', 特检站: 26.5, 宇信公司: 16.6, 计量站: 3.9, 商检: 21.3 },
+    { month: 'Sep', 特检站: 23.3, 宇信公司: 14.2, 计量站: 3.9, 商检: 23.3 },
+    { month: 'Oct', 特检站: 18.3, 宇信公司: 10.3, 计量站: 3.9, 商检: 14.3 },
+    { month: 'Nov', 特检站: 13.9, 宇信公司: 6.6, 计量站: 3.9, 商检: 24.3 },
+    { month: 'Dec', 特检站: 9.6, 宇信公司: 4.8, 计量站: 3.9, 商检: 4.3 },
+  ];
+
+  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/leaderCheckCenter.vue

@@ -0,0 +1,402 @@
+<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; width: 100%; overflow: hidden">
+      <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-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-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="6">
+        <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="6">
+        <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="6">
+        <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>
+          <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, 商检: 6.3 },
+    { month: 'Feb', 特检站: 6.9, 宇信公司: 4.2, 计量站: 3.9, 商检: 8.3 },
+    { month: 'Mar', 特检站: 9.5, 宇信公司: 5.7, 计量站: 3.9, 商检: 4.3 },
+    { month: 'Apr', 特检站: 14.5, 宇信公司: 8.5, 计量站: 3.9, 商检: 11.3 },
+    { month: 'May', 特检站: 18.4, 宇信公司: 11.9, 计量站: 3.9, 商检: 7.3 },
+    { month: 'Jun', 特检站: 21.5, 宇信公司: 15.2, 计量站: 3.9, 商检: 6.3 },
+    { month: 'Jul', 特检站: 25.2, 宇信公司: 17.0, 计量站: 3.9, 商检: 12.3 },
+    { month: 'Aug', 特检站: 26.5, 宇信公司: 16.6, 计量站: 3.9, 商检: 21.3 },
+    { month: 'Sep', 特检站: 23.3, 宇信公司: 14.2, 计量站: 3.9, 商检: 23.3 },
+    { month: 'Oct', 特检站: 18.3, 宇信公司: 10.3, 计量站: 3.9, 商检: 14.3 },
+    { month: 'Nov', 特检站: 13.9, 宇信公司: 6.6, 计量站: 3.9, 商检: 24.3 },
+    { month: 'Dec', 特检站: 9.6, 宇信公司: 4.8, 计量站: 3.9, 商检: 4.3 },
+  ];
+
+  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/leaderIndex.vue

@@ -1,255 +1,42 @@
 <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>
+    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
+      <el-menu-item index="1">公司首页</el-menu-item>
+      <el-menu-item index="2">安全分析</el-menu-item>
+      <el-menu-item index="3">检测评价中心</el-menu-item>
+      <el-menu-item index="4">二级单位</el-menu-item>
+      <el-menu-item index="5">外部单位</el-menu-item>
+    </el-menu>
+    <leader-center v-if="activeIndex==1"></leader-center>
+    <safe-check v-if="activeIndex==2"></safe-check>
+    <leader-check-center v-if="activeIndex==3"></leader-check-center>
+    <leader-tow-level-center v-if="activeIndex==4"></leader-tow-level-center>
+    <outer-unit-center v-if="activeIndex==5"></outer-unit-center>
   </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,
-}];
-
+  import leaderCenter from './leaderCenter.vue'
+  import leaderCheckCenter from './leaderCheckCenter.vue'
+  import leaderTowLevelCenter from './leaderTowLevelCenter.vue'
+  import outerUnitCenter from './outerUnitCenter.vue'
+  import safeCheck from './safeCheck.vue'
   export default {
-    methods: {
-      tableRowClassName({row, rowIndex}) {
-        if (rowIndex === 1) {
-          return 'warning-row';
-        } else if (rowIndex === 3) {
-          return 'success-row';
-        }
-        return '';
-      }
-    },
-    created () {
-
+    components: {
+      leaderCenter,
+      leaderCheckCenter,
+      leaderTowLevelCenter,
+      outerUnitCenter,
+      safeCheck
     },
     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: '空气泡沫产生器检测'
-        }]
+        activeIndex: '1'
+      };
+    },
+    methods: {
+      handleSelect(key, keyPath) {
+        this.activeIndex = key
       }
     }
-  }
+  };
 </script>

src/dashoo.cn/frontend_web/src/pages/prototype/leaderTowLevelCenter.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; width: 100%; overflow: hidden">
+      <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/pages/prototype/outerUnitCenter.vue

@@ -0,0 +1,399 @@
+<template>
+  <div style="width: 100%; overflow-y: auto">
+    <el-row :gutter="10" style="width: 100%; overflow: hidden">
+      <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-row>
+
+    <el-row :gutter="10" style="margin-top: 10px; 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-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="6">
+        <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="6">
+        <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="6">
+        <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="6">
+        <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="6">
+        <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="6">
+        <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="6">
+        <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-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/pages/prototype/safeCheck.vue

@@ -0,0 +1,192 @@
+<template>
+  <div style="width: 100%; overflow-y: auto">
+    <el-row :gutter="10" style="margin-top: 10px; width: 100%; overflow: hidden">
+      <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-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/pages/prototype/towLevelCenter.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; width: 100%; overflow: hidden">
+      <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/pages/prototype/towLevelUnitIndex.vue

@@ -1,269 +1,35 @@
 <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>
+    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
+      <el-menu-item index="1">部门首页</el-menu-item>
+      <el-menu-item index="2">安全分析</el-menu-item>
+      <el-menu-item index="3">设备台账</el-menu-item>
+      <el-menu-item index="4">报告台账</el-menu-item>
+    </el-menu>
+    <tow-level-center v-if="activeIndex==1"></tow-level-center>
+    <safe-check v-if="activeIndex==2"></safe-check>
+    <device-center v-if="activeIndex==3 || activeIndex==4"></device-center>
   </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,
-  }];
-
+  import towLevelCenter from './towLevelCenter.vue'
+  import safeCheck from './safeCheck.vue'
+  import deviceCenter from './deviceCenter.vue'
   export default {
-    methods: {
-      tableRowClassName({row, rowIndex}) {
-        if (rowIndex === 1) {
-          return 'warning-row';
-        } else if (rowIndex === 3) {
-          return 'success-row';
-        }
-        return '';
-      }
-    },
-    created () {
-
+    components: {
+      towLevelCenter,
+      safeCheck,
+      deviceCenter
     },
     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: '空气泡沫产生器检测'
-        }]
+        activeIndex: '1'
+      };
+    },
+    methods: {
+      handleSelect(key, keyPath) {
+        this.activeIndex = key
       }
     }
-  }
+  };
 </script>

src/dashoo.cn/frontend_web/src/pages/system/operdoc.vue

@@ -42,7 +42,7 @@
       return {
         tableData: [{
           name: '大港油田检测监督评价管理系统使用手册',
-          address: 'http://weed1.labsop.cn:9390/6,1dd73da6b981'
+          address: 'http://weed1.labsop.cn:9390/5,1e0ab1e8ac58'
         }]
       }
     },