From 4964aa7f82cf72c08cb1cf357b975d0122d73e5e Mon Sep 17 00:00:00 2001
From: he wei <858544502@qq.com>
Date: 星期二, 02 十一月 2021 09:51:03 +0800
Subject: [PATCH] U 新建工单 工单列表
---
src/pages/alarmWork/list.vue | 180 ++++++++++
src/pages/test.vue | 99 ++++++
package-lock.json | 208 +++++-------
src/main.js | 5
src/pages/test1.vue | 108 ++++++
src/assets/css/reset.css | 2
src/components/FlexLayout.vue | 69 ++++
src/pages/alarmWork/addWork.vue | 122 +++++++
src/components/listCard.vue | 142 ++++++++
9 files changed, 791 insertions(+), 144 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 06b3765..be016a6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1687,6 +1687,16 @@
"integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
"dev": true
},
+ "ansi-styles": {
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+ "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+ "dev": true,
+ "optional": true,
+ "requires": {
+ "color-convert": "^2.0.1"
+ }
+ },
"cacache": {
"version": "13.0.1",
"resolved": "https://registry.npm.taobao.org/cacache/download/cacache-13.0.1.tgz?cache=0&sync_timestamp=1594429684526&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcacache%2Fdownload%2Fcacache-13.0.1.tgz",
@@ -1713,6 +1723,53 @@
"unique-filename": "^1.1.1"
}
},
+ "chalk": {
+ "version": "4.1.2",
+ "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+ "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+ "dev": true,
+ "optional": true,
+ "requires": {
+ "ansi-styles": "^4.1.0",
+ "supports-color": "^7.1.0"
+ }
+ },
+ "color-convert": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+ "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+ "dev": true,
+ "optional": true,
+ "requires": {
+ "color-name": "~1.1.4"
+ }
+ },
+ "color-name": {
+ "version": "1.1.4",
+ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+ "dev": true,
+ "optional": true
+ },
+ "has-flag": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+ "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+ "dev": true,
+ "optional": true
+ },
+ "loader-utils": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.1.tgz",
+ "integrity": "sha512-g4miPa9uUrZz4iElkaVJgDFwKJGh8aQGM7pUL4ejXl6cu7kSb30seQOVGNMP6sW8j7DW77X68hJZ+GM7UGhXeQ==",
+ "dev": true,
+ "optional": true,
+ "requires": {
+ "big.js": "^5.2.2",
+ "emojis-list": "^3.0.0",
+ "json5": "^2.1.2"
+ }
+ },
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
@@ -1727,6 +1784,16 @@
"requires": {
"figgy-pudding": "^3.5.1",
"minipass": "^3.1.1"
+ }
+ },
+ "supports-color": {
+ "version": "7.2.0",
+ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+ "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+ "dev": true,
+ "optional": true,
+ "requires": {
+ "has-flag": "^4.0.0"
}
},
"terser-webpack-plugin": {
@@ -1744,6 +1811,18 @@
"source-map": "^0.6.1",
"terser": "^4.6.12",
"webpack-sources": "^1.4.3"
+ }
+ },
+ "vue-loader-v16": {
+ "version": "npm:vue-loader@16.8.2",
+ "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.2.tgz",
+ "integrity": "sha512-Nkq+z9mAsMEK+qkXgK+9Ia7D8w9uu9j4ut0IMT5coMfux3rCgIp1QBB1CYwY0M34A1nRMSONEaWXxAAw6xSl/Q==",
+ "dev": true,
+ "optional": true,
+ "requires": {
+ "chalk": "^4.1.0",
+ "hash-sum": "^2.0.0",
+ "loader-utils": "^2.0.0"
}
}
}
@@ -2520,16 +2599,6 @@
"integrity": "sha1-MPpAyef+B9vIlWeM0ocCTeokHdk=",
"dev": true,
"optional": true
- },
- "bindings": {
- "version": "1.5.0",
- "resolved": "https://registry.npm.taobao.org/bindings/download/bindings-1.5.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbindings%2Fdownload%2Fbindings-1.5.0.tgz",
- "integrity": "sha1-EDU8npRTNLwFEabZCzj7x8nFBN8=",
- "dev": true,
- "optional": true,
- "requires": {
- "file-uri-to-path": "1.0.0"
- }
},
"bluebird": {
"version": "3.7.2",
@@ -5023,13 +5092,6 @@
"schema-utils": "^2.5.0"
}
},
- "file-uri-to-path": {
- "version": "1.0.0",
- "resolved": "https://registry.npm.taobao.org/file-uri-to-path/download/file-uri-to-path-1.0.0.tgz",
- "integrity": "sha1-VTp7hEb/b2hDWcRF8eN6BdrMM90=",
- "dev": true,
- "optional": true
- },
"filesize": {
"version": "3.6.1",
"resolved": "https://registry.npm.taobao.org/filesize/download/filesize-3.6.1.tgz",
@@ -5222,8 +5284,8 @@
},
"fsevents": {
"version": "2.1.3",
- "resolved": "https://registry.npm.taobao.org/fsevents/download/fsevents-2.1.3.tgz?cache=0&sync_timestamp=1604593363910&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffsevents%2Fdownload%2Ffsevents-2.1.3.tgz",
- "integrity": "sha1-+3OHA66NL5/pAMM4Nt3r7ouX8j4=",
+ "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz",
+ "integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==",
"dev": true,
"optional": true
},
@@ -7033,13 +7095,6 @@
"object-assign": "^4.0.1",
"thenify-all": "^1.0.0"
}
- },
- "nan": {
- "version": "2.14.2",
- "resolved": "https://registry.npm.taobao.org/nan/download/nan-2.14.2.tgz?cache=0&sync_timestamp=1602591709094&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnan%2Fdownload%2Fnan-2.14.2.tgz",
- "integrity": "sha1-9TdkAGlRaPTMaUrJOT0MlYXu6hk=",
- "dev": true,
- "optional": true
},
"nanomatch": {
"version": "1.2.13",
@@ -10453,87 +10508,6 @@
}
}
},
- "vue-loader-v16": {
- "version": "npm:vue-loader@16.8.2",
- "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.2.tgz",
- "integrity": "sha512-Nkq+z9mAsMEK+qkXgK+9Ia7D8w9uu9j4ut0IMT5coMfux3rCgIp1QBB1CYwY0M34A1nRMSONEaWXxAAw6xSl/Q==",
- "dev": true,
- "optional": true,
- "requires": {
- "chalk": "^4.1.0",
- "hash-sum": "^2.0.0",
- "loader-utils": "^2.0.0"
- },
- "dependencies": {
- "ansi-styles": {
- "version": "4.3.0",
- "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
- "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
- "dev": true,
- "optional": true,
- "requires": {
- "color-convert": "^2.0.1"
- }
- },
- "chalk": {
- "version": "4.1.2",
- "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
- "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
- "dev": true,
- "optional": true,
- "requires": {
- "ansi-styles": "^4.1.0",
- "supports-color": "^7.1.0"
- }
- },
- "color-convert": {
- "version": "2.0.1",
- "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
- "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
- "dev": true,
- "optional": true,
- "requires": {
- "color-name": "~1.1.4"
- }
- },
- "color-name": {
- "version": "1.1.4",
- "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
- "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
- "dev": true,
- "optional": true
- },
- "has-flag": {
- "version": "4.0.0",
- "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
- "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
- "dev": true,
- "optional": true
- },
- "loader-utils": {
- "version": "2.0.0",
- "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
- "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
- "dev": true,
- "optional": true,
- "requires": {
- "big.js": "^5.2.2",
- "emojis-list": "^3.0.0",
- "json5": "^2.1.2"
- }
- },
- "supports-color": {
- "version": "7.2.0",
- "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
- "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
- "dev": true,
- "optional": true,
- "requires": {
- "has-flag": "^4.0.0"
- }
- }
- }
- },
"vue-router": {
"version": "3.4.9",
"resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.4.9.tgz?cache=0&sync_timestamp=1607347284428&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.4.9.tgz",
@@ -10658,14 +10632,10 @@
},
"fsevents": {
"version": "1.2.13",
- "resolved": "https://registry.npm.taobao.org/fsevents/download/fsevents-1.2.13.tgz?cache=0&sync_timestamp=1604593363910&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffsevents%2Fdownload%2Ffsevents-1.2.13.tgz",
- "integrity": "sha1-8yXLBFVZJCi88Rs4M3DvcOO/zDg=",
+ "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
+ "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
"dev": true,
- "optional": true,
- "requires": {
- "bindings": "^1.5.0",
- "nan": "^2.12.1"
- }
+ "optional": true
},
"glob-parent": {
"version": "3.1.0",
@@ -10973,14 +10943,10 @@
},
"fsevents": {
"version": "1.2.13",
- "resolved": "https://registry.npm.taobao.org/fsevents/download/fsevents-1.2.13.tgz?cache=0&sync_timestamp=1604593363910&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffsevents%2Fdownload%2Ffsevents-1.2.13.tgz",
- "integrity": "sha1-8yXLBFVZJCi88Rs4M3DvcOO/zDg=",
+ "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
+ "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
"dev": true,
- "optional": true,
- "requires": {
- "bindings": "^1.5.0",
- "nan": "^2.12.1"
- }
+ "optional": true
},
"glob-parent": {
"version": "3.1.0",
diff --git a/src/assets/css/reset.css b/src/assets/css/reset.css
index 52377b3..091b71e 100644
--- a/src/assets/css/reset.css
+++ b/src/assets/css/reset.css
@@ -65,7 +65,7 @@
nav,
section {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
- font-size: 28px;
+ /* font-size: 28px; */
box-sizing: border-box;
}
diff --git a/src/components/FlexLayout.vue b/src/components/FlexLayout.vue
new file mode 100644
index 0000000..3765c5b
--- /dev/null
+++ b/src/components/FlexLayout.vue
@@ -0,0 +1,69 @@
+<template>
+ <div class="flex-layout" :class=getRootClass :style="getRootStyle">
+ <div class="flex-layout-header">
+ <slot name="header"></slot>
+ </div>
+ <div class="flex-layout-body" :class="{'no-bg': noBg}">
+ <slot></slot>
+ </div>
+ <div class="flex-layout-footer">
+ <slot name="footer"></slot>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ props: {
+ direction: {
+ type: String,
+ default: '',
+ },
+ height: {
+ type: String,
+ default: "100%",
+ },
+ noBg: {
+ type: Boolean,
+ default: false
+ }
+ },
+ computed: {
+ getRootClass: function() {
+ return {
+ 'direction-row': this.direction == 'row'?true: false
+ };
+ },
+ getRootStyle: function() {
+ return {
+ 'height': this.height,
+ }
+ },
+ }
+}
+</script>
+
+<style scoped>
+.flex-layout {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+.flex-layout.direction-row {
+ flex-direction: row;
+}
+.flex-layout.full-ht {
+ height: 100%;
+}
+
+.flex-layout-body {
+ flex: 1;
+ overflow-x: hidden;
+ overflow-y: auto;
+}
+.flex-layout-body.no-bg {
+ background-color: #05227200;
+}
+</style>
+
+
diff --git a/src/components/listCard.vue b/src/components/listCard.vue
new file mode 100644
index 0000000..dfaa842
--- /dev/null
+++ b/src/components/listCard.vue
@@ -0,0 +1,142 @@
+<template>
+ <div class="list-card">
+ <!-- 澶撮儴琛� 鐐瑰嚮浜嬩欢 -->
+ <div class="order-info"
+ @click="itemClick"
+ title="鐐瑰嚮鏌ョ湅璇︽儏"
+ >
+ <div class="">
+ <span>宸ュ崟缂栧彿:123</span>
+ <span>宸ュ崟鐢熸垚鏃堕棿:12233</span>
+ </div>
+ <div class="timer">澶勭悊鏃堕檺:3333</div>
+ </div>
+ <!-- 鍐呭 -->
+ <div class="contain">
+ <div class="item order-title">
+ <div class="inner">
+ <div class="title">宸ュ崟鏍囬</div>
+ <div class="content">鏈烘埧鍛婅</div>
+ </div>
+ </div>
+ <div class="item order-content">
+ <div class="inner">
+ <div class="title">鍛婅鍐呭</div>
+ <div class="content">鍐呴儴閿欒,鍐呴儴閿欒,鍐呴儴閿欒,鍐呴儴閿欒,鍐呴儴閿欒鍐呴儴閿欒,鍐呴儴閿欒,鍐呴儴閿欒,鍐呴儴閿欒,鍐呴儴閿欒鍐呴儴閿欒,鍐呴儴閿欒,鍐呴儴閿欒,鍐呴儴閿欒,鍐呴儴閿欒</div>
+ </div>
+ </div>
+ <div class="item">
+ <div class="inner">
+ <div class="title">褰撳墠澶勭悊鐜妭</div>
+ <div class="content strong">T1澶勭悊涓�</div>
+ </div>
+ </div>
+ <div class="item">
+ <div class="inner">
+ <div class="title">鍛婅鏄惁娓呴櫎</div>
+ <div class="content strong">鏈竻闄�</div>
+ </div>
+ </div>
+ <div class="item">
+ <div class="inner">
+ <div class="state">寰呭鐞�</div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ props: {
+ data: {
+ type: Object,
+ default () {
+ return {
+
+ }
+ }
+ }
+ },
+ methods: {
+ itemClick () {
+ this.$emit('itemclick', this.data);
+ }
+ }
+};
+</script>
+
+<style scoped>
+ .list-card {
+ border: 1px #ababab solid;
+ background: #f3f4f6;;
+ }
+ .order-info {
+ color: #04409a;
+ padding: 4px 1.6em;
+ border-bottom: 1px #ababab solid;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ cursor: pointer;
+ }
+ .order-info span {
+ font-size: 20px;
+ padding-right: 2em;
+ }
+ .timer {
+ color: #ababab;
+ font-size: 16px;
+ }
+ .contain {
+ display: flex;
+ flex-direction: row;
+ }
+ .item {
+ flex: 1;
+ border-right: 1px solid #ababab;
+ padding: 0.8em 4px;
+ text-align: center;
+ display: flex;
+ align-items: center;
+ }
+ .inner {
+ flex: 1;
+ }
+ .order-title {
+ flex: 1.6;
+ align-items: left;
+ }
+ .order-content .inner,
+ .order-title .inner {
+ padding: 0 1.4em;
+ text-align: left;
+ }
+ .order-content {
+ flex: 2.2;
+ }
+ .order-title .content,
+ .order-content .content {
+ overflow: hidden;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ }
+ .item .inner > * {
+ font-size: 18px;
+ }
+ .item:last-of-type {
+ border-right: 0 none;
+ }
+ .item .strong,
+ .item .title {
+ color: #000;
+ font-weight: bolder;
+ }
+ .item .state {
+ color: #ed1c24;
+ font-weight: bolder;
+ }
+</style>
+
+
diff --git a/src/main.js b/src/main.js
index 0576c68..8d22e50 100644
--- a/src/main.js
+++ b/src/main.js
@@ -8,6 +8,11 @@
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
+import FlexLayout from './components/FlexLayout.vue'
+
+// 娉ㄥ唽鍏ㄥ眬鑷畾涔夌粍浠�
+Vue.component("FlexLayout", FlexLayout);
+
Vue.config.productionTip = false
Vue.prototype.$axios = axios;
diff --git a/src/pages/alarmWork/addWork.vue b/src/pages/alarmWork/addWork.vue
index 9aa4a70..221dcc6 100644
--- a/src/pages/alarmWork/addWork.vue
+++ b/src/pages/alarmWork/addWork.vue
@@ -1,18 +1,120 @@
<template>
- <div class="">
- 鏂板缓宸ュ崟
- </div>
+ <div class="main">
+ <div class="contain">
+ <div class="title">鏂板缓宸ュ崟</div>
+ <el-form ref="form" :model="form" label-width="10em">
+ <el-form-item label="宸ュ崟鏍囬:">
+ <el-input v-model="form.title"></el-input>
+ </el-form-item>
+ <el-form-item label="鍛婅鎻忚堪:">
+ <el-input
+ type="textarea"
+ v-model="form.desc"
+ placeholder="璇疯緭鍏ュ唴瀹�"
+ :rows="4"
+ maxlength="150"
+ show-word-limit
+ ></el-input>
+ </el-form-item>
+ <el-form-item label="鍛婅鍙戠敓鏃堕棿:">
+ <el-date-picker
+ v-model="form.datetime"
+ type="datetime"
+ placeholder="閫夋嫨鏃ユ湡鏃堕棿"
+ >
+ </el-date-picker>
+ </el-form-item>
+ <el-form-item label="鍛婅绾у埆:">
+ <el-select v-model="form.level" placeholder="璇烽�夋嫨">
+ <el-option label="涓�绾�" value="1"></el-option>
+ <el-option label="浜岀骇" value="2"></el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="闄勪欢:">
+ <el-upload
+ class="upload-demo"
+ action="/posts/"
+ :before-remove="beforeRemove"
+ multiple
+ :limit="3"
+ :on-exceed="handleExceed"
+ :file-list="fileList"
+ >
+ <el-button size="small" type="primary">鐐瑰嚮涓婁紶</el-button>
+ <div slot="tip" class="el-upload__tip">
+ 鍙兘涓婁紶jpg/png鏂囦欢锛屼笖涓嶈秴杩�500kb
+ </div>
+ </el-upload>
+ </el-form-item>
+ <el-form-item label="T1澶勭悊缁�:">
+ <el-select v-model="form.operate" placeholder="璇烽�夋嫨">
+ <el-option label="涓�缁�" value="1"></el-option>
+ <el-option label="浜岀粍" value="2"></el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="onSubmit">纭鎻愪氦</el-button>
+ </el-form-item>
+ </el-form>
+ </div>
+ </div>
</template>
<script>
-export default {
- data() {
- return {
- }
- },
-}
+export default {
+ name: "",
+
+ data () {
+ return {
+ form: {
+ title: "",
+ desc: "",
+ datetime: "",
+ level: 0,
+ fileList: [],
+ operate: 0,
+ },
+ };
+ },
+ components: {},
+ methods: {
+ onSubmit () {
+ console.log('鏂板缓宸ュ崟');
+ },
+ beforeRemove () {
+ console.log('鏄惁鍒犻櫎銆傘�傘��');
+ },
+ handleExceed () {
+ console.log('鏂囦欢涓暟瓒呰繃涓婇檺');
+ }
+ },
+
+ mounted () {},
+};
</script>
<style scoped>
-</style>
+.main {
+ height: 100%;
+ padding-top: 10px;
+ padding-left: 10px;
+ display: flex;
+}
+.contain {
+ background: #fff;
+ flex: 1;
+ overflow-y: auto;
+ padding: 20px;
+}
+.title {
+ color: #04409a;
+ font-size: 24px;
+}
+>>> .el-input {
+ width: 30em;
+}
+>>> .el-textarea {
+ width: 40em;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/alarmWork/list.vue b/src/pages/alarmWork/list.vue
index aae940e..554d043 100644
--- a/src/pages/alarmWork/list.vue
+++ b/src/pages/alarmWork/list.vue
@@ -1,34 +1,190 @@
<template>
- <div class="">
- <div v-if="unitType==1">
- 寰呭鐞嗗伐鍗�
- </div>
- <div v-if="unitType==2">
- 宸插鐞嗗伐鍗�
- </div>
- </div>
-
+ <flex-layout class="main">
+ <!-- 鎼滅储 -->
+ <div slot="header" class="contain-search">
+ <flex-layout direction="row">
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <label>
+ <span class="label">鏍囬鍐呭:</span>
+ <el-input v-model="title" size="small" placeholder="璇疯緭鍏ュ叧閿瘝"></el-input>
+ </label>
+ </el-col>
+ <el-col :span="12">
+ <label>
+ <span class="label">閫夋嫨鏃堕棿:</span>
+ <el-date-picker
+ v-model="datetime"
+ type="daterange"
+ size="small"
+ range-separator=" ~ "
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡"
+ >
+ </el-date-picker>
+ </label>
+ </el-col>
+ </el-row>
+ <div class="" slot="footer">
+ <el-button type="primary" icon="el-icon-search">鏌ヨ</el-button>
+ </div>
+ </flex-layout>
+ </div>
+ <!-- 鍒楄〃 -->
+ <flex-layout class="list-contain">
+ <div class="scroll">
+ <list-card
+ class="list-item"
+ v-for="(item, idx) in list"
+ :key="'list_' + idx"
+ @itemclick="details"
+ :data="item"
+ ></list-card>
+ </div>
+ <!-- 鍒嗛〉 -->
+ <div class="pagination" slot="footer">
+ <el-button type="primary" size="mini" icon="el-icon-arrow-left">涓婁竴椤�</el-button>
+ <el-pagination
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ :current-page="page.currentPage"
+ :page-sizes="page.pageSizes"
+ :page-size="page.pageSize"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="page.total">
+ </el-pagination>
+ <el-button type="primary" size="mini" icon="el-icon-arrow-right">涓嬩竴椤�</el-button>
+ </div>
+ </flex-layout>
+ </flex-layout>
</template>
<script>
+import FlexLayout from "@/components/FlexLayout.vue";
+import ListCard from "@/components/listCard.vue";
+
+let list = [
+ {
+ a: 1
+ },
+ {
+ a: 2
+ },
+ {
+ a: 1
+ },
+ {
+ a: 2
+ },{
+ a: 1
+ },
+ {
+ a: 2
+ }
+];
export default {
data() {
return {
- unitType: 1
+ unitType: 1,
+ title: "",
+ desc: "",
+ datetime: "",
+ level: 0,
+ fileList: [],
+ operate: 0,
+ list: [],
+ page: {
+ currentPage: 1,
+ pageSizes: [1, 5, 10, 20],
+ pageSize: 5,
+ total: 0
+ }
}
},
+ components: {
+ FlexLayout
+ ,ListCard
+ },
watch: {
'$route'() {
// 鐩戝惉璺敱鍙樺寲锛岃幏鍙杣nitType
this.unitType = this.$route.meta.unitType
},
},
+ methods: {
+ details (data) {
+ console.log(data);
+ },
+ handleSizeChange (val) {
+ console.log(`姣忛〉 ${val} 鏉);
+ },
+ handleCurrentChange (val) {
+ console.log(`褰撳墠椤�: ${val}`);
+ }
+ },
mounted() {
- this.unitType = this.$route.meta.unitType
+ this.unitType = this.$route.meta.unitType
+ this.list = list;
}
}
</script>
<style scoped>
-</style>
+.contain-search {
+ background: #fff;
+ border-bottom: 1px solid #c4c4c4;
+ margin-bottom: 16px;
+ padding: 16px 10px;
+}
+.contain-search span.label {
+ font-size: 18px;
+ font-weight: bold;
+ color: #666;
+ padding-right: 1em;
+}
+.list-contain {
+ background: #fff;
+ height: 100%;
+ margin-left: 16px;
+ border-top: 1px #c4c4c4 solid;
+ border-left: 1px #c4c4c4 solid;
+ padding: 30px 0 10px 30px;
+}
+.scroll {
+ overflow-y: auto;
+ padding-right: 30px;
+}
+.title {
+ color: #04409a;
+ font-size: 24px;
+}
+.list-item {
+ margin-bottom: 18px;
+}
+.pagination {
+ display: flex;
+ padding-top: 10px;
+ justify-content: center;
+}
+>>> .el-pagination {
+ display: flex;
+ padding: 0 1em;
+}
+>>> .el-pagination .el-input__inner {
+ background: #343345;
+ color: #fff;
+}
+>>> .el-input {
+ width: 30em;
+}
+>>> .el-textarea {
+ width: 40em;
+}
+>>> .el-select .el-input {
+ width: 16em;
+}
+>>> .el-pagination .el-input {
+ width: auto;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/test.vue b/src/pages/test.vue
new file mode 100644
index 0000000..6513a5f
--- /dev/null
+++ b/src/pages/test.vue
@@ -0,0 +1,99 @@
+<template>
+ <flex-layout>
+ <!-- 鎼滅储 -->
+ <div slot="header" class="contain-search">
+ <flex-layout direction="row">
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <label>
+ <span>鏍囬鍐呭:</span>
+ <el-input v-model="title" placeholder="璇疯緭鍏ュ叧閿瘝"></el-input>
+ </label>
+ </el-col>
+ <el-col :span="12">
+ <label>
+ <span>閫夋嫨鏃堕棿:</span>
+ <el-date-picker
+ v-model="datetime"
+ type="daterange"
+ range-separator=" ~ "
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡"
+ >
+ </el-date-picker>
+ </label>
+ </el-col>
+ </el-row>
+ <div class="" slot="footer">
+ <el-button type="primary" icon="el-icon-search">鏌ヨ</el-button>
+ </div>
+ </flex-layout>
+ </div>
+ <!-- 鍒楄〃 -->
+ <div class="">
+ <list-card
+ v-for="(item, idx) in list"
+ :key="'list_' + idx"
+ @itemclick="details"
+ :data="item"
+ ></list-card>
+ </div>
+ <!-- 鍒嗛〉 -->
+ <div class="" slot="footer">1</div>
+ </flex-layout>
+</template>
+
+<script>
+import FlexLayout from "@/components/FlexLayout.vue";
+import ListCard from "@/components/listCard.vue";
+
+let list = [
+ {
+ a: 1
+ },
+ {
+ a: 2
+ }
+];
+export default {
+ name: "",
+
+ data() {
+ return {
+ title: "",
+ desc: "",
+ datetime: "",
+ level: 0,
+ fileList: [],
+ operate: 0,
+ list: [],
+ };
+ },
+ components: {
+ FlexLayout
+ ,ListCard
+ },
+ methods: {
+ details (data) {
+ console.log(data);
+ }
+ },
+
+ mounted() {
+ this.list = list;
+ },
+};
+</script>
+
+<style scoped>
+.title {
+ color: #04409a;
+ font-size: 24px;
+}
+>>> .el-input {
+ width: 30em;
+}
+>>> .el-textarea {
+ width: 40em;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/test1.vue b/src/pages/test1.vue
new file mode 100644
index 0000000..d2c47c2
--- /dev/null
+++ b/src/pages/test1.vue
@@ -0,0 +1,108 @@
+<template>
+ <div class="contain">
+ <div class="title">鏂板缓宸ュ崟</div>
+ <el-form ref="form" :model="form" label-width="10em">
+ <el-form-item label="宸ュ崟鏍囬:">
+ <el-input v-model="form.title"></el-input>
+ </el-form-item>
+ <el-form-item label="鍛婅鎻忚堪:">
+ <el-input
+ type="textarea"
+ v-model="form.desc"
+ placeholder="璇疯緭鍏ュ唴瀹�"
+ :rows="4"
+ maxlength="150"
+ show-word-limit
+ ></el-input>
+ </el-form-item>
+ <el-form-item label="鍛婅鍙戠敓鏃堕棿:">
+ <el-date-picker
+ v-model="form.datetime"
+ type="datetime"
+ placeholder="閫夋嫨鏃ユ湡鏃堕棿"
+ >
+ </el-date-picker>
+ </el-form-item>
+ <el-form-item label="鍛婅绾у埆:">
+ <el-select v-model="form.level" placeholder="璇烽�夋嫨">
+ <el-option label="涓�绾�" value="1"></el-option>
+ <el-option label="浜岀骇" value="2"></el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="闄勪欢:">
+ <el-upload
+ class="upload-demo"
+ action="/posts/"
+ :before-remove="beforeRemove"
+ multiple
+ :limit="3"
+ :on-exceed="handleExceed"
+ :file-list="fileList"
+ >
+ <el-button size="small" type="primary">鐐瑰嚮涓婁紶</el-button>
+ <div slot="tip" class="el-upload__tip">
+ 鍙兘涓婁紶jpg/png鏂囦欢锛屼笖涓嶈秴杩�500kb
+ </div>
+ </el-upload>
+ </el-form-item>
+ <el-form-item label="T1澶勭悊缁�:">
+ <el-select v-model="form.operate" placeholder="璇烽�夋嫨">
+ <el-option label="涓�缁�" value="1"></el-option>
+ <el-option label="浜岀粍" value="2"></el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="onSubmit">纭鎻愪氦</el-button>
+ </el-form-item>
+ </el-form>
+ </div>
+</template>
+
+<script>
+
+export default {
+ name: "",
+
+ data () {
+ return {
+ form: {
+ title: "",
+ desc: "",
+ datetime: "",
+ level: 0,
+ fileList: [],
+ operate: 0,
+ },
+ };
+ },
+ components: {},
+ methods: {
+ onSubmit () {
+ console.log('鏂板缓宸ュ崟');
+ },
+ beforeRemove () {
+ console.log('鏄惁鍒犻櫎銆傘�傘��');
+ },
+ handleExceed () {
+ console.log('鏂囦欢涓暟瓒呰繃涓婇檺');
+ }
+ },
+
+ mounted () {},
+};
+</script>
+
+<style scoped>
+.contain {
+}
+.title {
+ color: #04409a;
+ font-size: 24px;
+}
+>>> .el-input {
+ width: 30em;
+}
+>>> .el-textarea {
+ width: 40em;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.1