monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit 0d0e9b36f68269c1cf5d1ceeffd1b2e43703eaa8 1 parent 17bc8c3c

浙江大屏网络拓扑组件（90%），数据中心组件（90%）

Inline Side-by-side
Showing 33 changed files with 715 additions and 0 deletions
@@ -18,3 +18,10 @@ @@ -18,3 +18,10 @@
18 @import "../css/businessVolume.css"; 18 @import "../css/businessVolume.css";
19 19
20 @import "../css/digitalboard.css"; 20 @import "../css/digitalboard.css";
  21 +
  22 +/*zj大屏*/
  23 +@import "../css/zjbigscreen.css";
  24 +
  25 +@import "../css/networktopology.css";
  26 +
  27 +@import "../css/datacenter.css";
  1 +.sjzx {
  2 + position: relative;
  3 + margin-top: 10px;
  4 + font-size: 0;
  5 + overflow: hidden
  6 +}
  7 +
  8 +.sjzx .item {
  9 + display: inline-block;
  10 + position: relative;
  11 + height: 120px;
  12 + margin-right: 120px;
  13 +}
  14 +
  15 +.sjzx .item h5 {
  16 + color: #fff;
  17 + font-size: .2rem;
  18 + text-align: center;
  19 + position:absolute;
  20 + bottom:0;
  21 + left:14px;
  22 +}
  23 +
  24 +.sjzx .item img {
  25 + display: block;
  26 + height: 118px;
  27 + cursor: pointer;
  28 +}
  29 +
  30 +.sjzx .item ul {
  31 + -webkit-transform: scale(.8);
  32 + -ms-transform: scale(.8);
  33 + transform: scale(.8);
  34 + -webkit-transform-origin: right top;
  35 + -ms-transform-origin: right top;
  36 + transform-origin: right top;
  37 + font-size: 16px;
  38 + position: absolute;
  39 + top:30px;
  40 + left: 60px;
  41 + color: #fff;
  42 + white-space: nowrap
  43 +}
  44 +.sjzx .item ul li{
  45 + line-height: 30px;
  46 + font-size:16px;
  47 + position: relative;
  48 + text-align: left;
  49 +}
  50 +.sjzx .item ul li [class^="icon"] {
  51 + width: 14px;
  52 + height: 14px;
  53 + position: absolute;
  54 + top: 6px;
  55 + background-repeat: no-repeat;
  56 + background-size: 100% 100%;
  57 +}
  58 +.sjzx .item ul li span{
  59 + margin-left:20px;
  60 +}
  61 +.sjzx .item ul li .icon-wd {
  62 + background-image: url('/vue3/src/assets/images/zjdp/icon-wd.png');
  63 +}
  64 +.sjzx .item ul li .icon-sd {
  65 + background-image: url("/vue3/src/assets/images/zjdp/icon-sd.png");
  66 +}
  67 +.sjzx .item ul li .icon-mj {
  68 + background-image: url("/vue3/src/assets/images/zjdp/icon-mj.png");
  69 +}
  1 +.network-container{
  2 + width: 100%;
  3 + height: 100%;
  4 + background-image: url("/vue3/src/assets/images/bg.jpg");
  5 + background-position: center;
  6 + text-align: left;
  7 + overflow: visible;
  8 +}
  9 +
  10 +#network-echart{
  11 + width: 100%;
  12 + height: 100%;
  13 + background-image: url("/vue3/src/assets/images/zjdp/img-bg2.png");
  14 + background-position: center;
  15 + background-repeat: no-repeat;
  16 +}
  1 +body{font-size: 15px;}
  2 +#zjdapingIndex{
  3 + background: url("/vue3/src/assets/images/zjdp/img-bg.png");
  4 + background-position: center;
  5 +}
  6 +.container-title{
  7 + color: white;
  8 + padding: 7px;
  9 + text-align: left;
  10 +}
  11 +/**提示展示动画 从左到右进入*/
  12 +@-webkit-keyframes fadeInLeft {
  13 + 0% {
  14 + opacity: 0;
  15 + -webkit-transform: translateX(-120px);
  16 + }
  17 + 100% {
  18 + opacity: 1;
  19 + -webkit-transform: translateX(0);
  20 + }
  21 +}
  22 +@keyframes fadeInLeft {
  23 + 0% {
  24 + opacity: 0;
  25 + transform: translateX(-120px);
  26 + }
  27 + 100% {
  28 + opacity: 1;
  29 + transform: translateX(0);
  30 + }
  31 +}
  32 +/*从左下到右上*/
  33 +@keyframes fadeInUpLeft
  34 +{
  35 + from {
  36 + opacity: 0;
  37 + -webkit-transform: translate(-30px,30px); /* Safari */
  38 + transform: stranslate(-10px,2010); /* 标准语法 */
  39 + }
  40 + to {
  41 + opacity:1;
  42 + -webkit-transform: translate(0,10px); /* Safari */
  43 + transform: stranslate(0,10px); /* 标准语法 */
  44 + }
  45 +}
  46 +@-webkit-keyframes fadeInUpLeft /* Safari 与 Chrome */
  47 +{
  48 + from {
  49 + opacity:0;
  50 + -webkit-transform: translate(-30px,30px); /* Safari */
  51 + transform: stranslate(-10px,10px); /* 标准语法 */
  52 + }
  53 + to {
  54 + opacity:1;
  55 + -webkit-transform: translate(0,10px); /* Safari */
  56 + transform: stranslate(0,10px); /* 标准语法 */
  57 + }
  58 +}
  59 +.icon-focus{
  60 + width: 14px;
  61 + height: 14px;
  62 + position: absolute;
  63 + top: 12px;
  64 + background-repeat: no-repeat;
  65 + background-size: 100% 100%;
  66 + background-image: url("/vue3/src/assets/images/zjdp/focus.png");
  67 + left: 12px;
  68 +}
  69 +/*调用animation属性，从而让按钮在载入页面时就具有动画效果 以-webkit为例，请为不同的浏览器添加前缀 */
  70 +.map_tips_0{
  71 + -webkit-animation-name: "fadeInUpLeft"; /*动画名称，需要跟@keyframes定义的名称一致*/
  72 + -webkit-animation-duration: 0.5s;/*动画持续的时间长*/
  73 + -webkit-animation-iteration-count: 1;/*动画循环播放的次数为1 infinite为无限次*/
  74 + -moz-animation-name: "fadeInUpLeft";
  75 + -moz-animation-duration: 0.5s;
  76 + -moz-animation-iteration-count: 1;
  77 + -ms-animation-name: "fadeInUpLeft";
  78 + -ms-animation-duration: 0.5s;
  79 + -ms-animation-iteration-count: 1;
  80 + -o-animation-name: "fadeInUpLeft";
  81 + -o-animation-duration: 0.5s;
  82 + -o-animation-iteration-count: 1;
  83 +}
  84 +.map_tips_city_0{
  85 + -webkit-animation-name: "fadeInLeft"; /*动画名称，需要跟@keyframes定义的名称一致*/
  86 + -webkit-animation-duration: 0.5s;/*动画持续的时间长*/
  87 + -webkit-animation-iteration-count: 1;/*动画循环播放的次数为1 infinite为无限次*/
  88 + -moz-animation-name: "fadeInLeft";
  89 + -moz-animation-duration: 0.5s;
  90 + -moz-animation-iteration-count: 1;
  91 + -ms-animation-name: "fadeInLeft";
  92 + -ms-animation-duration: 0.5s;
  93 + -ms-animation-iteration-count: 1;
  94 + -o-animation-name: "fadeInLeft";
  95 + -o-animation-duration: 0.5s;
  96 + -o-animation-iteration-count: 1;
  97 +}
  98 +.map_tips_city_1{
  99 + -webkit-animation:'fadeInLeft' 0.6s 1;
  100 + -moz-animation:'fadeInLeft' 0.6s 1;
  101 + -ms-animation:'fadeInLeft' 0.6s 1;
  102 + -o-animation:'fadeInLeft' 0.6s 1;
  103 +} /* 简写 */
  104 +.map_tips_city_2{
  105 + -webkit-animation:'fadeInLeft' 0.7s 1;
  106 + -moz-animation:'fadeInLeft' 0.7s 1;
  107 + -ms-animation:'fadeInLeft' 0.7s 1;
  108 + -o-animation:'fadeInLeft' 0.7s 1;
  109 +}
  110 +.map_tips{
  111 + position: absolute;
  112 + color: #fff;
  113 + width:auto;
  114 + height:auto;
  115 + z-index:999;
  116 + font-size: 16px;
  117 + background-repeat: no-repeat;
  118 + background-image: url(/vue3/src/assets/images/zjdp/tips_bg.png);
  119 + background-size: 100% 100%;
  120 + pointer-events: none;
  121 + display: none;
  122 +}
  123 +.map_tips_group{
  124 + margin: 0 12px 0 2px;
  125 + padding-left:20px;
  126 + border-bottom:1px solid #0C4493;
  127 + height:75px;
  128 +}
  129 +.map_tips_group div{
  130 + margin-top:5px;
  131 + white-space:nowrap;
  132 +}
  133 +.map_tips_group:last-child{
  134 + border-bottom: none !important;
  135 + margin-bottom:10px;
  136 +}
  137 +.map_tips_city{
  138 + padding-bottom:3px;
  139 + padding-left:30px;
  140 + margin:12px 6px 0 6px;
  141 + border-bottom:2px solid #0C4493;
  142 +}
