Home.vue 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303
  1. <template>
  2. <el-container class="home">
  3. <!-- 顶部导航栏 -->
  4. <el-header class="header">
  5. <Select width="200" radius @change="testClick" :selectdata="dataSelect3" :placeholder="'请选择'" />
  6. <Button radius @click="createProject" type="primary" :text="'新建拓扑图'">primary</Button>
  7. </el-header>
  8. <!-- body部分 -->
  9. <el-container class="bodys">
  10. <!-- 左侧树状导航栏部分 -->
  11. <el-aside class="aside" width="200px">
  12. <leftAsideTree></leftAsideTree>
  13. </el-aside>
  14. <!-- 展示部分 -->
  15. <el-main class="main">
  16. <div class="main-head">
  17. <div class="showType" v-show="!1">
  18. <el-radio-group v-model="isPub" size="small">
  19. <el-radio-button label="已发布">已发布</el-radio-button>
  20. <el-radio-button label="未发布">未发布</el-radio-button>
  21. </el-radio-group>
  22. <div class="head-right">
  23. <el-input placeholder="搜索" prefix-icon="el-icon-search" size="small" v-model="queryText">
  24. </el-input>
  25. <Dropdown class="Dropdown" v-model="selVal" :data="dataSelect">
  26. <span class="drop-text">{{selText}}</span>
  27. </Dropdown>
  28. </div>
  29. </div>
  30. <div class="showAction" v-show="1">
  31. <el-checkbox v-model="checkAll">全选</el-checkbox>
  32. <span class="sum">已选择<span style="color:#252b30">{{selectCard.length}}<span>项目</span>
  33. <el-button size="mini">移动到</el-button>
  34. <el-button size="mini">下载</el-button>
  35. <el-button size="mini">删除</el-button>
  36. </div>
  37. </div>
  38. <div class="main-body">
  39. <template v-for="t in cardList">
  40. <topoImageCard :data="t" :key="t.id"></topoImageCard>
  41. </template>
  42. </div>
  43. </el-main>
  44. </el-container>
  45. <!-- 弹框 -->
  46. <el-dialog class="create-dialog" title="新建拓扑图" :visible.sync="outerVisible">
  47. <el-dialog class="create-dialog-inner" width="30%" title="所属类别" :visible.sync="innerVisible" append-to-body>
  48. <div class="inner-dialog-body">
  49. <div class="left">1</div>
  50. <div class="right">2</div>
  51. </div>
  52. </el-dialog>
  53. <div class="dialog-bodys">
  54. <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" label-position="top">
  55. <el-form-item label="所属类别" prop="region">
  56. <el-button @click="getprojectType">请选择所属类别</el-button>
  57. </el-form-item>
  58. <el-form-item label="活动名称" prop="name">
  59. <el-input v-model="ruleForm.name"></el-input>
  60. </el-form-item>
  61. <el-form-item label="标签" prop="resource">
  62. <el-select v-model="value" multiple filterable allow-create default-first-option width="100%" placeholder="请选择文章标签"></el-select>
  63. </el-form-item>
  64. <el-form-item>
  65. <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
  66. <el-button @click="resetForm('ruleForm')">重置</el-button>
  67. </el-form-item>
  68. </el-form>
  69. </div>
  70. <div slot="footer" class="dialog-footer">
  71. <el-button @click="outerVisible = false">取 消</el-button>
  72. <el-button type="primary" @click="innerVisible = true">确定</el-button>
  73. </div>
  74. </el-dialog>
  75. </el-container>
  76. </template>
  77. <script>
  78. import { Select, Button, Dropdown } from "meri-design";
  79. import leftAsideTree from "@/components/homeView/leftAsideTree.vue";
  80. import topoImageCard from "@/components/homeView/topoImageCard.vue";
  81. export default {
  82. name: "home",
  83. data() {
  84. return {
  85. dataSelect3: [
  86. { id: "test1", name: "选择项", sub: "hello111" },
  87. { id: "test2", name: "单平米", sub: "hola111" },
  88. {
  89. id: "test3",
  90. name: "下级分项",
  91. sub: "bonjour",
  92. divider: true,
  93. },
  94. { id: "test4", name: "滑动平均滑动平均", sub: "hi" },
  95. ],
  96. selVal: "totalEnergy",
  97. selText: "总量",
  98. dataSelect: [
  99. { id: "totalEnergy", name: "总量" },
  100. { id: "singleParty", name: "单平米" },
  101. { id: "lowerLevel", name: "下级分项" },
  102. { id: "average", name: "滑动平均", disabled: true },
  103. ],
  104. queryText: "",
  105. isPub: "已发布", // 发布类型()
  106. input2: "",
  107. outerVisible: true,
  108. innerVisible: true,
  109. ruleForm: {
  110. name: "",
  111. region: "",
  112. date1: "",
  113. date2: "",
  114. delivery: false,
  115. type: [],
  116. resource: "",
  117. desc: "",
  118. },
  119. rules: {
  120. name: [
  121. { required: true, message: "请输入活动名称", trigger: "blur" },
  122. { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
  123. ],
  124. region: [
  125. { required: true, message: "请选择活动区域", trigger: "change" },
  126. ],
  127. date1: [
  128. {
  129. type: "date",
  130. required: true,
  131. message: "请选择日期",
  132. trigger: "change",
  133. },
  134. ],
  135. date2: [
  136. {
  137. type: "date",
  138. required: true,
  139. message: "请选择时间",
  140. trigger: "change",
  141. },
  142. ],
  143. type: [
  144. {
  145. type: "array",
  146. required: true,
  147. message: "请至少选择一个活动性质",
  148. trigger: "change",
  149. },
  150. ],
  151. resource: [
  152. { required: true, message: "请选择活动资源", trigger: "change" },
  153. ],
  154. desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
  155. },
  156. value: [],
  157. cardList: [
  158. {
  159. id: 1,
  160. name: '中央供冷系统中央供冷系统中央供冷系统中央供冷系统',
  161. version: 'V1.2.2',
  162. putUser: '六千',
  163. updateTime: '2020-20-20 16:16:16',
  164. tagList: [
  165. { id: 1, name: '范德萨' },
  166. { id: 2, name: '范333德萨' },
  167. { id: 3, name: '范333德萨' }
  168. ],
  169. img: 'https://www.baidu.com/img/flexible/logo/pc/result.png',
  170. },
  171. {
  172. id: 2,
  173. name: '中央供冷系456',
  174. version: 'V1.2.2',
  175. putUser: '六千',
  176. updateTime: '2020-20-20 16:16:16',
  177. tagList: [
  178. { id: 1, name: '范德萨' },
  179. { id: 2, name: '范333德萨' },
  180. { id: 3, name: '范333德萨' }
  181. ],
  182. img: 'https://www.baidu.com/img/flexible/logo/pc/result.png',
  183. }
  184. ],
  185. checkAll: false,
  186. selectCard: [],
  187. };
  188. },
  189. methods: {
  190. testClick(data) {
  191. console.log(data);
  192. },
  193. // 创建拓扑图
  194. createProject() { },
  195. // 获取所属类别
  196. getprojectType() {
  197. this.innerVisible = true;
  198. },
  199. submitForm(formName) {
  200. this.$refs[formName].validate((valid) => {
  201. if (valid) {
  202. alert("submit!");
  203. } else {
  204. console.log("error submit!!");
  205. return false;
  206. }
  207. });
  208. },
  209. resetForm(formName) {
  210. this.$refs[formName].resetFields();
  211. },
  212. },
  213. components: { Select, Button, leftAsideTree, Dropdown, topoImageCard },
  214. };
  215. </script>
  216. <style lang="less" scoped>
  217. .home {
  218. width: 100%;
  219. height: 100%;
  220. .header {
  221. width: 100%;
  222. height: 60px;
  223. background: #f7f9fa;
  224. padding: 0 16px 0 16px;
  225. box-sizing: border-box;
  226. display: flex;
  227. align-items: center;
  228. justify-content: space-between;
  229. }
  230. .bodys {
  231. width: 100%;
  232. height: 100%;
  233. .main {
  234. width: 100%;
  235. height: 100%;
  236. background: #fff;
  237. padding: 10px 20px;
  238. box-sizing: border-box;
  239. .main-head {
  240. position: relative;
  241. width: 100%;
  242. margin-bottom: 10px;
  243. .showType {
  244. width: 100%;
  245. display: flex;
  246. align-items: center;
  247. justify-content: space-between;
  248. /deep/
  249. .el-radio-button__orig-radio:checked
  250. + .el-radio-button__inner {
  251. color: #0091ff;
  252. border-color: #0091ff;
  253. background: #e1f2ff;
  254. }
  255. .head-right {
  256. display: flex;
  257. align-items: center;
  258. .Dropdown {
  259. min-width: 100px;
  260. margin-left: 20px;
  261. .drop-text {
  262. font-size: 14px;
  263. color: #1f2329;
  264. line-height: 16px;
  265. }
  266. }
  267. }
  268. }
  269. .showAction {
  270. span.sum {
  271. border-left: 1px solid #ccc;
  272. margin: 0 8px;
  273. color: #778089;
  274. padding-left: 14px;
  275. }
  276. }
  277. }
  278. .main-body {
  279. display: flex;
  280. flex-wrap: wrap;
  281. }
  282. }
  283. }
  284. .create-dialog {
  285. .dialog-bodys {
  286. width: 367px;
  287. margin: 0 auto;
  288. }
  289. }
  290. .create-dialog-inner {
  291. .inner-dialog-body {
  292. width: 100%;
  293. display: flex;
  294. .left {
  295. flex: 1;
  296. border-right: 1px solid #ccc;
  297. }
  298. }
  299. }
  300. }
  301. </style>