Skip to content

M
monthReport_smzx
提交 b3cd3a82 authored 作者: 邓文彬's avatar 邓文彬
浏览文件
操作

fix(图表)： 图表完成

上级 ac0f8ade
隐藏空白字符变更
内嵌 并排
正在显示 包含 96 行增加 和 52 行删除
pages/monthReport/components/rightBar.vue
浏览文件 @ b3cd3a82
<template>
<view class="echartsBar" id="echartsBar"></view>
<view>
<view class="echartsBar" id="echartsBar"></view>
</view>
</template>
<script>
export default {
data() {
return {};
},
};
</script>
<script module="echarts" lang="renderjs">
import * as echarts from "echarts";
export default {
props: {},
......@@ -90,7 +99,7 @@ export default {
<style lang="scss" scoped>
.echartsBar {
height: 100%;
height: 200px;
width: 100%;
}
</style>
pages/monthReport/components/rightLine.vue
浏览文件 @ b3cd3a82
<template>
<view class="echartsBar" id="echartsLine"></view>
<view>
<view canvas-id="myChart" id="myChart" class="echartsBar"></view>
</view>
</template>
<script>
export default {
data() {
return {
};
},
};
</script>
<script module="echarts" lang="renderjs">
import * as echarts from "echarts";
export default {
props: {},
data() {
return {
lists: [
......@@ -103,29 +114,34 @@ export default {
};
},
},
async mounted() {
this.$nextTick(() => {
this.init();
});
mounted() {
// 初始化图表
this.initChart();
},
methods: {
init() {
const DOM = document.getElementById("echartsLine");
const myChart = echarts.init(DOM);
myChart.setOption(this.option);
window.addEventListener("resize", () => {
myChart.clear();
myChart.setOption(this.option);
myChart && myChart.resize();
});
},
},
};
initChart() {
// 确保ECharts已经加载
if (typeof echarts === 'undefined') {
// 可以在这里动态加载ECharts库
return;
}
// 基于准备好的dom，初始化echarts实例
const chart = echarts.init(document.getElementById('myChart'));
// 使用刚指定的配置项和数据显示图表。
chart.setOption(this.option);
}
}
}
</script>
<style lang="scss" scoped>
.echartsBar {
height: 100%;
height: 200px;
width: 100%;
}
</style>
pages/monthReport/components/rightPie.vue
浏览文件 @ b3cd3a82
<template>
<view id="lineTendencyChart"></view>
<view>
<view id="lineTendencyChart"></view>
</view>
</template>
<script>
export default {
data() {
return {};
},
async mounted() {
}
};
</script>
<script module="echarts" lang="renderjs">
import * as echarts from "echarts";
export default {
props: {
......
pages/monthReport/index.vue
浏览文件 @ b3cd3a82
<template>
<view class="padding_all_16 page_box">
<!-- 态势分析研判报告 -->
<view class="margin_t_16 padding_16_24 background_white">
<!-- 态势分析研判报告 -->
<view class="margin_t_16 padding_16_24 background_white">
<common-top-title
titletext="态势分析研判报告"
:isTitleNormal="false"
></common-top-title>
<view class="rightOne">
<rightPie class="margin_t_16 rightPie" :value="80" />
<rightPie class="margin_t_16 rightPie" :value="70" />
<rightItem class="rightItem" />
</view>
</view>
<!-- 本月场景告警图 -->
<view class="margin_t_16 padding_16_24 background_white rightHeight">
<common-top-title
......@@ -37,15 +36,13 @@
/>
</view>
<view class="monthReport">
<view class="margin_t_16 padding_16_24 background_white">
<common-top-title
titletext="本月资产监管数据"
:isTitleNormal="false"
></common-top-title>
<view :gutter="8" class="margin_t_16 flex-row ">
<view :gutter="8" class="margin_t_16 flex-row">
<view :span="18" class="first-part el-col-18">
<common-top-title
titletext="终端"
......@@ -79,13 +76,13 @@
</view>
</view>
</view>
<view :gutter="8" class="margin_t_16 flex-row ">
<view :gutter="8" class="margin_t_16 flex-row">
<view :span="12" class="el-col-12">
<common-top-title
titletext="机房"
:isTitleNormal="true"
></common-top-title>
<view :gutter="8" class="margin_t_16 flex-row ">
<view :gutter="8" class="margin_t_16 flex-row">
<view
v-for="item in computerData"
:key="item.label"
......@@ -110,13 +107,12 @@
titletext="数据中心"
:isTitleNormal="true"
></common-top-title>
<view :gutter="8" class="margin_t_16 flex-row ">
<view :gutter="8" class="margin_t_16 flex-row">
<view
v-for="item in dataCenter"
:key="item.label"
:span="item.span"
class="flex-average flex-row-gutter-8"
>
<view v-if="item.type == 'tem4'" class="baseFlex">
<template v-for="child in item.children">
......@@ -132,15 +128,25 @@
</view>
</view>
</view>
<view class="margin_t_16">
<view class="margin_t_16">
<view>
<common-top-title
titletext="网络"
:isTitleNormal="true"
></common-top-title>
<view :gutter="8" class="margin_t_16 flex-row">
<view v-for="item in netData" :key="item.label" :class="`el-col-${item.span} ${item.type == 'tem3'? 'flex-row-gutter-8': ''}`">
<view :gutter="8" v-if="item.type == 'tem2'" class="baseFlex flex-row ">
<view
v-for="item in netData"
:key="item.label"
:class="`el-col-${item.span} ${
item.type == 'tem3' ? 'flex-row-gutter-8' : ''
}`"
>
<view
:gutter="8"
v-if="item.type == 'tem2'"
class="baseFlex flex-row"
>
<view
v-for="child in item.children"
:key="child.label"
......@@ -151,7 +157,6 @@
</view>
<tem3
v-else-if="item.type == 'tem3'"
:item="item"
style="height: 76px"
/>
......@@ -165,14 +170,12 @@
titletext="用户"
:isTitleNormal="true"
></common-top-title>
<view :gutter="8" class="margin_t_16 flex-row">
<view :gutter="8" class="margin_t_16 flex-row">
<view
v-for="item in userData"
:key="item.label"
:span="item.span"
class="el-col-6 flex-row-gutter-8"
>
<tem3 :item="item" style="height: 76px" />
</view>
......@@ -192,7 +195,11 @@
:isTitleNormal="true"
></common-top-title>
<view :gutter="8" class="margin_t_16 flex-row">
<view v-for="item in ywData" :key="item.label" class="el-col-8 flex-row-gutter-8">
<view
v-for="item in ywData"
:key="item.label"
class="el-col-8 flex-row-gutter-8"
>
<tem3 :item="item" style="height: 78px" />
</view>
</view>
......@@ -203,7 +210,11 @@
:isTitleNormal="true"
></common-top-title>
<view :gutter="8" class="margin_t_16 flex-row">
<view v-for="item in fbData" :key="item.label" class="el-col-8 flex-row-gutter-8">
<view
v-for="item in fbData"
:key="item.label"
class="el-col-8 flex-row-gutter-8"
>
<tem3 :item="item" style="height: 78px" />
</view>
</view>
......@@ -211,9 +222,6 @@
</view>
</view>
</view>
</view>
</template>
......@@ -270,7 +278,6 @@ export default {
<style lang="scss">
.page_box {
background: #f2f2f2;
.monthReport {
.rightOne {
display: flex;
justify-content: space-between;
......@@ -282,12 +289,14 @@ export default {
.rightItem {
width: calc(100% - 230px - 16px);
height: auto;
}
}
.rightHeight {
height: calc((100% - 300px - 32px) / 2);
}
}
.baseFlex {
display: flex;
flex-wrap: wrap;
......@@ -321,16 +330,14 @@ export default {
width: 75%;
}
.el-col-12 {
width: 50%;
}
.el-col-8 {
width: 33.33333%;
}
.el-col-6 {
}
.el-col-6 {
width: 25%;
}
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论