大屏组件做一下切割

This commit is contained in:
aixianling
2022-08-19 13:54:37 +08:00
parent 89b39916d7
commit c04bcbf90e
6 changed files with 190 additions and 18 deletions

View File

@@ -12,13 +12,8 @@
</template>
<script>
import AppGigscreenViewer from "../../viewer/AppGigscreenViewer";
import AiDvWrapper from "../../../../components/layout/AiDvWrapper/AiDvWrapper";
import AiDvBackground from "../../../../components/layout/AiDvBackground";
export default {
name: "preview",
components: {AiDvBackground, AiDvWrapper, AppGigscreenViewer},
props: {
instance: Function,
dict: Object,

View File

@@ -23,10 +23,8 @@
<script>
import AiDvRender from "../../../components/AiDvRender";
export default {
name: 'AppGigscreenViewer',
components: {AiDvRender},
label: '大屏预览',
props: {
instance: Function,

View File

@@ -72,11 +72,9 @@
<script>
import {mapState} from "vuex";
import AiAddressBookMenu from "../../../components/AiAddressBookMenu";
export default {
name: "AppAccount",
components: {AiAddressBookMenu},
label: "账号管理(村微版)",
props: {
instance: Function,

View File

@@ -33,11 +33,8 @@
</template>
<script>
import AiEditBtn from "../../../components/AiEditBtn";
export default {
name: "introPage",
components: {AiEditBtn},
props: {
instance: Function,
dict: {default: () => ({})}

View File

@@ -57,7 +57,7 @@
<ai-echart
style="height: 100%; width: 100%;"
:data="eventInfo"
:ops="pieChart">
:ops="pieChart2">
</ai-echart>
</div>
</div>
@@ -89,16 +89,13 @@
</template>
<script>
import pieChart from '../../../components/AiEchart/template/pie/pieChart2'
import barChart1 from '../../../components/AiEchart/template/bar/barChart1'
import {barChart1, pieChart2} from "./components/chartOps"
import {VueOkrTree} from 'vue-okr-tree'
import 'vue-okr-tree/dist/vue-okr-tree.css'
export default {
name: 'AppGridDV',
label: '网格数据大屏',
props: {
instance: Function,
dict: Object,
@@ -115,7 +112,7 @@ export default {
barChart1,
userInfo: [],
eventInfo: [],
pieChart,
pieChart2,
total: 0,
isShowInfo: false,
defaultProps: {

View File

@@ -0,0 +1,187 @@
export const pieChart2 = {
legend: {
bottom: 0,
itemGap: 14,
itemWidth: 16,
itemHeight: 5,
textStyle: {color: "#fff", fontSize: 14}
},
grid: {
height: 260
},
xAxis: {show: false},
yAxis: {show: false},
tooltip: {
backgroundColor: "rgba(14, 51, 111, 0.9)",
borderColor: "#1A6ABC",
textStyle: {color: "#fff"}
},
series: {
type: "pie",
minShowLabelAngle: 10,
radius: [70, 81],
itemStyle: {
borderColor: "#fff",
borderWidth: 2
},
label: {
color: "#A8D7F3",
fontSize: 14,
formatter: "{name|{b}}\n{v|{d}%}",
minMargin: 5,
edgeDistance: 10,
lineHeight: 22,
rich: {
v: {
color: "#fff"
}
}
},
labelLine: {},
labelLayout: function (params) {
let points = params.labelLinePoints,
isLeft = points[2][0] < points[1][0]
points[2][0] =
points[2][0] + (params.labelRect.width + 4) * (isLeft ? -1 : 1)
return {
labelLinePoints: points
}
}
},
render: (h, params) => {
const formatNum = num => {
if (num >= 10000000) {
return num / 10000000 + "千万"
}
if (num >= 10000) {
return num / 10000 + "万"
}
return parseFloat(num.toFixed(2))
}
let total = params.data.reduce((t, e) => {
return t + Number(Object.values(e)?.[1] || 0)
}, 0)
return h(
"div",
{
style: {
height: "162px",
width: "162px",
color: "#8BCCFF",
left: "50%",
top: "50%",
display: "flex",
alignItems: "center",
justifyContent: "center",
flexDirection: "column",
position: "absolute",
transform: "translate(-50%,-50%)",
backgroundImage: `url('https://cdn.cunwuyun.cn/dvcp/dv/tpl/pie2Circle.png')`,
backgroundPosition: "center"
}
},
[
h(
"span",
{style: {fontSize: "28px", color: "#fff", fontFamily: "DIN"}},
formatNum(total)
),
h("span", null, "总量")
]
)
}
}
export const barChart1 = {
legend: {
right: 0,
itemHeight: 5,
itemWidth: 16,
textStyle: { color: '#fff' }
},
yAxis: {
nameGap: 23,
minInterval: 1,
splitLine: { lineStyle: { color: 'rgba(255,255,255,.2)', type: 'dashed' } },
axisLabel: { color: '#fff' },
axisPointer: { show: false }
},
axisPointer: {
type: 'shadow',
triggerTooltip: false,
shadowStyle: { color: 'rgba(46, 153, 255, .2)' }
},
color: [
{
type: 'linear',
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(66, 187, 255, 1)' },
{ offset: 1, color: 'rgba(37, 143, 255, 0.2)' }
]
},
{
type: 'linear',
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(66, 255, 254, 1)' },
{ offset: 1, color: 'rgba(37, 255, 246, 0.2)' }
]
},
{
type: 'linear',
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(97, 253, 185, 1)' },
{ offset: 1, color: 'rgba(97, 253, 185, 0.2)' }
]
},
{
type: 'linear',
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(253, 108, 57, 1)' },
{ offset: 1, color: 'rgba(253, 108, 57, 0.2)' }
]
},
{
type: 'linear',
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(248, 187, 25, 1)' },
{ offset: 1, color: 'rgba(55, 39, 5, 1)' }
]
}
],
daemon: {
type: 'bar',
label: {
show: true,
position: 'top',
color: '#fff',
formatter: e => {
return e.data[e.seriesName] || ''
}
},
barWidth: 16,
barCategoryGap: 40,
itemStyle: {}
}
}