|
@@ -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>
|