|
@@ -1,303 +0,0 @@
|
|
|
-<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>
|