大屏组件做一下切割
This commit is contained in:
@@ -12,13 +12,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import AppGigscreenViewer from "../../viewer/AppGigscreenViewer";
|
|
||||||
import AiDvWrapper from "../../../../components/layout/AiDvWrapper/AiDvWrapper";
|
|
||||||
import AiDvBackground from "../../../../components/layout/AiDvBackground";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "preview",
|
name: "preview",
|
||||||
components: {AiDvBackground, AiDvWrapper, AppGigscreenViewer},
|
|
||||||
props: {
|
props: {
|
||||||
instance: Function,
|
instance: Function,
|
||||||
dict: Object,
|
dict: Object,
|
||||||
|
|||||||
@@ -23,10 +23,8 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
import AiDvRender from "../../../components/AiDvRender";
|
|
||||||
export default {
|
export default {
|
||||||
name: 'AppGigscreenViewer',
|
name: 'AppGigscreenViewer',
|
||||||
components: {AiDvRender},
|
|
||||||
label: '大屏预览',
|
label: '大屏预览',
|
||||||
props: {
|
props: {
|
||||||
instance: Function,
|
instance: Function,
|
||||||
|
|||||||
@@ -72,11 +72,9 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {mapState} from "vuex";
|
import {mapState} from "vuex";
|
||||||
import AiAddressBookMenu from "../../../components/AiAddressBookMenu";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "AppAccount",
|
name: "AppAccount",
|
||||||
components: {AiAddressBookMenu},
|
|
||||||
label: "账号管理(村微版)",
|
label: "账号管理(村微版)",
|
||||||
props: {
|
props: {
|
||||||
instance: Function,
|
instance: Function,
|
||||||
|
|||||||
@@ -33,11 +33,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
import AiEditBtn from "../../../components/AiEditBtn";
|
|
||||||
export default {
|
export default {
|
||||||
name: "introPage",
|
name: "introPage",
|
||||||
components: {AiEditBtn},
|
|
||||||
props: {
|
props: {
|
||||||
instance: Function,
|
instance: Function,
|
||||||
dict: {default: () => ({})}
|
dict: {default: () => ({})}
|
||||||
|
|||||||
@@ -57,7 +57,7 @@
|
|||||||
<ai-echart
|
<ai-echart
|
||||||
style="height: 100%; width: 100%;"
|
style="height: 100%; width: 100%;"
|
||||||
:data="eventInfo"
|
:data="eventInfo"
|
||||||
:ops="pieChart">
|
:ops="pieChart2">
|
||||||
</ai-echart>
|
</ai-echart>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -89,16 +89,13 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import pieChart from '../../../components/AiEchart/template/pie/pieChart2'
|
import {barChart1, pieChart2} from "./components/chartOps"
|
||||||
import barChart1 from '../../../components/AiEchart/template/bar/barChart1'
|
|
||||||
import {VueOkrTree} from 'vue-okr-tree'
|
import {VueOkrTree} from 'vue-okr-tree'
|
||||||
import 'vue-okr-tree/dist/vue-okr-tree.css'
|
import 'vue-okr-tree/dist/vue-okr-tree.css'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'AppGridDV',
|
name: 'AppGridDV',
|
||||||
|
|
||||||
label: '网格数据大屏',
|
label: '网格数据大屏',
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
instance: Function,
|
instance: Function,
|
||||||
dict: Object,
|
dict: Object,
|
||||||
@@ -115,7 +112,7 @@ export default {
|
|||||||
barChart1,
|
barChart1,
|
||||||
userInfo: [],
|
userInfo: [],
|
||||||
eventInfo: [],
|
eventInfo: [],
|
||||||
pieChart,
|
pieChart2,
|
||||||
total: 0,
|
total: 0,
|
||||||
isShowInfo: false,
|
isShowInfo: false,
|
||||||
defaultProps: {
|
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