add 仪表盘

src/views/data-visible/dashboard/index.vue

@@ -38,46 +38,53 @@
           ref="form"
           :model="chartField"
           inline
+          label-position="top"
           label-width="100px"
           style="margin-top: 20px"
         >
-          <div v-if="dataModelList.length !== 0">
-            <el-form-item
-              v-for="(dataModel, index) in dataModelList"
-              :key="index + 300"
-              :label='dataModel.name + ":"'
-              prop="yFields"
-            >
-              <el-checkbox-group v-model="chartField.yFields[index]">
-                <el-checkbox
-                  v-for="(prop, i) in dataModel.propertyList"
-                  :key="200+i"
-                  :label="prop.propertyCode"
-                >{{ prop.propertyName }}</el-checkbox>
-              </el-checkbox-group>
-            </el-form-item>
-          </div>
-          <div>
-            <el-form-item label="时间轴:">
+          <el-form-item
+            label="属性:"
+            prop="yFields"
+          >
+            <div class="data-model-container">
+              <div
+                v-for="(dataModel, index) in dataModelList"
+                :key="index + 400"
+                class="data-model-item"
+              >
+                <div class="data-model-name">
+                  {{ dataModel.name }}:
+                </div>
+                <el-checkbox-group v-model="chartField.yFields[index]">
+                  <el-checkbox
+                    v-for="(prop, i) in dataModel.propertyList"
+                    :key="200+i"
+                    :label="prop.propertyCode"
+                  >{{ prop.propertyName }}</el-checkbox>
+                </el-checkbox-group>
+              </div>
+            </div>
+          </el-form-item>
+          <el-form-item label="时间轴:">
+            <div style="margin-right: 20px">
               Timestamp
-            </el-form-item>
-            <el-form-item
-              label="刷新时间(秒):"
-            >
-              <el-input-number
-                v-model.number="chartField.refresh"
-                :min="1"
-                :max="10"
-                label="单位秒"
-              />
-            </el-form-item>
-            <el-form-item>
-              <el-button
-                type="primary"
-                @click="createCharts"
-              >生成图表</el-button>
-            </el-form-item>
-          </div>
+            </div>
+          </el-form-item>
+          <el-form-item
+            label="刷新时间(秒):"
+          >
+            <el-input-number
+              v-model.number="chartField.refresh"
+              :min="1"
+              :max="10"
+              label="单位秒"
+            />
+            <el-button
+              type="primary"
+              style="margin-left: 20px"
+              @click="createCharts"
+            >生成图表</el-button>
+          </el-form-item>
         </el-form>
         <el-row
           v-for="(chartGroup, index) in chartList"
@@ -330,6 +337,25 @@ export default {
       display: flex;
       justify-content: space-between;
     }
+    .data-model-container{
+      display: flex;
+      .data-model-item{
+        display: flex;
+        .data-model-name{
+          margin-right: 20px;
+          margin-left: 20px;
+        }
+      }
+      .data-model-item:first-of-type{
+        .data-model-name{
+          margin-left: 0;
+        }
+      }
+      .data-model-item:last-of-type{
+        margin-right: 20px;
+      }
+    }
+
   }
 }
 </style>