集成查询组件

修改border-shadow样式

src/components/breadcrumb/iotBreadcrumb.vue

@@ -48,7 +48,5 @@ export default {
 .home-breadcrumb {
   height: 40px; 
   margin: 10px 10px;
-  padding: 10px 0px;
-  padding-left: 20px;
 }
 </style>

src/components/common/query.vue

@@ -0,0 +1,43 @@
+<template>
+  <a-form layout="inline" :form="formData">
+    <a-form-item label="单位名称：" class="formItem">
+      <a-select style="width: 240px">
+        <a-select-option value="中迅"> 中迅 </a-select-option>
+        <a-select-option value="电信规划院"> 电信规划院 </a-select-option>
+      </a-select>
+    </a-form-item>
+    <a-form-item label="部门名称：" class="formItem">
+      <a-select style="width: 240px">
+        <a-select-option value="中迅"> 中迅 </a-select-option>
+        <a-select-option value="电信规划院"> 电信规划院 </a-select-option>
+      </a-select>
+    </a-form-item>
+    <a-form-item label="时间范围：" class="formItem">
+      <timeRange ref="timeRange"></timeRange>
+    </a-form-item>
+    <a-form-item class="formItem">
+      <a-button type="primary">重置</a-button>
+      <a-button type="primary">查询</a-button>
+    </a-form-item>
+  </a-form>
+</template>
+
+<script>
+import timeRange from "@/components/common/timeRange.vue";
+export default {
+  components: {
+    timeRange,
+  },
+  data() {
+    return {
+      formData: {},
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.formItem {
+  margin: 0px 15px;
+}
+</style>

src/components/work/overview/workOverview.vue

@@ -1,32 +1,13 @@
 <template>
   <div class="border-shadow">
-    <a-select :default-value="1" style="width: 120px" @change="handleChange">
-      <a-select-option
-        v-for="(item, index) in options"
-        :key="index"
-        :value="item.value"
-      >
-        {{ item.name }}
-      </a-select-option>
-    </a-select>
-    <a-select :default-value="7" style="width: 120px" @change="handleChange">
-      <a-select-option
-        v-for="(item, index) in floors"
-        :key="index"
-        :value="item.value"
-      >
-        {{ item.name }}
-      </a-select-option>
-    </a-select>
-    <timeRange ref="timeRange"></timeRange>
-    <a-button @click="getTimeRange"></a-button>
+    <workQuery></workQuery>
   </div>
 </template>
 <script>
-import timeRange from "@/components/common/timeRange.vue";
+import workQuery from "@/components/common/query.vue";
 export default {
   components: {
-    timeRange,
+    workQuery,
   },
   data() {
     return {
@@ -57,9 +38,9 @@ export default {
     handleChange(value) {
       console.log(`selected ${value}`);
     },
-    getTimeRange(){
-      this.$refs.timeRange.getTimeRange();// 获取时间段
-    }
+    getTimeRange() {
+      this.$refs.timeRange.getTimeRange(); // 获取时间段
+    },
   },
 };
 </script>

src/style/common.css

@@ -38,4 +38,5 @@
   -webkit-box-shadow: 0 0 4px #0000004d;
   -moz-box-shadow: 0 0 4px #0000004d;
   box-shadow: 0 0 4px #0000004d;
+  padding: 10px 20px;
 }