|
|
@@ -0,0 +1,251 @@
|
|
|
+<template>
|
|
|
+ <div style="width: 100%; overflow-y: auto">
|
|
|
+ <el-card class="box-card" style="height: 70px">
|
|
|
+ <el-form :inline="true" :model="formSearch" class="demo-form-inline">
|
|
|
+ <el-form-item label="日期">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="formSearch.daterange"
|
|
|
+ type="daterange"
|
|
|
+ align="right"
|
|
|
+ unlink-panels
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="检测地点">
|
|
|
+ <el-select v-model="formSearch.checkPosition" placeholder="检测地点">
|
|
|
+ <el-option label="区域一" value="shanghai"></el-option>
|
|
|
+ <el-option label="区域二" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="设备选择">
|
|
|
+ <el-select v-model="formSearch.equipments" multiple placeholder="设备选择">
|
|
|
+ <el-option label="设备一" value="shanghai"></el-option>
|
|
|
+ <el-option label="设备二" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="onSubmit">查询</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card class="box-card">
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ style="width: 100%"
|
|
|
+ stripe>
|
|
|
+ <el-table-column
|
|
|
+ prop="address"
|
|
|
+ label="检测地点"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ prop="address"
|
|
|
+ label="设备总量"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ prop="address"
|
|
|
+ label="本月待检"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ prop="address"
|
|
|
+ label="本月检测"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ prop="address"
|
|
|
+ label="全年待检"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ prop="address"
|
|
|
+ label="全年已检"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ prop="address"
|
|
|
+ label="全年检测"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ prop="address"
|
|
|
+ label="合格率"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card class="box-card" style="margin-top: 5px">
|
|
|
+
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ style="width: 100%"
|
|
|
+ stripe>
|
|
|
+ <el-table-column
|
|
|
+ prop="address"
|
|
|
+ label="检测地点">
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="去年设备总量"
|
|
|
+ width="180">
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="变化量"
|
|
|
+ width="180">
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="去年检测率"
|
|
|
+ width="180">
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="今年检测率"
|
|
|
+ width="180">
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="去年费用"
|
|
|
+ width="180">
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="今年费用"
|
|
|
+ width="180">
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ </el-table>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card class="box-card" style="margin-top: 5px">
|
|
|
+ <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-line position="year*value" />
|
|
|
+ <v-point position="year*value" shape="circle" />-->
|
|
|
+ </v-chart>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ </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 {
|
|
|
+ created () {
|
|
|
+
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ formSearch: {
|
|
|
+ daterange: [],
|
|
|
+ checkPosition: '',
|
|
|
+ equipments: []
|
|
|
+ },
|
|
|
+
|
|
|
+ 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: '空气泡沫产生器检测'
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onSubmit () {
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|