大屏组件做一下切割
This commit is contained in:
@@ -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,
|
||||
|
||||
@@ -23,10 +23,8 @@
|
||||
|
||||
<script>
|
||||
|
||||
import AiDvRender from "../../../components/AiDvRender";
|
||||
export default {
|
||||
name: 'AppGigscreenViewer',
|
||||
components: {AiDvRender},
|
||||
label: '大屏预览',
|
||||
props: {
|
||||
instance: Function,
|
||||
|
||||
@@ -72,11 +72,9 @@
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
import AiAddressBookMenu from "../../../components/AiAddressBookMenu";
|
||||
|
||||
export default {
|
||||
name: "AppAccount",
|
||||
components: {AiAddressBookMenu},
|
||||
label: "账号管理(村微版)",
|
||||
props: {
|
||||
instance: Function,
|
||||
|
||||
@@ -33,11 +33,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import AiEditBtn from "../../../components/AiEditBtn";
|
||||
export default {
|
||||
name: "introPage",
|
||||
components: {AiEditBtn},
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: {default: () => ({})}
|
||||
|
||||
@@ -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: {
|
||||
|
||||
187
project/dv/apps/components/chartOps.js
Normal file
187
project/dv/apps/components/chartOps.js
Normal 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: {}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user