This diff could not be displayed because it is too large.
@@ -99,6 +99,13 @@ const routes = [{ @@ -99,6 +99,13 @@ const routes = [{
99 path: '/daping', 99 path: '/daping',
100 name: 'daping', 100 name: 'daping',
101 component: () => myImport('views/dpimg/index') 101 component: () => myImport('views/dpimg/index')
  102 + },
  103 + {
  104 + path: '/zjdaping',
  105 + name: 'zjdaping',
  106 + component: () => myImport('views/zjdaping/index')
  107 + // component: () => myImport('views/zjdaping/components/networkTopology/index')
  108 + // component: () => myImport('views/zjdaping/components/dataCenter/index')
102 } 109 }
103 ]; 110 ];
104 111
  1 +<div class="container-title">资产概览</div>
  2 +<div class="left-bottom-left-bottom"></div>
  1 +<div class="container-title">云平台</div>
  2 +<div class="left-bottom-right-body"></div>
  1 +<div class="dataCenter-container" id="dataCenter">
  2 + <!-- 数据中心-->
  3 + <div class="container-title">
  4 + <img src="/vue3/src/assets/images/zjdp/title-datacenter.png" alt="">
  5 +
  6 + </div>
  7 + <div class="sjzx">
  8 + <div class="item sjzx_machineroom" v-for="item in jfdata">
  9 + <h5>{{item.machineRoomName}}</h5>
  10 + <img v-if="item.healthStatus==0" src="/vue3/src/assets/images/zjdp/jifang-1.png" alt="">
  11 + <img else="item.healthStatus==1" src="/vue3/src/assets/images/zjdp/jifang-2.png" alt="">
  12 + <ul class="float-container">
  13 + <li><i class='icon-wd'></i><span>温度：{{item.wd}}</span></li>
  14 + <li><i class='icon-sd'></i><span>湿度：{{item.sd}}</span></li>
  15 + <li><i class='icon-mj'></i><span>面积：{{item.area}}</span></li>
  16 + </ul>
  17 + </div>
  18 + </div>
  19 +</div>
  1 +export default {
  2 + name: 'dataCenter',
  3 + template: '',
  4 + components: {},
  5 + data(){
  6 + return {
  7 + domainName:'http://192.168.0.245:8180/api-web',
  8 + jfdata:''
  9 + }
  10 + },
  11 + setup(props, {attrs, slots, emit}) {
  12 + const {proxy} = Vue.getCurrentInstance();
  13 +
  14 + // 挂载完
  15 + Vue.onMounted(() => {
  16 + $.get(proxy.domainName +"/datavis/getMachineRoomInfoList",function (res) {
  17 + if(res.data){
  18 + proxy.jfdata=res.data;
  19 + /* const html = $("#sjzx_machineroom_id_Tmpl").render(res.data);
  20 + $("#sjzx_machineroom_id").html(html);
  21 + //机房点击事件
  22 + $(".sjzx_machineroom").on("click",function () {
  23 + const name = $(this).attr("name");
  24 + layer.open({
  25 + type:2
  26 + , shade: 0.6 //遮罩透明度
  27 + , maxmin: false //允许全屏最小化
  28 + , anim: 1 //0-6的动画形式，-1不开启
  29 + , content:['http://127.0.0.1:8081/video.html?type='+name+'','no']
  30 + , area:["1100px",'720px']
  31 + // , title: true //不显示标题栏
  32 + // , title: name
  33 + })
  34 + });*/
  35 + }
  36 + })
  37 + })
  38 +
  39 + return{
  40 + }
  41 + }
  42 +}
  43 +
  1 +<div class="network-container">
  2 +<!-- 省局网络拓扑-->
  3 + <div class="container-title network-title">
  4 + <img src="/vue3/src/assets/images/zjdp/title-network.png" alt="">
  5 + </div>
  6 + <div id="network-echart"></div>
  7 +</div>
  1 +export default {
  2 + name: 'networkTopology',
  3 + // props:['divIdName','geoCoordMap','domainName','mapJsonUrl','cityUrl'],
  4 + template: '',
  5 + components: {
  6 + },
  7 + data() {
  8 + return {
  9 + divIdName:'#network-echart',
  10 + domainName:'http://192.168.0.245:8180/api-web',
  11 + mapJsonUrl:'public/data/zhejiang.json',
  12 + cityUrl:'/datavis/getEchartsMap',
  13 + // 标记各地市的坐标
  14 + geoCoordMap:{
  15 + "省局": [119.453576,30.005871],
  16 + "杭州市": [120.153576,30.287459],
  17 + "宁波": [121.549792,29.868388],
  18 + "温州市": [120.672111,28.000575],
  19 + "嘉兴市": [120.750865,30.762653],
  20 + "湖州市": [120.102398,30.867198],
  21 + "绍兴市": [120.582112,29.997117],
  22 + "金华市": [119.649506,29.089524],
  23 + "衢州市": [118.87263,28.941708],
  24 + "舟山市": [122.106863,30.016028],
  25 + "台州市": [121.428599,28.661378],
  26 + "丽水市": [ 119.921786,28.451993]
  27 + }
  28 +
  29 + }
  30 + },
  31 + setup(props, {attrs, slots, emit}) {
  32 + const {proxy} = Vue.getCurrentInstance();
  33 +
  34 + // 输出json对象数组,value里包含坐标值和随机值
  35 + let convertData = (data) =>{
  36 + let res = [];
  37 + $.each(data,function (i,v) {
  38 + let geoCoord = proxy.geoCoordMap[v.name];
  39 + res.push({
  40 + name: v.name,
  41 + value: geoCoord.concat(v.value)
  42 + })
  43 + });
  44 + return res
  45 + }
  46 + // 设置目标点, 配置线条指向
  47 + let convertToLineData = (data) => {
  48 + let res = [];
  49 + $.each(data,function (i,v) {
  50 + // 起点
  51 + let fromCoord = proxy.geoCoordMap[v.name];
  52 + // 终点,这里设置的省局
  53 + let toCoord = [119.453576,30.005871];
  54 + res.push([{ coord: fromCoord, value: v.value },{ coord: toCoord }]);
  55 + });
  56 + return res
  57 + }
  58 +
  59 + // 挂载完
  60 + Vue.onMounted(() => {
  61 + let colors = ["#00eaff","#1e9fff","#FF7E00","#D81E06"];
  62 + // 解析地图数据包
  63 + $.getJSON(proxy.mapJsonUrl, function(geoJson) {
  64 + // 注册地图,传入数据
  65 + echarts.registerMap('echarts', geoJson);
  66 + //获取浙江各地市链路信息
  67 + $.get(proxy.domainName +proxy.cityUrl,function(res){
  68 + if(res.data && res.data.length > 0){
  69 + const mapData = res.data;
  70 + const obj = res.object;
  71 + const optionMap = {
  72 + timeline: {
  73 + show: false
  74 + },
  75 + baseOption: {
  76 + // 设置地图参数和样式
  77 + geo: {
  78 + show: true,
  79 + map: 'echarts',
  80 + roam: true,
  81 + zoom: 1.25,
  82 + // 地图中心点的坐标, 可调节显示的偏移量
  83 + center: [120.453576,29.197459],
  84 + label: {
  85 + // 高亮文字隐藏
  86 + emphasis: {
  87 + show: false
  88 + }
  89 + },
  90 + itemStyle: {
  91 + normal: {
  92 + borderColor: '#42adff',
  93 + borderWidth: 2,
  94 + areaColor: 'rgba(0,0,0,0)',
  95 + shadowColor: '#294167',
  96 + shadowOffsetX: -2,
  97 + shadowOffsetY: 2,
  98 + shadowBlur: 25
  99 + },
  100 + emphasis: {
  101 + // 鼠标悬浮高亮
  102 + areaColor: '#0D114B',
  103 + borderWidth: 1,
  104 + shadowColor: '#294167',
  105 + borderColor: '#42adff'
  106 + }
  107 + }
  108 + }
  109 +
  110 + },
  111 + options: [{
  112 + xAxis: {
  113 + show: false
  114 + },
  115 + yAxis: {
  116 + show: false
  117 + },
  118 + tooltip: {
  119 + show:false
  120 + },
  121 + series: [{
  122 + // 坐标点参数和样式
  123 + type: 'effectScatter',
  124 + coordinateSystem: 'geo',
  125 + data: proxy.convertData(mapData),
  126 + symbolSize: 10,
  127 + showEffectOn: 'render',
  128 + rippleEffect: { //涟漪特效
  129 + period: 4, //动画时间，值越小速度越快
  130 + brushType: 'stroke', //波纹绘制方式 stroke, fill
  131 + scale: 4 //波纹圆环最大限制，值越大波纹越大
  132 + },
  133 + label: {
  134 + normal: {
  135 + formatter: '{b}',
  136 + position: 'right',
  137 + show: true,
  138 + color:'#fff',
  139 + fontSize:16
  140 + }
  141 + },
  142 + itemStyle: {
  143 + normal: {
  144 + //点的颜色
  145 + color: function (data) {
  146 + return colors[data.value[2]];
  147 + },
  148 + shadowBlur: 2,
  149 + shadowColor: '#03BED9',
  150 + symbolSize: 5
  151 + }
  152 + }
  153 + },
  154 + {
  155 + // 线条参数和样式
  156 + type: 'lines',
  157 + // 变化频率
  158 + zlevel: 2,
  159 + effect: {
  160 + show: true,
  161 + // 箭头指向速度，值越小速度越快
  162 + period: 4,
  163 + // 特效尾迹长度,取值0到1,值越大,尾迹越长
  164 + trailLength: 0.03,
  165 + symbol: 'arrow',
  166 + // 图标大小
  167 + symbolSize: 6
  168 + },
  169 + lineStyle: {
  170 + normal: {
  171 + //线条颜色
  172 + color: function (data) {
  173 + // return colors[0];//线条跟着点的颜色一致
  174 + if(data.value == 0){
  175 + return '#00eaff';
  176 + }else{
  177 + return '#D81E06';
  178 + }
  179 +
  180 + },
  181 + // 尾迹线条宽度
  182 + width: 1,
  183 + // 尾迹线条透明度
  184 + opacity: 1,
  185 + // 尾迹线条曲直度
  186 + curveness: 0.3
  187 + }
  188 + },
  189 + data: proxy.convertToLineData(mapData)
  190 + },
  191 + {//被攻击点
  192 + // type: 'scatter',
  193 + type:'effectScatter',
  194 + hoverAnimation:true,//鼠标移入是否显示动画
  195 + coordinateSystem: 'geo',
  196 + zlevel: 3,
  197 + rippleEffect: {
  198 + number:3,
  199 + period: 4,
  200 + brushType: 'fill',
  201 + scale: 2
  202 + },
  203 + symbol: 'circle',
  204 + symbolSize: 30,
  205 + itemStyle:{
  206 + color:'#EE4237',
  207 + },
  208 + label: {
  209 + normal: {
  210 + show: false,
  211 + position: 'left',
  212 + formatter: '省局',
  213 + textStyle: {
  214 + color: "#0f0"
  215 + },
  216 + fontSize:16
  217 + },
  218 + emphasis: {
  219 + show: false,
  220 + color: "#0f0"//鼠标移入字体颜色
  221 + }
  222 + },
  223 + data: [{
  224 + name: '省局',
  225 + value: proxy.geoCoordMap['省局'].concat([10])
  226 + }]
  227 + }]
  228 + }]
  229 + };
  230 +
  231 + // let map_chart = echarts.init(document.getElementById('network-echart'));
  232 + let map_chart=echarts.init($(proxy.divIdName)[0])
  233 + map_chart.setOption(optionMap);
  234 + map_chart.on('mouseout', 'geo', function (params) {
  235 + $('.map_tips').hide();
  236 + });
  237 + //当鼠标移入当前区域显示提示信息
  238 + map_chart.on('mouseover', 'geo',function (params) {
  239 + let name = params.name;
  240 + //先删除原来的
  241 + $(proxy.divIdName).find('.map_tips').remove();
  242 + //当前城市提示信息
  243 + let currentCity = obj[name];
  244 + if(currentCity && currentCity.length > 0){
  245 + let cityInfos = '';
  246 + $.each(currentCity,function (i,v) {
  247 + cityInfos += '<div class="map_tips_group">' +
  248 + ' <div class="map_tips_res" style="margin-left: -8px;">'+v.resName+'</div>' +
  249 + ' <div class="map_tips_sxll">上行流量：'+v.sxll+'</div>' +
  250 + ' <div class="map_tips_xxll">下行流量：'+v.xxll+'</div>' +
  251 + ' </div>';
  252 + });
  253 +
  254 + //地图区域悬浮提示
  255 + let cityTips =
  256 + '<div class="map_tips">' +
  257 + ' <div class="map_tips_city"><i class="icon-focus"></i><span>'+name+'</span></div>'
  258 + + cityInfos +
  259 + '</div>';
  260 + //提示框拼接在echar区域
  261 + $(cityTips).appendTo($(proxy.divIdName));
  262 +
  263 + if ($('.map_tips').is(':hidden')) {
  264 + $('.map_tips').show();
  265 + }
  266 + //城市名称从左到右滑入效果
  267 + $('.map_tips_res').addClass("map_tips_city_0");
  268 + $('.map_tips_sxll').addClass("map_tips_city_1");
  269 + $('.map_tips_xxll').addClass("map_tips_city_2");
  270 +
  271 + //根据鼠标位置定位
  272 + let layerX = params.event.offsetX;
  273 + let layerY = params.event.offsetY;
  274 + //随鼠标移动
  275 + if(name == '湖州市' || name == '嘉兴市'){
  276 + $('.map_tips').css({
  277 + 'top': layerY + 10,
  278 + 'left': layerX + 15
  279 + });
  280 + }else{
  281 + $('.map_tips').css({
  282 + 'top': layerY -120,
  283 + 'left': layerX + 15
  284 + });
  285 + }
  286 + }else{
  287 + $('.map_tips').hide();
  288 + }
  289 + });
  290 + //鼠标移动，提示信息随鼠标走
  291 + map_chart.on('mousemove', 'geo', function (params) {
  292 + let name = params.name;
  293 + //随鼠标移动
  294 + let layerX = params.event.offsetX;
  295 + let layerY = params.event.offsetY;
  296 + //随鼠标移动
  297 + if(name == '湖州市' || name == '嘉兴市'){
  298 + $('.map_tips').css({
  299 + 'top': layerY + 10,
  300 + 'left': layerX + 15
  301 + });
  302 + }else{
  303 + $('.map_tips').css({
  304 + 'top': layerY -120,
  305 + 'left': layerX + 15
  306 + });
  307 + }
  308 + });
  309 + }
  310 + });
  311 + });
  312 + })
  313 +
  314 + return {
  315 + convertData,
  316 + convertToLineData
  317 + }
  318 + }
  319 +}
  1 +<div id="zjdapingIndex">
  2 + <header class="screen-header" :style="screenheaderStyle">
  3 + <div>
  4 + <img style="width: 100%" src="/vue3/src/assets/images/zjdp/img-top-bg2.png" alt="">
  5 + </div>
  6 +
  7 + <div class="title-left">
  8 + <img src="/vue3/src/assets/img/time-icon.png" :style="timelogoStyle" class="timelog">
  9 + <span :style="datetimeStyle" >{{dateTime}}</span>
  10 + </div>
  11 + </header>
  12 + <div class="screen-body">
  13 + <section class="screen-left" >
  14 + <div class="left-top">
  15 +<!-- 省局网络拓扑-->
  16 +<!-- <NetworkTopology :></NetworkTopology>-->
  17 + </div>
  18 + <div class="left-bottom">
  19 + <div class="left-bottom-left">
  20 + <div class="left-bottom-left-top">
  21 +<!-- 数据中心-->
  22 + <DataCenter></DataCenter>
  23 +
  24 + </div>
  25 + <div class="left-bottom-left-bottom">
  26 + 资产概览
  27 +
  28 + </div>
  29 + </div>
  30 + <div class="left-bottom-right">
  31 + 云平台
  32 +
  33 + </div>
  34 + </div>
  35 + </section>
  36 + <section class="screen-right" >
  37 +
  38 +
  39 + </section>
  40 + </div>
  41 +</div>
  1 +export default {
  2 + name: 'zjdaping',
  3 + template: '',
  4 + components: {
  5 + 'NetworkTopology': Vue.defineAsyncComponent(
  6 + () => myImport('views/zjdaping/components/networkTopology/index')
  7 + ),
  8 + 'DataCenter': Vue.defineAsyncComponent(
  9 + () => myImport('views/zjdaping/components/dataCenter/index')
  10 + )
  11 + },
  12 + data() {
  13 + return {
  14 + titleFontSize: 30,
  15 + dateTime: '00-00-00 00:00:00',
  16 +
  17 + }
  18 + },
  19 + setup() {
  20 + const {proxy} = Vue.getCurrentInstance();
  21 +
  22 + let datetimeStyle=()=>{// 左上角日期时间大小
  23 + fontSize: this.titleFontSize / 3 + 'px';
  24 + marginLeft: this.titleFontSize / 5 + 'px'
  25 + }
  26 +
  27 + // 挂载完
  28 + Vue.onMounted(() => {
  29 + let that = this
  30 + // 获取当前系统时间
  31 + let myDate = new Date();
  32 + that.dateTime = myDate.getFullYear() + '-' + that.timeFormat(myDate.getMonth() + 1 + '') + '-' + that.timeFormat(myDate.getDate() + '') // + ' ' + that.timeFormat(myDate.getHours() + '') + ':' + that.timeFormat(myDate.getMinutes() + '') + ':' + that.timeFormat(myDate.getSeconds() + '');
  33 +
  34 + })
  35 +
  36 +
  37 + return {
  38 + datetimeStyle
  39 + }
  40 + }
  41 +}