haojianlong 4 년 전
부모
커밋
035d05478a
1개의 변경된 파일303개의 추가작업 그리고 0개의 파일을 삭제
  1. 303 0
      src/views/home.vue

+ 303 - 0
src/views/home.vue

@@ -0,0 +1,303 @@
+<template>
+  <el-container class="home">
+    <!-- 顶部导航栏 -->
+    <el-header class="header">
+      <Select width="200" radius @change="testClick" :selectdata="dataSelect3" :placeholder="'请选择'" />
+      <Button radius @click="createProject" type="primary" :text="'新建拓扑图'">primary</Button>
+    </el-header>
+    <!-- body部分 -->
+    <el-container class="bodys">
+      <!-- 左侧树状导航栏部分 -->
+      <el-aside class="aside" width="200px">
+        <leftAsideTree></leftAsideTree>
+      </el-aside>
+      <!-- 展示部分 -->
+      <el-main class="main">
+        <div class="main-head">
+          <div class="showType" v-show="!1">
+            <el-radio-group v-model="isPub" size="small">
+              <el-radio-button label="已发布">已发布</el-radio-button>
+              <el-radio-button label="未发布">未发布</el-radio-button>
+            </el-radio-group>
+            <div class="head-right">
+              <el-input placeholder="搜索" prefix-icon="el-icon-search" size="small" v-model="queryText">
+              </el-input>
+              <Dropdown class="Dropdown" v-model="selVal" :data="dataSelect">
+                <span class="drop-text">{{selText}}</span>
+              </Dropdown>
+            </div>
+          </div>
+          <div class="showAction" v-show="1">
+            <el-checkbox v-model="checkAll">全选</el-checkbox>
+            <span class="sum">已选择<span style="color:#252b30">{{selectCard.length}}<span>项目</span>
+                <el-button size="mini">移动到</el-button>
+                <el-button size="mini">下载</el-button>
+                <el-button size="mini">删除</el-button>
+          </div>
+        </div>
+        <div class="main-body">
+          <template v-for="t in cardList">
+            <topoImageCard :data="t" :key="t.id"></topoImageCard>
+          </template>
+        </div>
+      </el-main>
+    </el-container>
+
+    <!-- 弹框 -->
+    <el-dialog class="create-dialog" title="新建拓扑图" :visible.sync="outerVisible">
+      <el-dialog class="create-dialog-inner" width="30%" title="所属类别" :visible.sync="innerVisible" append-to-body>
+        <div class="inner-dialog-body">
+          <div class="left">1</div>
+          <div class="right">2</div>
+        </div>
+      </el-dialog>
+      <div class="dialog-bodys">
+        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" label-position="top">
+          <el-form-item label="所属类别" prop="region">
+            <el-button @click="getprojectType">请选择所属类别</el-button>
+          </el-form-item>
+          <el-form-item label="活动名称" prop="name">
+            <el-input v-model="ruleForm.name"></el-input>
+          </el-form-item>
+          <el-form-item label="标签" prop="resource">
+            <el-select v-model="value" multiple filterable allow-create default-first-option width="100%" placeholder="请选择文章标签"></el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
+            <el-button @click="resetForm('ruleForm')">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="outerVisible = false">取 消</el-button>
+        <el-button type="primary" @click="innerVisible = true">确定</el-button>
+      </div>
+    </el-dialog>
+  </el-container>
+</template>
+
+<script>
+import { Select, Button, Dropdown } from "meri-design";
+import leftAsideTree from "@/components/homeView/leftAsideTree.vue";
+import topoImageCard from "@/components/homeView/topoImageCard.vue";
+export default {
+  name: "home",
+  data() {
+    return {
+      dataSelect3: [
+        { id: "test1", name: "选择项", sub: "hello111" },
+        { id: "test2", name: "单平米", sub: "hola111" },
+        {
+          id: "test3",
+          name: "下级分项",
+          sub: "bonjour",
+          divider: true,
+        },
+        { id: "test4", name: "滑动平均滑动平均", sub: "hi" },
+      ],
+      selVal: "totalEnergy",
+      selText: "总量",
+      dataSelect: [
+        { id: "totalEnergy", name: "总量" },
+        { id: "singleParty", name: "单平米" },
+        { id: "lowerLevel", name: "下级分项" },
+        { id: "average", name: "滑动平均", disabled: true },
+      ],
+      queryText: "",
+      isPub: "已发布", // 发布类型()
+      input2: "",
+      outerVisible: true,
+      innerVisible: true,
+      ruleForm: {
+        name: "",
+        region: "",
+        date1: "",
+        date2: "",
+        delivery: false,
+        type: [],
+        resource: "",
+        desc: "",
+      },
+      rules: {
+        name: [
+          { required: true, message: "请输入活动名称", trigger: "blur" },
+          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
+        ],
+        region: [
+          { required: true, message: "请选择活动区域", trigger: "change" },
+        ],
+        date1: [
+          {
+            type: "date",
+            required: true,
+            message: "请选择日期",
+            trigger: "change",
+          },
+        ],
+        date2: [
+          {
+            type: "date",
+            required: true,
+            message: "请选择时间",
+            trigger: "change",
+          },
+        ],
+        type: [
+          {
+            type: "array",
+            required: true,
+            message: "请至少选择一个活动性质",
+            trigger: "change",
+          },
+        ],
+        resource: [
+          { required: true, message: "请选择活动资源", trigger: "change" },
+        ],
+        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
+      },
+      value: [],
+      cardList: [
+        {
+          id: 1,
+          name: '中央供冷系统中央供冷系统中央供冷系统中央供冷系统',
+          version: 'V1.2.2',
+          putUser: '六千',
+          updateTime: '2020-20-20 16:16:16',
+          tagList: [
+            { id: 1, name: '范德萨' },
+            { id: 2, name: '范333德萨' },
+            { id: 3, name: '范333德萨' }
+          ],
+          img: 'https://www.baidu.com/img/flexible/logo/pc/result.png',
+        },
+        {
+          id: 2,
+          name: '中央供冷系456',
+          version: 'V1.2.2',
+          putUser: '六千',
+          updateTime: '2020-20-20 16:16:16',
+          tagList: [
+            { id: 1, name: '范德萨' },
+            { id: 2, name: '范333德萨' },
+            { id: 3, name: '范333德萨' }
+          ],
+          img: 'https://www.baidu.com/img/flexible/logo/pc/result.png',
+        }
+      ],
+      checkAll: false,
+      selectCard: [],
+    };
+  },
+  methods: {
+    testClick(data) {
+      console.log(data);
+    },
+    // 创建拓扑图
+    createProject() { },
+    // 获取所属类别
+    getprojectType() {
+      this.innerVisible = true;
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+  },
+  components: { Select, Button, leftAsideTree, Dropdown, topoImageCard },
+};
+</script>
+<style lang="less" scoped>
+.home {
+  width: 100%;
+  height: 100%;
+  .header {
+    width: 100%;
+    height: 60px;
+    background: #f7f9fa;
+    padding: 0 16px 0 16px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .bodys {
+    width: 100%;
+    height: 100%;
+    .main {
+      width: 100%;
+      height: 100%;
+      background: #fff;
+      padding: 10px 20px;
+      box-sizing: border-box;
+      .main-head {
+        position: relative;
+        width: 100%;
+        margin-bottom: 10px;
+        .showType {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          /deep/
+            .el-radio-button__orig-radio:checked
+            + .el-radio-button__inner {
+            color: #0091ff;
+            border-color: #0091ff;
+            background: #e1f2ff;
+          }
+          .head-right {
+            display: flex;
+            align-items: center;
+            .Dropdown {
+              min-width: 100px;
+              margin-left: 20px;
+              .drop-text {
+                font-size: 14px;
+                color: #1f2329;
+                line-height: 16px;
+              }
+            }
+          }
+        }
+        .showAction {
+          span.sum {
+            border-left: 1px solid #ccc;
+            margin: 0 8px;
+            color: #778089;
+            padding-left: 14px;
+          }
+        }
+      }
+      .main-body {
+        display: flex;
+        flex-wrap: wrap;
+      }
+    }
+  }
+  .create-dialog {
+    .dialog-bodys {
+      width: 367px;
+      margin: 0 auto;
+    }
+  }
+  .create-dialog-inner {
+    .inner-dialog-body {
+      width: 100%;
+      display: flex;
+      .left {
+        flex: 1;
+        border-right: 1px solid #ccc;
+      }
+    }
+  }
+}
+</style>