diff --git a/src/assets/img/view/fire.png b/src/assets/img/view/fire.png new file mode 100644 index 0000000..1e28f9f Binary files /dev/null and b/src/assets/img/view/fire.png differ diff --git a/src/assets/img/view/fire2.png b/src/assets/img/view/fire2.png new file mode 100644 index 0000000..8ef599f Binary files /dev/null and b/src/assets/img/view/fire2.png differ diff --git a/src/assets/img/view/play.png b/src/assets/img/view/play.png new file mode 100644 index 0000000..25a71ff Binary files /dev/null and b/src/assets/img/view/play.png differ diff --git a/src/assets/img/view/tree-icon.png b/src/assets/img/view/tree-icon.png new file mode 100644 index 0000000..46fb1f0 Binary files /dev/null and b/src/assets/img/view/tree-icon.png differ diff --git a/src/assets/img/view/view.png b/src/assets/img/view/view.png new file mode 100644 index 0000000..cb3ab5b Binary files /dev/null and b/src/assets/img/view/view.png differ diff --git a/src/assets/style/pageCommon.component.scss b/src/assets/style/pageCommon.component.scss index 599b63c..54a3d4b 100644 --- a/src/assets/style/pageCommon.component.scss +++ b/src/assets/style/pageCommon.component.scss @@ -2777,4 +2777,350 @@ svg.loading-icon { margin-right: 6px; } } +.tree-box{ + width: 330px; + height: 300px; + padding: 14px; + background: rgba(0,0,0,0.5); + box-shadow: 0 10px 20px -10px #000000; + border-radius: 6px; + border: 1px solid; + border-image: linear-gradient(165deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0)) 1 1; +} +.tree-line{ + &.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{ + background: rgba(125, 174, 255, 0.7); + } + &::before{ + content: ""; + height: 79%; + width: 1px; + position: absolute; + left: 23px; + top: 14px; + border-width: 1px; + border-left: 1px solid #ffffff; + } + & > div[role="treeitem"] { + padding-bottom: 10px; + } + .white{ + color: #FFFFFF; + font-size: 14px; + } + .custom-tree-node{ + position: relative; + left: 8px; + width: 100%; + .doc-style{ + width: 5px; + height: 5px; + border-radius: 50%; + background-color: #FFFFFF; + position: absolute; + left: -11px; + } + } + .right-icon{ + transition: all .3s linear; + position: relative; + left: -10px; + } + .sub-item{ + padding-left: 16px; + &::before{ + content: ''; + width: 12px; + height: 20px; + position: absolute; + left: -3px; + top: 9px; + border-width: 1px; + //border-top: 1px solid #ffffff; + } + &::after{ + content: ""; + height: 130%; + width: 1px; + position: absolute; + left: -1px; + top: 0px; + border: none; + } + } + .is-expanded{ + .sub-item{ + padding-left: 8px; + &::before{ + content: ''; + width: 3px; + height: 20px; + position: absolute; + left: -3px; + top: 9px; + border-width: 1px; + //border-top: 1px solid #ffffff; + } + &::after{ + content: ""; + height: 100%; + width: 1px; + position: absolute; + left: -1px; + top: 10px; + border-width: 1px; + border-left: 1px solid #ffffff; + } + } + .sub-item-border-none{ + &::after{ + content: ""; + height: 130%; + width: 1px; + position: absolute; + left: -1px; + top: 0px; + border: none; + + } + } + + } + div[role="treeitem"].is-expanded > div.el-tree-node__content > div > span:nth-child(2), + div[role="group"] div[role="treeitem"].is-expanded, + { + .right-icon{ + transform: rotate(90deg); + transition: all .3s linear; + } + } + + &.el-tree,.el-tree-node__content, .el-upload-list__item{ + background: transparent; + &:hover,&:focus,&:active,&:visited{ + background: transparent; + + } + } + .el-tree-node:focus>.el-tree-node__content{ + background: transparent; + } + + .tree-level-1-icon{ + width: 24px; + height: 24px; + background: #FFFFFF; + border-radius: 2px; + position: relative; + left: -12px; + } + + + margin-top:10px; + .el-tree-node { + position: relative; + color: black; + padding: 0; + padding-left: 10px; // 缩进量 + } + .el-tree-node__children { + padding-left: 16px; // 缩进量 + } + + // 竖线 + .el-tree-node::before { + content: ""; + height: 100%; + width: 1px; + position: absolute; + left: -3px; + top: -13px; + border-width: 1px; + border-left: 1px solid #ffffff; + } + // 当前层最后一个节点的竖线高度固定 + .el-tree-node:last-child::before { + height: 34px; // 可以自己调节到合适数值 + } + + // 横线 + .el-tree-node::after { + content: ""; + width: 27px; + //width: 16px; + height: 20px; + position: absolute; + left: -3px; + top: 20px; + border-width: 1px; + border-top: 1px solid #ffffff; + content: ""; + + } + // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了 + & > .el-tree-node::after { + border-top: none; + } + & > .el-tree-node::before { + border-left: none; + } + + .el-tree-node__content{ + padding-left:0 !important; + color:#444; + height: 40px; + // 树缩进样式 + .el-icon-caret-right::before{ + content: ""; + width:14px; + height:14px; + background-size: 100% 100%; + border-radius: 3px; + display: inline-block; + } + .el-tree-node__expand-icon.expanded{ + transform: rotate(0); + } + // 树展开样式 + .el-tree-node__expand-icon.expanded::before{ + content: ""; + width:0; + height:0; + background-size: 100% 100%; + border-radius: 3px; + display: inline-block; + } + .el-tree-node__expand-icon.is-leaf::before{ + content: ""; + } + .el-icon-caret-right.is-leaf::before{ + content: ""; + display: none; + } + .custom-tree-node .file_class{ + color: #ffb400; + } + .custom-tree-node .label{ + margin-left:5px; + } + .custom-tree-node .no_children{ + color: #aaa; + } + } + // 使用flex布局对custom-tree-node_body盒子进行排版 + .custom-tree-node_body{ + width:100%; + display: flex; + justify-content: space-between; + // margin-top:-3px; + } + .tree_form_left_tree_icon{ + padding:0 3px; + font-size:16px; + color:#666; + i{ + margin:0 4px; + } + } + .tree_form_left_tree_icon:hover{ + cursor: pointer; + } + // 展开关闭的icon + .el-tree-node__expand-icon{ + font-size: 16px; + padding: 0 3px; + // 叶子节点（无子节点） + &.is-leaf{ + color: transparent; + // display: none; // 也可以去掉 + } + } + +} +.view-list{ + &-item{ + width: 330px; + height: 186px; + border-radius: 8px; + background-color: #1B6BEB; + position: relative; + margin-bottom: 20px; + &:last-child{ + margin-bottom: 0; + } + &-title{ + position: absolute; + bottom: 0; + border-radius: 0 0 8px 8px; + background: rgba(0,0,0,0.7); + height: 34px; + line-height: 34px; + width: 100%; + } + + .cover { + top: 0; + width: 100%; + height: 100%; + text-align: center; + position: absolute; + background-color: rgba(0, 0, 0, 0.5); + opacity: 0; + cursor: pointer; + } + + /* 鼠标hover,显示遮罩,设置过渡时间 */ + .cover:hover { + transition: all .4s; + opacity: 1; + } + } +} +.view-right-title{ + font-size: 20px; + color: #FFFFFF; + padding: 20px 0; + border-bottom: 1px solid rgba(216,216,216,0.4);; +} +.sub-title{ + font-size: 16px; + margin-bottom: 16px; + margin-top: 16px; +} +.text-con{ + color: rgba(255, 255, 255, 0.6); + font-size: 14px; +} +.right-view-list{ + height: 1px; + flex: 1; + overflow-y: auto; + @include scrollStyle(2px); +} +.right-view-item{ + width: 350px; + height: 98px; + background: rgba(0,0,0,0.3); + border-radius: 8px; + border: 1px solid rgba(255,255,255,0.15); + padding-left: 3px; + margin-bottom: 10px; + cursor: pointer; + &:last-child{ + margin-bottom: 0; + } + img{ + margin-right: 12px; + } + p{ + font-size: 16px; + padding: 0 0 10px 0; + } + .right-sub-text{ + font-size: 12px; + } + .el-rate__icon{ + margin-right: 0; + } +} diff --git a/src/components/home/right/chartData.js b/src/components/home/right/chartData.js index 2c05362..92e12ff 100644 --- a/src/components/home/right/chartData.js +++ b/src/components/home/right/chartData.js @@ -98,9 +98,12 @@ export const lineChartData = function () { ], tooltip: { - show: false, - alwaysShowContent: false, - trigger: 'item' + trigger: 'item', + backgroundColor:"rgba(0,0,0,0.6)", + borderWidth:0, + textStyle:{ + color:"rgba(255,255,255,0.8)", + }, }, grid: { x: 30, @@ -111,18 +114,23 @@ export const lineChartData = function () { } } -export const roundChartData = function () { +export const radarChartData = function () { return { - backgroundColor: "#0A2E5D", - tooltip: {}, - + tooltip: { + trigger: 'item', + backgroundColor:"rgba(0,0,0,0.6)", + borderWidth:0, + textStyle:{ + color:"rgba(255,255,255,0.8)", + }, + }, radar: { - radius: "50%", //大小 - nameGap: 20, // 图中工艺等字距离图的距离 + radius: "70%", //大小 + nameGap: 10, // 图中工艺等字距离图的距离 center: ["50%", "50%"], // 图的位置 name: { textStyle: { - color: "rgba(101, 213, 255, 1)", + color: "rgba(255,255,255,0.8)", fontSize: 16 }, formatter: function(name) { @@ -130,15 +138,14 @@ export const roundChartData = function () { } }, indicator: [ - {"name":'社会稳定',"max":"100"}, - {"name":'社会治安',"max":"100"}, - {"name":'交通安全',"max":"100"}, - {"name":'消防安全',"max":"100"}, - {"name":'公共安全',"max":"100"}, + {"name":'1月',"max":"100"}, + {"name":'2月',"max":"100"}, + {"name":'3月',"max":"100"}, + {"name":'4月',"max":"100"}, + {"name":'5月',"max":"100"}, ], axisLine: { lineStyle: { - color: "rgba(153, 409, 246, 0.2)" }, show:true, @@ -163,7 +170,7 @@ export const roundChartData = function () { series: [ { - name: "报警类型分析", + name: "物资统计", type: "radar", symbol: "angle", itemStyle: { @@ -176,16 +183,16 @@ export const roundChartData = function () { symbol: "circle", symbolSize: 5, value: [70,42,63,84,75,34], - areaStyle: { color: "rgba(64, 205, 241, 0.2)" }, + areaStyle: { color: "rgba(125,174,255,0.5)" }, itemStyle: { normal: { borderWidth:1, - color: "RGBA(0, 34, 66, 1)", - borderColor: "rgba(146, 225, 255, 1)" + color: "#7FB0FF", + borderColor: "#7FB0FF" } }, lineStyle: { - color: "rgba(146, 225, 255, 1)", + color: "#7FB0FF", width: 1 } } diff --git a/src/components/home/right/confirm.component.vue b/src/components/home/right/confirm.component.vue deleted file mode 100644 index 587a25c..0000000 --- a/src/components/home/right/confirm.component.vue +++ /dev/null @@ -1,289 +0,0 @@ - - - diff --git a/src/components/home/right/homeRight.component.html b/src/components/home/right/homeRight.component.html index 38b1646..bd8aa0f 100644 --- a/src/components/home/right/homeRight.component.html +++ b/src/components/home/right/homeRight.component.html @@ -3,7 +3,8 @@ 能耗统计 - +
@@ -13,7 +14,7 @@
安防设备 -
+
100/300
@@ -35,79 +36,8 @@ 物资盘点 -
-
-
{{count}}%
- 物资完备度 -
- -
-
- -
-
×
-
-
-
-
-
{{popTitle}}
- - - - - - - - - - - - - - - - - - - - - - -
-
确认
-
取消
-
-
- -
-
×
-
-
-
-
-
报警记录
-
- 告警类型 - 告警内容 - 报警内容 - 上报人员 - 事故地点 - 处理意见 -
-
-
- {{item.type}} - {{item.content}} - {{item.alarm}} - {{item.reporter}} - {{item.address}} - {{item.suggestion}} -
-
- - +
+ diff --git a/src/components/home/right/homeRight.component.ts b/src/components/home/right/homeRight.component.ts index e2d28e6..c34b3ca 100644 --- a/src/components/home/right/homeRight.component.ts +++ b/src/components/home/right/homeRight.component.ts @@ -1,6 +1,6 @@ import {Component, Emit, Vue} from 'vue-property-decorator'; import template from "./homeRight.component.html" -import {lineChartData} from "./chartData"; +import {lineChartData,radarChartData} from "./chartData"; import TitleComponent from "@/components/title.component.vue" import * as echarts from 'echarts'; @@ -25,15 +25,11 @@ export default class HomeRightComponent extends Vue { option: any = {} //折线图实例 lineChart: any = {} - // 计数 - count = 0 - public colors = [ - {color: '#FF5959', percentage: 20}, - {color: '#FFA900', percentage: 40}, - {color: '#FADFA4', percentage: 60}, - {color: '#C9FFD7', percentage: 80}, - {color: '#76c893', percentage: 100} - ]; + //雷达图数据 + radarData: any = {} + //折线图实例 + radar: any = {} + showPop = false showLogPop = false popTitle = '开启演练' @@ -216,42 +212,17 @@ export default class HomeRightComponent extends Vue { suggestion:'立即救援', }, ] - //开始演练 - startDrill(){ - this.showPop = true - } - //报警记录 - showLog(){ - this.showLogPop = true - } - submitWaring(){ - this.showPop = false - this.showPlan() - } - @Emit('showPlan') - showPlan(){ - // - } - public textFormat(data){ - return "" - } - public getCount(data){ - this.count = 0; - setTimeout(()=>{ - const timer = setInterval(()=>{ - if(this.count { this.lineChart.clear() this.lineChart.setOption(this.option) - this.getCount(this.count) }, 5000) } @@ -287,7 +257,6 @@ export default class HomeRightComponent extends Vue { } mounted() { - this.getCount(70) this.autoChangeLineData() window.addEventListener("resize", this.resize); } diff --git a/src/components/home/right/judgment.component.vue b/src/components/home/right/judgment.component.vue deleted file mode 100644 index f0ac06c..0000000 --- a/src/components/home/right/judgment.component.vue +++ /dev/null @@ -1,269 +0,0 @@ - - - diff --git a/src/components/title.component.vue b/src/components/title.component.vue index c039363..645c342 100644 --- a/src/components/title.component.vue +++ b/src/components/title.component.vue @@ -8,18 +8,14 @@ 查看更多 -
+
- 人工接警 + 自由导览
-
- 缺失物资清单 - -
@@ -36,9 +32,7 @@ export default class TitleComponent extends Vue { //关闭按钮显示隐藏 @Prop({default: false}) showClose!: boolean; //人工接警按钮显示隐藏 - @Prop({default: false}) showManual!: boolean; - //缺失物资清单 - @Prop({default: false}) showList!: boolean; + @Prop({default: false}) showViewFlag!: boolean; @Emit() changeMore(){ @@ -48,13 +42,9 @@ export default class TitleComponent extends Vue { changeClose(){ return this.showClose } - @Emit('addManual') - addManual(){ - return this.showManual - } - @Emit('showListData') - showListData(){ - return this.showManual + @Emit('showView') + showView(){ + return this.showView } } diff --git a/src/components/view/left/chartData.js b/src/components/view/left/chartData.js new file mode 100644 index 0000000..efdb970 --- /dev/null +++ b/src/components/view/left/chartData.js @@ -0,0 +1,98 @@ +export const pieChartData = { + title: { + text: '90%', + subtext: '在线率', + itemGap: 5, + x: 105, + y: '37%', + textStyle: { + fontSize: 30, + fontWeight: '600', + fontStyle: 'italic', + color: '#E8E8E8', + }, + subtextStyle: { + fontSize: 17, + fontWeight: 'normal', + align: "center", + color: '#E8E8E8' + }, + }, + tooltip: { + trigger: 'item' + }, + legend: { + orient: 'vertical', + right: '0%', + top: 'bottom', + height:100, + itemWidth: 10, + itemHeight: 10, + data: [ + {value: 25, name: '气体'}, + {value: 25, name: '水质'}, + {value: 15, name: '特征污染物'}, + {value: 20, name: '废气'}, + {value: 15, name: '废水'} + ], + textStyle: { + color: '#D4E5FF', + padding: [5, 10, 5, 10] + }, + }, + series: [ + { + type: 'pie', + selectedMode: 'single', + selectedOffset: 10, + left:-50, + radius: [50, 75], + data: [ + {value: 25, name: '气体',num:90}, + {value: 1, name: '',num:0}, + {value: 25, name: '水质',num:95}, + {value: 1, name: '',num:0}, + {value: 15, name: '特征污染物',num:94}, + {value: 1, name: '',num:0}, + {value: 20, name: '废气',num:91}, + {value: 1, name: '',num:0}, + {value: 15, name: '废水',num:89}, + {value: 1, name: '',num:0}, + ], + color: ['#7FB0FF', null, '#947FEA', null, '#C9FFD7', null, '#FADFA4', null, '#FFFFFF', null], + emphasis: { + itemStyle: { + // shadowBlur: 10, + shadowOffsetX: 0, + // borderWidth:5, + // borderColor:"rgba(255,255,255,0)", + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + }, + itemStyle: {}, + select: { + itemStyle: {} + }, + labelLine: { + show: false + }, + label: { + show: false + }, + tooltip:{ + backgroundColor:'rgba(0,0,0,0.4)', + textStyle:{ + color:'#ffffff' + }, + formatter:function (params) { + return params.data.name+' : '+ params.data.num+'%' + } + + } + } + ], + animationDuration: 0, + animationDurationUpdate: 3000, + animationEasing: 'linear', + animationEasingUpdate: 'linear' +} diff --git a/src/components/view/left/viewLeft.component.html b/src/components/view/left/viewLeft.component.html new file mode 100644 index 0000000..e890cb0 --- /dev/null +++ b/src/components/view/left/viewLeft.component.html @@ -0,0 +1,63 @@ +
+ +
+ + 训练设置 + +
+ +
+ + +
+ +
+ + {{ node.label }} + + + + +
+ +
+
+
+ + 基地导览路线 + +
+
+
+ +
+
+ 北大门东区 + + 南大门西区 +
+ +
+
+
+ +
+
+ 北大门东区 + + 南大门西区 +
+ +
+
+
+
diff --git a/src/components/view/left/viewLeft.component.ts b/src/components/view/left/viewLeft.component.ts new file mode 100644 index 0000000..209dde6 --- /dev/null +++ b/src/components/view/left/viewLeft.component.ts @@ -0,0 +1,102 @@ +import {Component, Emit, Vue} from 'vue-property-decorator'; +import template from "./viewLeft.component.html" +import TitleComponent from "@/components/title.component.vue" +import WarningListComponent from "@/components/warningList.component.vue" +import * as turf from '@turf/turf' +import Mock from "mockjs" +import moment from "moment" +import("@/assets/style/pageCommon.component.scss") + + +Component.registerHooks([ + 'beforeRouteLeave', +]); +@Component({ + template, + components: { + TitleComponent, + WarningListComponent + }, +}) +export default class ViewLeftComponent extends Vue { + //标题左侧图标 + imgSrc = require("@/assets/icons/png/env/env-title-icon.png"); + + treeData = [ + { + label: '技能训练设施', + children: [] + }, { + label: '灾害事故处置训练设施', + children: [{ + label: '火灾扑救训练设', + children: [ + { + label: '综合训练楼', + children: [] + },{ + label: '化工装置火灾事故处置训练设施', + children: [] + } + ] + }] + }, { + label: '战勤保障训练设施', + children: [] + }] +//获取class类 + getNodeClass(node){ + const arr:string[] = [] + if (node.level>1){ + arr.push('sub-item') + } + if (node.childNodes.length === 0 || !node.expanded){ + arr.push('sub-item-border-none') + } + return arr + } + @Emit('showView') + showView(){ + //todo 展开自由导览 + } + //点击告警信息 + @Emit() + getItem(item) { + // console.log('item', item) + } + //点击节点 + nodeClick(data,node,self){ + if (node.isLeaf){ + this.showViewRight(node.data) + } + + } + //显示右侧 + @Emit('showViewRight') + showViewRight(item){ + // + } + playView(){ + console.log('导览') + } + count = 1 + + + mounted() { + + } + + destroyed() { + + } + + changeMore() { + console.log(1) + } + + changeClose() { + console.log(1) + } + +} + diff --git a/src/components/view/right/chartData.js b/src/components/view/right/chartData.js new file mode 100644 index 0000000..92e12ff --- /dev/null +++ b/src/components/view/right/chartData.js @@ -0,0 +1,203 @@ + +export const lineChartData = function () { + return { + color:['#FADFA4','#947FEA'], + xAxis: { + type: 'category', + splitLine: { + show: true, + lineStyle: { + color: '#999999', + type: 'solid' + }, + }, + axisLabel: { + //x轴文字的配置 + show: true, + interval: 0,//使x轴文字显示全 + }, + axisLine: { + lineStyle: { + color: '#999999', + } + }, + + data: ['1月','2月','3月','4月','5月'] + }, + legend: { + top: 'top', + itemGap: 30, + itemWidth: 8, + itemHeight: 8, + textStyle: { + // 未单独设置样式的图例（即非上下标） + lineHeight: 12, + verticalAlign: "middle", + fontSize: 10, + color: "#fff" + }, + data:[ + { + name:'应急事件', + icon:'roundRect' + },{ + name:'应急演练', + icon:'roundRect' + } + ] + }, + yAxis: { + type: 'value', + splitLine: { + show: true, + lineStyle: { + color: '#999999', + type: 'solid' + }, + }, + axisLine: { + lineStyle: { + color: '#999999', + } + }, + }, + series: [ + { + name:'应急事件', + data: [60,80,140,70,100], + type: 'line', + symbolSize: 4, + symbol: 'circle', + lineStyle: { + width: 2 + }, + smooth: true, + label: { + show: false, + position: 'top', + color: '#ffffff', + borderWidth: 0 + }, + },{ + name:'应急演练', + data: [50,70,130,60,90], + type: 'line', + symbolSize: 4, + symbol: 'circle', + lineStyle: { + width: 2 + }, + smooth: true, + label: { + show: false, + position: 'top', + color: '#ffffff', + borderWidth: 0 + }, + } + ], + + tooltip: { + trigger: 'item', + backgroundColor:"rgba(0,0,0,0.6)", + borderWidth:0, + textStyle:{ + color:"rgba(255,255,255,0.8)", + }, + }, + grid: { + x: 30, + y: 30, + x2: 12, + y2: 20, + } + } +} + +export const radarChartData = function () { + return { + tooltip: { + trigger: 'item', + backgroundColor:"rgba(0,0,0,0.6)", + borderWidth:0, + textStyle:{ + color:"rgba(255,255,255,0.8)", + }, + }, + radar: { + radius: "70%", //大小 + nameGap: 10, // 图中工艺等字距离图的距离 + center: ["50%", "50%"], // 图的位置 + name: { + textStyle: { + color: "rgba(255,255,255,0.8)", + fontSize: 16 + }, + formatter: function(name) { + return name; + } + }, + indicator: [ + {"name":'1月',"max":"100"}, + {"name":'2月',"max":"100"}, + {"name":'3月',"max":"100"}, + {"name":'4月',"max":"100"}, + {"name":'5月',"max":"100"}, + ], + axisLine: { + lineStyle: { + color: "rgba(153, 409, 246, 0.2)" + }, + show:true, + symbolSize : [20,15], + symbolOffset:[0,15] + + }, + splitArea: { + show: false, + areaStyle: { + color: "rgba(255,0,0,0)" // 图表背景的颜色 + } + }, + splitLine: { + show: true, + lineStyle: { + width: 1, + color: "rgba(153, 209, 246, 0.2)" // 设置网格的颜色 + } + } + }, + + series: [ + { + name: "物资统计", + type: "radar", + symbol: "angle", + itemStyle: { + normal: { + areaStyle: { type: "default" } + } + }, + data: [ + { + symbol: "circle", + symbolSize: 5, + value: [70,42,63,84,75,34], + areaStyle: { color: "rgba(125,174,255,0.5)" }, + itemStyle: { + normal: { + borderWidth:1, + color: "#7FB0FF", + borderColor: "#7FB0FF" + } + }, + lineStyle: { + color: "#7FB0FF", + width: 1 + } + } + ] + } + ] + } +} diff --git a/src/components/view/right/viewRight.component.html b/src/components/view/right/viewRight.component.html new file mode 100644 index 0000000..051b27b --- /dev/null +++ b/src/components/view/right/viewRight.component.html @@ -0,0 +1,32 @@ +
+ +
+ 化工装置火灾事故装置训练设施 +
+

训练内容

+
+ 模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗 +
+

训练内容

+
+
+ + +
+

{{item.title}}

+
+ 难度: + +
+
+ 火点: + {{item.point}}个 +
+
+
+
+ + + + +
diff --git a/src/components/view/right/viewRight.component.ts b/src/components/view/right/viewRight.component.ts new file mode 100644 index 0000000..254414a --- /dev/null +++ b/src/components/view/right/viewRight.component.ts @@ -0,0 +1,72 @@ +import {Component, Emit, Vue} from 'vue-property-decorator'; +import template from "./viewRight.component.html" +import {lineChartData,radarChartData} from "./chartData"; +import TitleComponent from "@/components/title.component.vue" +import * as echarts from 'echarts'; + +import("@/assets/style/pageCommon.component.scss") + + +Component.registerHooks([ + 'beforeRouteLeave', +]); +@Component({ + template, + components: { + TitleComponent, + }, +}) +export default class ViewRightComponent extends Vue { + + tableData = [ + { + rate:3, + title:'顶层沸溢火', + point:'5', + },{ + rate:4, + title:'顶层沸溢火', + point:'5', + },{ + rate:2, + title:'顶层沸溢火', + point:'5', + },{ + rate:3, + title:'顶层沸溢火', + point:'5', + },{ + rate:4, + title:'顶层沸溢火', + point:'5', + },{ + rate:2, + title:'顶层沸溢火', + point:'5', + }, + ] + + //训练内容详情 + @Emit('showDetail') + showDetail(item){ + // + } + + mounted() { + + + } + + + + beforeDestroy() { + + } + + destroyed() { + + } + + +} + diff --git a/src/views/overview.component.html b/src/views/overview.component.html index 76107fe..e05defc 100644 --- a/src/views/overview.component.html +++ b/src/views/overview.component.html @@ -4,13 +4,19 @@
+ + +
-
+
+ + +
diff --git a/src/views/overview.component.ts b/src/views/overview.component.ts index be04703..f4595a9 100644 --- a/src/views/overview.component.ts +++ b/src/views/overview.component.ts @@ -6,13 +6,17 @@ import layer from "layui-layer" import BaseComponent from "./base.component" import HomeLeftComponent from "@/components/home/left/homeLeft.component"; import HomeRightComponent from "@/components/home/right/homeRight.component"; +import ViewLeftComponent from "@/components/view/left/viewLeft.component"; +import ViewRightComponent from "@/components/view/right/viewRight.component"; @Component({ components: { HomeLeftComponent, - HomeRightComponent + HomeRightComponent, + ViewLeftComponent, + ViewRightComponent, } }) export default class OverViewComponent extends BaseComponent { @@ -25,6 +29,9 @@ export default class OverViewComponent extends BaseComponent { // 是否展开图层 public openLayerDrawer = false; + //展示导览右侧 + viewRightShow = false + // 是否隐藏除地图外所有板块 public hideAllPanel = false; async created(){ @@ -120,12 +127,32 @@ export default class OverViewComponent extends BaseComponent { this.addMarker(layer,true) } } - - + //进入自由导览 + showView(){ + //todo 进入自由导览 + } + //展开导览右侧 + showViewRight(){ + if (this.viewRightShow){ + this.viewRightShow = false + setTimeout(()=>{ + this.viewRightShow = true + }) + }else{ + this.viewRightShow = true + } + } + //右侧详情点击事件 + showDetail(item){ + console.log('右侧详情点击事件') + } mounted() { console.log(2) } - + get showBackGround(){ + let flag = this.currentNav === 'view' && !this.viewRightShow + return flag?'none':'' + } public getCurrentLayers(){