Merge branch 'master' of http://192.168.11.205:9000/r/se-cloud
¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div class="box"> |
| | | <el-form style="margin-bottom: 20px" label-width="100px"> |
| | | <el-row style="height: 40px"> |
| | | <el-button type="primary">æ·»å æ¨æ¼</el-button> |
| | | <el-button |
| | | style="float: right" |
| | | icon="el-icon-video-pause" |
| | | type="primary" |
| | | >ä¸é®åæ¢</el-button |
| | | > |
| | | <el-button style="float: right" icon="el-icon-video-play" type="primary" |
| | | >ä¸é®å¯å¨</el-button |
| | | > |
| | | <el-button style="float: right" icon="el-icon-search" type="primary" |
| | | >æ¥è¯¢</el-button |
| | | > |
| | | <el-form-item style="float: right" label="ä»»å¡åç§°"> |
| | | <el-select |
| | | :popper-append-to-body="false" |
| | | v-model="task.value" |
| | | placeholder="è¯·éæ©ä»»å¡" |
| | | > |
| | | <el-option |
| | | v-for="item in task.options" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item style="float: right" label="æ¹æ¡åç§°"> |
| | | <el-select |
| | | :popper-append-to-body="false" |
| | | v-model="scheme.value" |
| | | placeholder="è¯·éæ©æ¹æ¡" |
| | | > |
| | | <el-option |
| | | v-for="item in scheme.options" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item style="float: right" label="åºæ¯ï¼æ³å®ï¼"> |
| | | <el-select |
| | | :popper-append-to-body="false" |
| | | v-model="scene.value" |
| | | placeholder="è¯·éæ©åºæ¯" |
| | | > |
| | | <el-option |
| | | v-for="item in scene.options" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-row> |
| | | </el-form> |
| | | <el-table :data="table.data"> |
| | | <el-table-column align="center" type="selection" width="55"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | v-for="(item, index) in table.tableTh" |
| | | :key="index" |
| | | :label="item.label" |
| | | :prop="item.prop" |
| | | align="center" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column label="计ç®èç¹" prop="computeNode" align="center"> |
| | | <template> |
| | | <div class="computeNode"></div> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="å卿°æ®" prop="storeData" align="center"> |
| | | <template> |
| | | <div |
| | | style=" |
| | | width: 31px; |
| | | height: 20px; |
| | | background: #ffffff; |
| | | border-radius: 10px; |
| | | margin: 0 auto; |
| | | " |
| | | ></div> </template |
| | | ></el-table-column> |
| | | <el-table-column label="ç¶æ" prop="status" align="center"> |
| | | <template> |
| | | <div |
| | | style=" |
| | | width: 20px; |
| | | height: 20px; |
| | | background: #ffffff; |
| | | border-radius: 10px; |
| | | margin: 0 auto; |
| | | " |
| | | ></div> </template |
| | | ></el-table-column> |
| | | <el-table-column label="æä½" min-width="100" align="center"> |
| | | <template slot-scope="scope"> |
| | | <el-button type="text" @click="handleClick(scope.row)" size="small" |
| | | >å¯å¨</el-button |
| | | > |
| | | <el-button type="text" @click="handleClick(scope.row)" size="small" |
| | | >忢</el-button |
| | | > |
| | | <el-button type="text" @click="handleClick(scope.row)" size="small" |
| | | >ç»§ç»</el-button |
| | | > |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | name: "InferentialTaskControl", |
| | | data() { |
| | | return { |
| | | task: { |
| | | options: [ |
| | | { |
| | | value: "qx102stect1", |
| | | label: "qx102stect1", |
| | | }, |
| | | { |
| | | value: "qx102stect2", |
| | | label: "qx102stect2", |
| | | }, |
| | | ], |
| | | value: "", |
| | | }, |
| | | scheme: { |
| | | options: [ |
| | | { |
| | | value: "qx102stect1", |
| | | label: "qx102stect1", |
| | | }, |
| | | { |
| | | value: "qx102stect2", |
| | | label: "qx102stect2", |
| | | }, |
| | | ], |
| | | value: "", |
| | | }, |
| | | scene: { |
| | | options: [ |
| | | { |
| | | value: "qx102stect1", |
| | | label: "qx102stect1", |
| | | }, |
| | | { |
| | | value: "qx102stect2", |
| | | label: "qx102stect2", |
| | | }, |
| | | ], |
| | | value: "", |
| | | }, |
| | | table: { |
| | | data: [ |
| | | { |
| | | task: "qx102stect1ä»»å¡", |
| | | scheme: "qx102stect1", |
| | | scene: "qx102stect1-åºæ¯", |
| | | computeNode: "", |
| | | startTime: "2023-06-01 00:00:00", |
| | | endTime: "2027-06-01 00:00:00", |
| | | storeData: "", |
| | | status: "", |
| | | }, |
| | | { |
| | | task: "qx102stect2ä»»å¡", |
| | | scheme: "qx102stect2", |
| | | scene: "qx102stect2-åºæ¯", |
| | | computeNode: "", |
| | | startTime: "2023-06-01 00:00:00", |
| | | endTime: "2027-06-01 00:00:00", |
| | | storeData: "", |
| | | status: "", |
| | | }, |
| | | ], |
| | | tableTh: [ |
| | | { |
| | | label: "ä»»å¡åç§°", |
| | | prop: "task", |
| | | }, |
| | | { |
| | | label: "æ¹æ¡åç§°", |
| | | prop: "scheme", |
| | | }, |
| | | { |
| | | label: "åºæ¯åç§°", |
| | | prop: "scene", |
| | | }, |
| | | { |
| | | label: "å¼å§æ¶é´", |
| | | prop: "startTime", |
| | | }, |
| | | { |
| | | label: "ç»ææ¶é´", |
| | | prop: "endTime", |
| | | }, |
| | | ], |
| | | }, |
| | | }; |
| | | }, |
| | | methods: { |
| | | handleClick(row) {}, |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | | .box { |
| | | width: 88%; |
| | | height: 85%; |
| | | background-image: url("~@/assets/images/InferentialTaskControl/bg.png"); |
| | | background-size: 100% 100%; |
| | | margin: 5% 5% 0; |
| | | padding: 10px 1% 20px; |
| | | } |
| | | /deep/ .el-form-item__label { |
| | | color: #fff; |
| | | } |
| | | |
| | | /deep/ .el-table { |
| | | background-color: rgba(0, 0, 0, 0); |
| | | .computeNode{ |
| | | background-image: url("~@/assets/images/InferentialTaskControl/computeNode.png"); |
| | | background-size: 100% 100%; |
| | | width: 35px; |
| | | height: 35px; |
| | | margin: 0 auto; |
| | | } |
| | | thead { |
| | | tr { |
| | | th { |
| | | background-color: #2d4c9e; |
| | | border-bottom: 0px; |
| | | .cell { |
| | | font-weight: 400; |
| | | font-size: 20px; |
| | | color: #fff; |
| | | text-shadow: 0px 0px 2px #00fbff; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | tbody { |
| | | tr { |
| | | background-color: rgba(0, 0, 0, 0); |
| | | td { |
| | | background-color: rgba(0, 0, 0, 0); |
| | | border-bottom: 0px; |
| | | .cell { |
| | | font-size: 16px; |
| | | color: #fff; |
| | | } |
| | | } |
| | | } |
| | | tr:hover { |
| | | border: 2px solid #4b96dd; |
| | | td { |
| | | background-color: #2d4c9e; |
| | | .cell { |
| | | color: #fff; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | /deep/ .el-table::before { |
| | | height: 0px; |
| | | } |
| | | /deep/ .el-select { |
| | | input { |
| | | border: 1px solid #4b96dd; |
| | | background-color: rgba(0, 0, 0, 0); |
| | | color: #ddd; |
| | | } |
| | | } |
| | | /deep/ .el-select-dropdown { |
| | | border: 1px solid #4b96dd; |
| | | background-color: #091631; |
| | | .el-select-dropdown__item.hover, |
| | | .el-select-dropdown__item:hover { |
| | | background-color: #2d4c9e; |
| | | color: #fff; |
| | | } |
| | | .el-select-dropdown__item { |
| | | color: #bbb; |
| | | } |
| | | } |
| | | </style> |
¶Ô±ÈÐÂÎļþ |
| | |
| | | <!-- 详æ
è¡¨æ ¼å¼¹çª --> |
| | | <template> |
| | | <div class="dataBox"> |
| | | <el-table :data="data" style="width: 100%" height="100%" |
| | | :row-class-name="tableRowClassName"> |
| | | <el-table-column |
| | | :title="item.label" |
| | | v-for="(item, index) in tableTh" |
| | | :key="index" |
| | | :prop="item.prop" |
| | | show-overflow-tooltip |
| | | :label="item.label" |
| | | :width="item.width" |
| | | placement="top" |
| | | > |
| | | <!-- <template slot-scope="scope"> |
| | | <div :title="item.label" @click="handleClick(scope.row)"></div> |
| | | </template> --> |
| | | </el-table-column> |
| | | <el-table-column v-if="operate" :label="action" width="45"> |
| | | <template slot-scope="scope"> |
| | | <div @click="handleClick(scope.row)" class="more"></div> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column v-if="deleteBut" label="å é¤" width="45"> |
| | | <template slot-scope="scope"> |
| | | <div @click="deleteClick(scope.row)" class="deleteBut"></div> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | props: { |
| | | tableData: { |
| | | type: Array, |
| | | }, |
| | | tableTh: { |
| | | type: Array, |
| | | }, |
| | | operate: { |
| | | type: Boolean, |
| | | default: false, |
| | | }, |
| | | deleteBut: { |
| | | type: Boolean, |
| | | default: false, |
| | | }, |
| | | action:{ |
| | | type: String, |
| | | default: 'æ´å¤', |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | boxShow: true, |
| | | login: false, |
| | | data: ["test"], |
| | | } |
| | | }, |
| | | watch: { |
| | | tableData: { |
| | | handler: function (newVal, oldVal) { |
| | | this.data = newVal |
| | | }, |
| | | immediate: true, |
| | | }, |
| | | }, |
| | | methods: { |
| | | //触å详æ
äºä»¶ |
| | | handleClick(data) { |
| | | console.log(this.$parent) |
| | | this.$parent.handleClick(data) |
| | | }, |
| | | //触å详æ
äºä»¶ |
| | | deleteClick(data) { |
| | | this.$parent.deleteClick(data) |
| | | }, |
| | | // rowDblclick(row) { |
| | | // this.$parent.rowDblclick(row) |
| | | // }, |
| | | //æ ·å¼æ§å¶ |
| | | tableRowClassName({row, rowIndex}){ |
| | | if (row.lx && row.lx != 'ééç¹äºº') { |
| | | // return 'zdr-row' |
| | | let className = '' |
| | | switch (row.lx) { |
| | | case 'ç¬å±
è人': |
| | | className = 'zdr-row-1' |
| | | break; |
| | | case 'éä¼å人': |
| | | className = 'zdr-row-2' |
| | | break; |
| | | case 'é«é¾è人': |
| | | className = 'zdr-row-3' |
| | | break; |
| | | case 'å°é¾äººå': |
| | | className = 'zdr-row-4' |
| | | break; |
| | | case 'åå¦': |
| | | className = 'zdr-row-6' |
| | | break; |
| | | default: |
| | | break; |
| | | } |
| | | return className; |
| | | } |
| | | return '' |
| | | } |
| | | }, |
| | | mounted(){ |
| | | //tooltipèªéåºéé
|
| | | // function bodyScale() { |
| | | // var deviceHeight = document.documentElement.clientHeight;//è·åå½åå辨çä¸ç坿¯åºåé«åº¦ |
| | | // var scale = deviceHeight/1080; |
| | | // let tooltip = document.getElementsByClassName('el-tooltip__popper') |
| | | // for(let i in tooltip){ |
| | | // if(typeof tooltip[i] == 'object'){ |
| | | // // tooltip[i].style.zoom = scale |
| | | // // clearInterval(tooltipTime) |
| | | // } |
| | | // } |
| | | // } |
| | | // //卿çå¬å½ååè¾¨çæ¯å¦æ¹å |
| | | // window.addEventListener('resize',function() { |
| | | // bodyScale(); |
| | | // }) |
| | | // let tooltipTime = setInterval(() => { |
| | | // bodyScale(); |
| | | // }, 500); |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | | .dataBox { |
| | | width: 100%; |
| | | height: 100%; |
| | | .more { |
| | | width: 23px; |
| | | height: 23px; |
| | | background-image: url("~@/assets/images/button/Arrow.png"); |
| | | background-size: 100% 100%; |
| | | cursor: pointer; |
| | | margin: 0 auto; |
| | | } |
| | | .deleteBut { |
| | | width: 23px; |
| | | height: 23px; |
| | | background-image: url("~@/assets/images/button/delete.png"); |
| | | background-size: 100% 100%; |
| | | cursor: pointer; |
| | | margin: 0 auto; |
| | | } |
| | | ::v-deep .el-table { |
| | | background-color: rgba(0, 0, 0, 0); |
| | | border-bottom: 0px; |
| | | color: #fff; |
| | | } |
| | | ::v-deep .el-table::before { |
| | | height: 0px; |
| | | } |
| | | ::v-deep .el-table thead tr { |
| | | background-color: rgba(0, 0, 0, 0); |
| | | background-image: url("~@/assets/images/button/tr.png"); |
| | | background-size: 100% 100%; |
| | | font-size: 16px; |
| | | } |
| | | ::v-deep .el-table thead tr th { |
| | | background-color: rgba(0, 0, 0, 0); |
| | | border-bottom: 0px; |
| | | text-align: center; |
| | | .cell { |
| | | padding: 0; |
| | | color: #e1f8ff; |
| | | } |
| | | } |
| | | ::v-deep .el-table tbody { |
| | | tr:nth-child(2n-1) { |
| | | margin-top: 5px; |
| | | background-color: rgba(0, 0, 0, 0); |
| | | border-bottom: 0px; |
| | | background-image: url("~@/assets/images/button/single.png"); |
| | | background-size: 100% 100%; |
| | | font-size: 13px; |
| | | max-height: 30px; |
| | | } |
| | | tr:nth-child(2n) { |
| | | margin-top: 5px; |
| | | background-color: rgba(0, 0, 0, 0); |
| | | border-bottom: 0px; |
| | | background-image: url("~@/assets/images/button/double.png"); |
| | | background-size: 100% 100%; |
| | | font-size: 13px; |
| | | max-height: 30px; |
| | | } |
| | | tr:hover { |
| | | margin-top: 5px; |
| | | background-color: rgba(0, 0, 0, 0); |
| | | border-bottom: 0px; |
| | | background-image: url("~@/assets/images/button/hover.png"); |
| | | td { |
| | | .cell { |
| | | color: #fff; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | ::v-deep .el-table tbody tr td { |
| | | background-color: rgba(0, 0, 0, 0); |
| | | border-bottom: 0px; |
| | | text-align: center; |
| | | .cell { |
| | | font-size: 14px; |
| | | padding: 0 2px 0 2px; |
| | | color: #dbdbdb; |
| | | } |
| | | } |
| | | ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell { |
| | | background-color: rgba(0, 0, 0, 0); |
| | | } |
| | | ::v-deep .el-table { |
| | | .zdr-row-1{ td { .cell { color: #32db87;}}} |
| | | .zdr-row-1:hover{ td{ .cell{color: #00FF7F;}}} |
| | | .zdr-row-2{ td { .cell { color: #8b7fd3;}}} |
| | | .zdr-row-2:hover{ td{ .cell{color: #8470FF;}}} |
| | | .zdr-row-3{ td { .cell { color: #db7575;}}} |
| | | .zdr-row-3:hover{ td{ .cell{color: #FF6A6A;}}} |
| | | .zdr-row-4{ td { .cell { color: #c9be48;}}} |
| | | .zdr-row-4:hover{ td{ .cell{color: #FFF68F;}}} |
| | | .zdr-row-6{ td { .cell { color: #25b2e0;}}} |
| | | .zdr-row-6:hover{ td{ .cell{color: #00BFFF;}}} |
| | | } |
| | | |
| | | ::v-deep .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar { |
| | | /* 对åºçºµåæ»å¨æ¡ç宽度 */ |
| | | width: 10px; |
| | | /* å¯¹åºæ¨ªåæ»å¨æ¡ç宽度 */ |
| | | height: 0px; |
| | | } |
| | | ::v-deep .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb { |
| | | background-image: url("~@/assets/images/button/scrollBar.png"); |
| | | background-size: 100% 100%; |
| | | cursor: pointer; |
| | | } |
| | | ::v-deep .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-track { |
| | | background: #41494c; |
| | | background-size: 100% 100%; |
| | | } |
| | | } |
| | | </style> |
¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div class="door"> |
| | | <div class="item" v-for="(item, index) in doorList" :key="index"> |
| | | <div class="title"> |
| | | <span> |
| | | <img src="../assets/img/home/door_icon.png" alt="" /> |
| | | </span> |
| | | <span>{{ item.name }}</span> |
| | | </div> |
| | | <div |
| | | class="ele" |
| | | v-for="(ele, i) in item.child" |
| | | :key="i" |
| | | @click="routerJump(item.child, ele)" |
| | | > |
| | | {{ ele.name }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | data() { |
| | | return { |
| | | doorList: [ |
| | | { |
| | | name: "åç³»ç»è¿è¡æ§å¶", |
| | | child: [ |
| | | { |
| | | name: "åç³»ç»è½¯ä»¶æ§å¶", |
| | | url: "" |
| | | }, |
| | | { |
| | | name: "æ¨æ¼ä»»å¡æ§å¶", |
| | | url: "/home/InferentialTaskControl" |
| | | }, |
| | | { |
| | | name: "åç³»ç»ç¶æçæ§", |
| | | url: "" |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | name: "ç³»ç»äº¤äºç®¡ç", |
| | | child: [ |
| | | { |
| | | name: "åç³»ç»äº¤äºç®¡ç", |
| | | url: "/home/interactive" |
| | | }, |
| | | { |
| | | name: "å¤é¨ç³»ç»æ¥å
¥", |
| | | url: "" |
| | | }, |
| | | { |
| | | name: "ç³»ç»æ¥å£ç®¡ç", |
| | | url: "" |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | name: "ç³»ç»èµæºé
ç½®", |
| | | child: [ |
| | | { |
| | | name: "ç¡¬ä»¶èµæºç®¡ç", |
| | | url: "" |
| | | }, |
| | | { |
| | | name: "è½¯ä»¶èµæºç®¡ç", |
| | | url: "" |
| | | } |
| | | ] |
| | | } |
| | | ] |
| | | }; |
| | | }, |
| | | methods: { |
| | | routerJump(arr, e) { |
| | | if (e.url) { |
| | | this.$router.push(e.url); |
| | | this.$store.dispatch("Tab", arr); |
| | | } |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | | .door { |
| | | padding: 0 60px; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | .item { |
| | | width: 554px; |
| | | height: 830px; |
| | | background: url("../assets/img/home/door_bg.png"); |
| | | .title { |
| | | position: relative; |
| | | font-family: Source Han Sans SC; |
| | | font-weight: 400; |
| | | font-size: 36px; |
| | | color: #4b96dd; |
| | | :nth-child(2) { |
| | | position: absolute; |
| | | top: 4px; |
| | | left: 50px; |
| | | } |
| | | } |
| | | .ele { |
| | | margin: 100px auto; |
| | | width: 456px; |
| | | height: 75px; |
| | | text-align: center; |
| | | line-height: 75px; |
| | | background: url("../assets/img/home/door_item.png"); |
| | | font-family: Source Han Sans CN; |
| | | font-weight: bold; |
| | | font-size: 28px; |
| | | color: #ffffff; |
| | | } |
| | | } |
| | | } |
| | | </style> |
¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div class="home"> |
| | | <div class="header">使å®éªæ¡ä»¶å»ºè®¾</div> |
| | | <div class="tab" v-if="name != '鍿·'"> |
| | | <div |
| | | :class="name == item.name ? 'item-height' : 'item'" |
| | | v-for="(item, index) in tab" |
| | | :key="index" |
| | | @click="tabChange(item)" |
| | | > |
| | | {{ item.name }} |
| | | </div> |
| | | </div> |
| | | <div class="btn"> |
| | | <img src="../assets/img/home/home.png" alt="" /> |
| | | <img |
| | | src="../assets/img/home/return.png" |
| | | alt="" |
| | | v-show="name != '鍿·'" |
| | | @click="toDoor" |
| | | /> |
| | | </div> |
| | | <div class="content"> |
| | | <router-view :key="key" /> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { mapState } from "vuex"; |
| | | export default { |
| | | computed: { |
| | | tab() { |
| | | return this.$store.state.user.tab; |
| | | }, |
| | | |
| | | key() { |
| | | return this.$route.path; |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.$watch("$route", (to, from) => { |
| | | this.name = to.name; |
| | | }); |
| | | }, |
| | | data() { |
| | | return { |
| | | name: "鍿·" |
| | | }; |
| | | }, |
| | | methods: { |
| | | tabChange(e) { |
| | | this.$router.push(e.url); |
| | | }, |
| | | toDoor() { |
| | | this.$router.push("/home/door"); |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | | .home { |
| | | position: relative; |
| | | width: 100%; |
| | | height: 100%; |
| | | background: #091631; |
| | | .header { |
| | | width: 100%; |
| | | height: 87px; |
| | | line-height: 87px; |
| | | background: url("../assets/img/home/header_bg.png"); |
| | | font-family: Source Han Sans CN; |
| | | font-weight: bold; |
| | | font-size: 48px; |
| | | color: #00e7fb; |
| | | text-align: center; |
| | | } |
| | | .btn { |
| | | position: absolute; |
| | | top: 60px; |
| | | right: 60px; |
| | | img { |
| | | margin-left: 10px; |
| | | } |
| | | } |
| | | .tab { |
| | | position: absolute; |
| | | top: 60px; |
| | | left: 200px; |
| | | display: flex; |
| | | :nth-child(3) { |
| | | margin-left: 480px; |
| | | } |
| | | .item { |
| | | width: 256px; |
| | | height: 75px; |
| | | line-height: 75px; |
| | | text-align: center; |
| | | background: url("../assets/img/home/tab.png"); |
| | | font-family: Source Han Sans CN; |
| | | font-weight: bold; |
| | | font-size: 28px; |
| | | color: #ffffff; |
| | | } |
| | | .item-height { |
| | | width: 256px; |
| | | height: 75px; |
| | | line-height: 75px; |
| | | text-align: center; |
| | | background: url("../assets/img/home/tab_height.png"); |
| | | font-family: Source Han Sans CN; |
| | | font-weight: bold; |
| | | font-size: 28px; |
| | | color: #ffffff; |
| | | } |
| | | } |
| | | .content { |
| | | width: 100%; |
| | | height:calc(100vh - 183px); |
| | | margin-top: 60px; |
| | | } |
| | | } |
| | | </style> |
¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div class="interactive"> |
| | | <h1>1111111111</h1> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default {}; |
| | | </script> |
| | | |
| | | <style lang="less" scope></style> |
| | |
| | | }, |
| | | // è´¦å·å¯ç ç»å½ |
| | | submitForm(formName) { |
| | | this.$router.push("/index"); |
| | | this.$router.push("/home/door"); |
| | | // this.$refs[formName].validate(valid => { |
| | | // if (valid) { |
| | | |
| | |
| | | import Vue from 'vue' |
| | | import Router from 'vue-router' |
| | | import index from '@/components/index' |
| | | import login from '@/components/login' |
| | | import Vue from "vue"; |
| | | import Router from "vue-router"; |
| | | import index from "@/components/index"; |
| | | import login from "@/components/login"; |
| | | import URLconfig from "../../static/URLconfig"; |
| | | import home from "@/components/home"; |
| | | |
| | | Vue.use(Router) |
| | | Vue.use(Router); |
| | | const routes = [ |
| | | { |
| | | path: '/', |
| | | redirect: "login", |
| | | path: "/", |
| | | redirect: "login" |
| | | }, |
| | | { |
| | | path: '/login', |
| | | name: 'login', |
| | | component: login, |
| | | path: "/login", |
| | | name: "login", |
| | | component: login |
| | | }, |
| | | { |
| | | path: '/index', |
| | | name: 'index', |
| | | path: "/index", |
| | | name: "index", |
| | | component: index |
| | | }, |
| | | { |
| | | path: "/home", |
| | | component: home, |
| | | redirect: "home", |
| | | hidden: true, |
| | | children: [ |
| | | { |
| | | path: "door", |
| | | name:'鍿·', |
| | | component: () => import("@/components/door.vue") |
| | | }, |
| | | { |
| | | path: "interactive", |
| | | name:'åç³»ç»äº¤äºç®¡ç', |
| | | component: () => import("@/components/interactive.vue") |
| | | }, |
| | | { |
| | | path: "InferentialTaskControl", |
| | | name:'æ¨æ¼ä»»å¡æ§å¶', |
| | | component: () => import("@/components/InferentialTaskControl.vue") |
| | | }, |
| | | ] |
| | | } |
| | | ]; |
| | | const router = new Router({ |
| | | mode: "history", |
| | | // base: URLconfig.routerBase, |
| | | routes, |
| | | routes |
| | | }); |
| | | // router.beforeEach((to, from, next) => { |
| | | // next(); |
| | | // }) |
| | | export default router; |
| | | |
| | | |
| | |
| | | import { login, logout, getInfo, refreshToken } from '@/api/login' |
| | | import { getToken, setToken, setExpiresIn, removeToken } from '@/utils/auth' |
| | | import { login, logout, getInfo, refreshToken } from "@/api/login"; |
| | | import { getToken, setToken, setExpiresIn, removeToken } from "@/utils/auth"; |
| | | import { encr } from "@/utils/jsencrypt"; |
| | | |
| | | const user = { |
| | | state: { |
| | | token: getToken(), |
| | | id: '', |
| | | name: '', |
| | | avatar: '', |
| | | id: "", |
| | | name: "", |
| | | avatar: "", |
| | | roles: [], |
| | | permissions: [] |
| | | permissions: [], |
| | | tab: [] |
| | | }, |
| | | |
| | | mutations: { |
| | | SET_TOKEN: (state, token) => { |
| | | state.token = token |
| | | state.token = token; |
| | | }, |
| | | SET_EXPIRES_IN: (state, time) => { |
| | | state.expires_in = time |
| | | state.expires_in = time; |
| | | }, |
| | | SET_ID: (state, id) => { |
| | | state.id = id |
| | | state.id = id; |
| | | }, |
| | | SET_NAME: (state, name) => { |
| | | state.name = name |
| | | state.name = name; |
| | | }, |
| | | SET_AVATAR: (state, avatar) => { |
| | | state.avatar = avatar |
| | | state.avatar = avatar; |
| | | }, |
| | | SET_ROLES: (state, roles) => { |
| | | state.roles = roles |
| | | state.roles = roles; |
| | | }, |
| | | SET_PERMISSIONS: (state, permissions) => { |
| | | state.permissions = permissions |
| | | } |
| | | state.permissions = permissions; |
| | | }, |
| | | SET_TAB: (state, tab) => { |
| | | state.tab = tab; |
| | | }, |
| | | }, |
| | | |
| | | actions: { |
| | | Tab({ commit }, state) { |
| | | commit("SET_TAB", state); |
| | | }, |
| | | // ç»å½ |
| | | Login({ commit }, userInfo) { |
| | | const username = userInfo.username.trim() |
| | | const username = userInfo.username.trim(); |
| | | let pwd = encr(userInfo.password); |
| | | const password = pwd; |
| | | // const password = userInfo.password |
| | | const code = userInfo.code |
| | | const uuid = userInfo.uuid |
| | | const code = userInfo.code; |
| | | const uuid = userInfo.uuid; |
| | | return new Promise((resolve, reject) => { |
| | | login(username, password).then(res => { |
| | | let data = res.data |
| | | setToken(data.access_token) |
| | | commit('SET_TOKEN', data.access_token) |
| | | setExpiresIn(data.expires_in) |
| | | commit('SET_EXPIRES_IN', data.expires_in) |
| | | resolve() |
| | | }).catch(error => { |
| | | reject(error) |
| | | }) |
| | | }) |
| | | login(username, password) |
| | | .then(res => { |
| | | let data = res.data; |
| | | setToken(data.access_token); |
| | | commit("SET_TOKEN", data.access_token); |
| | | setExpiresIn(data.expires_in); |
| | | commit("SET_EXPIRES_IN", data.expires_in); |
| | | resolve(); |
| | | }) |
| | | .catch(error => { |
| | | reject(error); |
| | | }); |
| | | }); |
| | | }, |
| | | |
| | | // // è·åç¨æ·ä¿¡æ¯ |
| | |
| | | // å·æ°token |
| | | RefreshToken({ commit, state }) { |
| | | return new Promise((resolve, reject) => { |
| | | refreshToken(state.token).then(res => { |
| | | setExpiresIn(res.data) |
| | | commit('SET_EXPIRES_IN', res.data) |
| | | resolve() |
| | | }).catch(error => { |
| | | reject(error) |
| | | }) |
| | | }) |
| | | refreshToken(state.token) |
| | | .then(res => { |
| | | setExpiresIn(res.data); |
| | | commit("SET_EXPIRES_IN", res.data); |
| | | resolve(); |
| | | }) |
| | | .catch(error => { |
| | | reject(error); |
| | | }); |
| | | }); |
| | | }, |
| | | |
| | | // éåºç³»ç» |
| | | LogOut({ commit, state }) { |
| | | return new Promise((resolve, reject) => { |
| | | logout(state.token).then(() => { |
| | | commit('SET_TOKEN', '') |
| | | commit('SET_ROLES', []) |
| | | commit('SET_PERMISSIONS', []) |
| | | removeToken() |
| | | resolve() |
| | | }).catch(error => { |
| | | reject(error) |
| | | }) |
| | | }) |
| | | logout(state.token) |
| | | .then(() => { |
| | | commit("SET_TOKEN", ""); |
| | | commit("SET_ROLES", []); |
| | | commit("SET_PERMISSIONS", []); |
| | | removeToken(); |
| | | resolve(); |
| | | }) |
| | | .catch(error => { |
| | | reject(error); |
| | | }); |
| | | }); |
| | | }, |
| | | |
| | | // å端 ç»åº |
| | | FedLogOut({ commit }) { |
| | | return new Promise(resolve => { |
| | | commit('SET_TOKEN', '') |
| | | removeToken() |
| | | resolve() |
| | | }) |
| | | commit("SET_TOKEN", ""); |
| | | removeToken(); |
| | | resolve(); |
| | | }); |
| | | } |
| | | } |
| | | } |
| | | }; |
| | | |
| | | export default user |
| | | export default user; |