|
|
@@ -0,0 +1,361 @@
|
|
|
+<template>
|
|
|
+ <div style="width: 100%; overflow-y: auto">
|
|
|
+
|
|
|
+ <el-row :gutter="10" style="margin-top: 10px; width: 100%; overflow: hidden">
|
|
|
+ <el-col :span="4">
|
|
|
+ <el-card class="box-card" style="height: 100vh">
|
|
|
+ <el-tree :data="datatree" :props="defaultProps" default-expand-all></el-tree>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="20">
|
|
|
+ <el-tabs value="first">
|
|
|
+ <el-tab-pane label="位置列表" name="first">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header">
|
|
|
+ <legend style="color:#436EEE"></legend>
|
|
|
+ <i class="icon icon-database"> 位置列表</i>
|
|
|
+ <span style="float: right;">
|
|
|
+ <el-button size="mini" plain type="primary" @click="dialogFormVisible=true">添加</el-button>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-table
|
|
|
+ :data="tableData1"
|
|
|
+ stripe
|
|
|
+ style="width: 100%; height: 100vh">
|
|
|
+ <el-table-column
|
|
|
+ prop="seqNo"
|
|
|
+ label="序号"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="位置分类"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="address"
|
|
|
+ label="位置名称"
|
|
|
+ width="180">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ </el-card>
|
|
|
+ </el-tab-pane>
|
|
|
+
|
|
|
+ <el-tab-pane label="设备列表" name="second">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header">
|
|
|
+ <legend style="color:#436EEE"></legend>
|
|
|
+ <i class="icon icon-database"> 设备列表</i>
|
|
|
+ <span style="float: right;">
|
|
|
+ <el-button size="mini" plain type="primary" @click="dialogFormVisible=true">添加</el-button>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-table
|
|
|
+ :data="tableData2"
|
|
|
+ stripe
|
|
|
+ style="width: 100%; height: 100vh">
|
|
|
+ <el-table-column
|
|
|
+ prop="seqNo"
|
|
|
+ label="序号"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="设备分类"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="address"
|
|
|
+ label="地点名称"
|
|
|
+ width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="address2"
|
|
|
+ label="设备厂家">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="address3"
|
|
|
+ label="设备型号">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ </el-card>
|
|
|
+ </el-tab-pane>
|
|
|
+
|
|
|
+ </el-tabs>
|
|
|
+
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-dialog title="编辑" :visible.sync="dialogFormVisible">
|
|
|
+ <el-form :model="form">
|
|
|
+ <el-form-item label="序号" :label-width="formLabelWidth">
|
|
|
+ <el-input v-model="form.name" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="设备名称" :label-width="formLabelWidth">
|
|
|
+ <el-input v-model="form.name" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="安装地点" :label-width="formLabelWidth" style="width: 100%;">
|
|
|
+ <el-select v-model="form.region" placeholder="请选择安装地点">
|
|
|
+ <el-option label="1#楼 一 1号位置" value="shanghai"></el-option>
|
|
|
+ <el-option label="2#楼 一 2号位置" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="生产厂家" :label-width="formLabelWidth">
|
|
|
+ <el-input v-model="form.name" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="设备型号" :label-width="formLabelWidth">
|
|
|
+ <el-input v-model="form.name" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注" :label-width="formLabelWidth">
|
|
|
+ <el-input v-model="form.name" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogFormVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ </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,
|
|
|
+
|
|
|
+ tableData1: [{
|
|
|
+ seqNo: '1',
|
|
|
+ name: '采油1厂',
|
|
|
+ address: '1号位',
|
|
|
+ address2: '大连制表厂',
|
|
|
+ address3: 'A001'
|
|
|
+ }, {
|
|
|
+ seqNo: '2',
|
|
|
+ name: '2号位',
|
|
|
+ address: '2号位',
|
|
|
+ address2: '大连制表厂',
|
|
|
+ address3: 'B002'
|
|
|
+ }, {
|
|
|
+ seqNo: '3',
|
|
|
+ name: '3号位',
|
|
|
+ address: '2号位',
|
|
|
+ address2: '大连制表厂',
|
|
|
+ address3: 'C003'
|
|
|
+
|
|
|
+ }, {
|
|
|
+ seqNo: '4',
|
|
|
+ name: '4号位',
|
|
|
+ address: '2号位',
|
|
|
+ address2: '大连制表厂',
|
|
|
+ address3: 'D004'
|
|
|
+ },{
|
|
|
+ seqNo: '5',
|
|
|
+ name: '5号位',
|
|
|
+ address: '1号位',
|
|
|
+ address2: '大连制表厂',
|
|
|
+ address3: 'A001'
|
|
|
+ }, {
|
|
|
+ seqNo: '6',
|
|
|
+ name: '6号位',
|
|
|
+ address: '2号位',
|
|
|
+ address2: '大连制表厂',
|
|
|
+ address3: 'B002'
|
|
|
+ }, {
|
|
|
+ seqNo: '7',
|
|
|
+ name: '72号位',
|
|
|
+ address: '2号位',
|
|
|
+ address2: '大连制表厂',
|
|
|
+ address3: 'C003'
|
|
|
+
|
|
|
+ }, {
|
|
|
+ seqNo: '8',
|
|
|
+ name: '82号位',
|
|
|
+ address: '2号位',
|
|
|
+ address2: '大连制表厂',
|
|
|
+ address3: 'D004'
|
|
|
+ }],
|
|
|
+
|
|
|
+ tableData2: [{
|
|
|
+ seqNo: '1',
|
|
|
+ name: '无游梁式抽油机检测',
|
|
|
+ address: '1号位',
|
|
|
+ address2: '大连制表厂',
|
|
|
+ address3: 'A001'
|
|
|
+ }, {
|
|
|
+ seqNo: '2',
|
|
|
+ name: '阻火器检测',
|
|
|
+ address: '2号位',
|
|
|
+ address2: '大连制表厂',
|
|
|
+ address3: 'B002'
|
|
|
+ }, {
|
|
|
+ seqNo: '3',
|
|
|
+ name: '呼吸阀检测',
|
|
|
+ address: '2号位',
|
|
|
+ address2: '大连制表厂',
|
|
|
+ address3: 'C003'
|
|
|
+
|
|
|
+ }, {
|
|
|
+ seqNo: '4',
|
|
|
+ name: '空气泡沫产生器检测',
|
|
|
+ address: '2号位',
|
|
|
+ address2: '大连制表厂',
|
|
|
+ address3: 'D004'
|
|
|
+ },{
|
|
|
+ seqNo: '5',
|
|
|
+ name: '无游梁式抽油机检测',
|
|
|
+ address: '1号位',
|
|
|
+ address2: '大连制表厂',
|
|
|
+ address3: 'A001'
|
|
|
+ }, {
|
|
|
+ seqNo: '6',
|
|
|
+ name: '阻火器检测',
|
|
|
+ address: '2号位',
|
|
|
+ address2: '大连制表厂',
|
|
|
+ address3: 'B002'
|
|
|
+ }, {
|
|
|
+ seqNo: '7',
|
|
|
+ name: '呼吸阀检测',
|
|
|
+ address: '2号位',
|
|
|
+ address2: '大连制表厂',
|
|
|
+ address3: 'C003'
|
|
|
+
|
|
|
+ }, {
|
|
|
+ seqNo: '8',
|
|
|
+ name: '空气泡沫产生器检测',
|
|
|
+ address: '2号位',
|
|
|
+ address2: '大连制表厂',
|
|
|
+ address3: 'D004'
|
|
|
+ }],
|
|
|
+
|
|
|
+ datatree: [{
|
|
|
+ label: '采油一厂',
|
|
|
+ children: [{
|
|
|
+ label: '1#采油机',
|
|
|
+ children: [{
|
|
|
+ label: '1-1#位置'
|
|
|
+ }, {
|
|
|
+ label: '1-2#位置'
|
|
|
+ }, {
|
|
|
+ label: '1-3#位置'
|
|
|
+ }, {
|
|
|
+ label: '1-4#位置'
|
|
|
+ }, {
|
|
|
+ label: '1-5#位置'
|
|
|
+ }, {
|
|
|
+ label: '1-6#位置'
|
|
|
+ }]
|
|
|
+ }, {
|
|
|
+ label: '2#采油机',
|
|
|
+ children: [{
|
|
|
+ label: '2-1#位置'
|
|
|
+ }, {
|
|
|
+ label: '2-2#位置'
|
|
|
+ }, {
|
|
|
+ label: '2-3#位置'
|
|
|
+ }, {
|
|
|
+ label: '2-4#位置'
|
|
|
+ }, {
|
|
|
+ label: '2-5#位置'
|
|
|
+ }, {
|
|
|
+ label: '2-6#位置'
|
|
|
+ }]
|
|
|
+ }]
|
|
|
+ }],
|
|
|
+
|
|
|
+ defaultProps: {
|
|
|
+ children: 'children',
|
|
|
+ label: 'label'
|
|
|
+ },
|
|
|
+
|
|
|
+ dialogTableVisible: false,
|
|
|
+ dialogFormVisible: false,
|
|
|
+ form: {
|
|
|
+ name: '',
|
|
|
+ region: '',
|
|
|
+ date1: '',
|
|
|
+ date2: '',
|
|
|
+ delivery: false,
|
|
|
+ type: [],
|
|
|
+ resource: '',
|
|
|
+ desc: ''
|
|
|
+ },
|
|
|
+ formLabelWidth: '120px'
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
yuedefeng