|
|
@@ -1,61 +1,66 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <el-form :inline="true" :model="formSearch" class="demo-form-inline" size="mini">
|
|
|
+ <el-form :inline="true"
|
|
|
+ :model="formSearch"
|
|
|
+ class="demo-form-inline"
|
|
|
+ size="mini">
|
|
|
<el-form-item label="检测地点">
|
|
|
- <el-select v-model="formSearch.checkPosition" placeholder="检测地点">
|
|
|
- <el-option label="采油一厂" value="shanghai"></el-option>
|
|
|
- <el-option label="采油二厂" value="beijing"></el-option>
|
|
|
- <el-option label="采油三厂" value="beijing2"></el-option>
|
|
|
+ <el-select v-model="formSearch.checkPosition"
|
|
|
+ placeholder="检测地点">
|
|
|
+ <el-option label="采油一厂"
|
|
|
+ value="shanghai"></el-option>
|
|
|
+ <el-option label="采油二厂"
|
|
|
+ value="beijing"></el-option>
|
|
|
+ <el-option label="采油三厂"
|
|
|
+ value="beijing2"></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
- <el-button type="primary" @click="onSubmit">查询</el-button>
|
|
|
+ <el-button type="primary"
|
|
|
+ @click="onSubmit">查询</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
|
|
|
<el-row :gutter="10">
|
|
|
<el-col :span="12">
|
|
|
- <v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
|
|
|
+ <v-chart :forceFit="true"
|
|
|
+ :height="height"
|
|
|
+ :data="data"
|
|
|
+ :scale="scale">
|
|
|
<v-tooltip />
|
|
|
<v-axis />
|
|
|
<v-bar position="year*sales" />
|
|
|
</v-chart>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <el-table
|
|
|
- :data="tableData"
|
|
|
- size="mini"
|
|
|
- :height="450"
|
|
|
- stripe>
|
|
|
- <el-table-column
|
|
|
- prop="address"
|
|
|
- width="190"
|
|
|
- fixed="left"
|
|
|
- label="检测地点">
|
|
|
+ <el-table :data="tableData"
|
|
|
+ size="mini"
|
|
|
+ :height="450"
|
|
|
+ stripe>
|
|
|
+ <el-table-column prop="address"
|
|
|
+ width="190"
|
|
|
+ fixed="left"
|
|
|
+ label="检测地点">
|
|
|
</el-table-column>
|
|
|
|
|
|
- <el-table-column
|
|
|
- prop="number"
|
|
|
- label="设备总量"
|
|
|
- width="180">
|
|
|
+ <el-table-column prop="number"
|
|
|
+ label="设备总量"
|
|
|
+ width="180">
|
|
|
</el-table-column>
|
|
|
|
|
|
- <el-table-column
|
|
|
- prop="number"
|
|
|
- label="全年待检"
|
|
|
- width="180">
|
|
|
+ <el-table-column prop="number"
|
|
|
+ label="全年待检"
|
|
|
+ width="180">
|
|
|
</el-table-column>
|
|
|
|
|
|
- <el-table-column
|
|
|
- prop="name"
|
|
|
- label="全年已检"
|
|
|
- width="180">
|
|
|
+ <el-table-column prop="name"
|
|
|
+ label="全年已检"
|
|
|
+ width="180">
|
|
|
</el-table-column>
|
|
|
|
|
|
- <el-table-column
|
|
|
- prop="name"
|
|
|
- label="合格率"
|
|
|
- width="180">
|
|
|
+ <el-table-column prop="name"
|
|
|
+ label="合格率"
|
|
|
+ width="180">
|
|
|
</el-table-column>
|
|
|
|
|
|
</el-table>
|
|
|
@@ -65,87 +70,93 @@
|
|
|
|
|
|
</div>
|
|
|
|
|
|
-
|
|
|
</template>
|
|
|
|
|
|
<style>
|
|
|
- .el-table .warning-row {
|
|
|
- background: oldlace;
|
|
|
- }
|
|
|
+.el-table .warning-row {
|
|
|
+ background: oldlace;
|
|
|
+}
|
|
|
|
|
|
- .el-table .success-row {
|
|
|
- background: #f0f9eb;
|
|
|
- }
|
|
|
+.el-table .success-row {
|
|
|
+ background: #f0f9eb;
|
|
|
+}
|
|
|
</style>
|
|
|
|
|
|
<script>
|
|
|
- const data = [
|
|
|
- { year: '采油一厂', sales: 38 },
|
|
|
- { year: '采油二厂', sales: 52 },
|
|
|
- { year: '采油三厂', sales: 61 },
|
|
|
- { year: '采油四厂', sales: 145 },
|
|
|
- { year: '采油五厂', sales: 48 },
|
|
|
- { year: '采油六厂', sales: 38 }
|
|
|
- ]
|
|
|
-
|
|
|
- const scale = [{
|
|
|
- dataKey: 'sales',
|
|
|
- tickInterval: 20
|
|
|
- }]
|
|
|
-
|
|
|
- export default {
|
|
|
- created () {
|
|
|
-
|
|
|
- },
|
|
|
- data () {
|
|
|
- return {
|
|
|
- formSearch: {
|
|
|
- daterange: [],
|
|
|
- checkPosition: '',
|
|
|
- equipments: []
|
|
|
- },
|
|
|
- data,
|
|
|
- scale,
|
|
|
- height: 400,
|
|
|
- tableData: [{
|
|
|
- precent: 70,
|
|
|
- date: '120',
|
|
|
- name: '111',
|
|
|
- address: '采油一厂',
|
|
|
- }, {
|
|
|
- precent: 60,
|
|
|
- date: '120',
|
|
|
- name: '111',
|
|
|
- address: '采油二厂'
|
|
|
- }, {
|
|
|
- precent: 66,
|
|
|
- date: '120',
|
|
|
- name: '111',
|
|
|
- address: '采油三厂',
|
|
|
- }, {
|
|
|
- precent: 80,
|
|
|
- date: '120',
|
|
|
- name: '111',
|
|
|
- address: '采油四厂'
|
|
|
- }],
|
|
|
-
|
|
|
- data,
|
|
|
- scale,
|
|
|
- pieStyle: {
|
|
|
- stroke: "#fff",
|
|
|
- lineWidth: 1
|
|
|
- },
|
|
|
- labelConfig: ['percent', {
|
|
|
- formatter: (val, item) => {
|
|
|
- return item.point.item + ': ' + val;
|
|
|
- }
|
|
|
- }]
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- onSubmit () {
|
|
|
- }
|
|
|
+// const data = [
|
|
|
+// { year: '采油一厂', sales: 38 },
|
|
|
+// { year: '采油二厂', sales: 52 },
|
|
|
+// { year: '采油三厂', sales: 61 },
|
|
|
+// { year: '采油四厂', sales: 145 },
|
|
|
+// { year: '采油五厂', sales: 48 },
|
|
|
+// { year: '采油六厂', sales: 38 }
|
|
|
+// ]
|
|
|
+
|
|
|
+// const scale = [{
|
|
|
+// dataKey: 'sales',
|
|
|
+// tickInterval: 20
|
|
|
+// }]
|
|
|
+
|
|
|
+export default {
|
|
|
+ created () {
|
|
|
+
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ formSearch: {
|
|
|
+ daterange: [],
|
|
|
+ checkPosition: '',
|
|
|
+ equipments: []
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ { year: '采油一厂', sales: 38 },
|
|
|
+ { year: '采油二厂', sales: 52 },
|
|
|
+ { year: '采油三厂', sales: 61 },
|
|
|
+ { year: '采油四厂', sales: 145 },
|
|
|
+ { year: '采油五厂', sales: 48 },
|
|
|
+ { year: '采油六厂', sales: 38 }
|
|
|
+ ],
|
|
|
+ scale: [{
|
|
|
+ dataKey: 'sales',
|
|
|
+ tickInterval: 20
|
|
|
+ }],
|
|
|
+ height: 400,
|
|
|
+ tableData: [{
|
|
|
+ precent: 70,
|
|
|
+ date: '120',
|
|
|
+ name: '111',
|
|
|
+ address: '采油一厂'
|
|
|
+ }, {
|
|
|
+ precent: 60,
|
|
|
+ date: '120',
|
|
|
+ name: '111',
|
|
|
+ address: '采油二厂'
|
|
|
+ }, {
|
|
|
+ precent: 66,
|
|
|
+ date: '120',
|
|
|
+ name: '111',
|
|
|
+ address: '采油三厂'
|
|
|
+ }, {
|
|
|
+ precent: 80,
|
|
|
+ date: '120',
|
|
|
+ name: '111',
|
|
|
+ address: '采油四厂'
|
|
|
+ }],
|
|
|
+ pieStyle: {
|
|
|
+ stroke: '#fff',
|
|
|
+ lineWidth: 1
|
|
|
+ },
|
|
|
+ labelConfig: ['percent', {
|
|
|
+ formatter: (val, item) => {
|
|
|
+ return item.point.item + ': ' + val
|
|
|
+ }
|
|
|
+ }]
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onSubmit () {
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</script>
|