单独构建大屏ui库,避免引入混乱
This commit is contained in:
aixianling
248
ui/dv/AiAddressBookMenu.vue
Normal file
248
ui/dv/AiAddressBookMenu.vue
Normal file
@@ -0,0 +1,248 @@
|
||||
<template>
|
||||
<section class="AiAddressBookMenu">
|
||||
<div class="tabsPane">
|
||||
<h2 v-for="tab in tabs" :key="tab.name" :class="{tabActive:current==tab.name}"
|
||||
@click="handleTabClick(tab)">{{ tab.label }}</h2>
|
||||
</div>
|
||||
<div class="contentPane">
|
||||
<el-input :placeholder="`请输入${currentTab.label}名称`"
|
||||
size="small" v-model="search" suffix-icon="iconfont iconSearch"
|
||||
@change="handleSearchChange"/>
|
||||
<div v-if="isTagType" class="addressBook-left__tags">
|
||||
<div @click="selected=item" v-for="(item, index) in tags" :key="index"
|
||||
class="addressBook-left__tags--item"
|
||||
:class="{'addressBook-left__tags--item-active':selected.id == item.id}">
|
||||
<span>{{ item.tagname }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="AiAddressBookMenu-wrapper" v-else>
|
||||
<div class="AiAddressBookMenu-tree">
|
||||
<el-tree
|
||||
ref="tree"
|
||||
node-key="id"
|
||||
highlight-current
|
||||
:filter-node-method="handleTreeFilter"
|
||||
:props="defaultProps" :data="list"
|
||||
:default-expanded-keys="treeRoot"
|
||||
@current-change="v=>selected=v">
|
||||
<div class="tree-container" slot-scope="{ data }">
|
||||
<span>{{ data.name }}</span>
|
||||
</div>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 通讯录选择器
|
||||
*/
|
||||
export default {
|
||||
name: "AiAddressBookMenu",
|
||||
props: {
|
||||
instance: Function,
|
||||
},
|
||||
computed: {
|
||||
tabs() {
|
||||
return [
|
||||
{label: "组织架构", name: 0},
|
||||
{label: "标签", name: 1}
|
||||
]
|
||||
},
|
||||
currentTab() {
|
||||
return this.tabs.find(e => e.name == this.current) || {}
|
||||
},
|
||||
isTagType() {
|
||||
return this.current == 1
|
||||
},
|
||||
defaultProps() {
|
||||
return {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
}
|
||||
},
|
||||
tags() {
|
||||
return this.list?.filter(e => !this.search || e.tagname?.indexOf(this.search) > -1)
|
||||
},
|
||||
treeRoot() {
|
||||
let root = this.list?.[0]
|
||||
return root ? [root?.id] : []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
current: 0,
|
||||
search: "",
|
||||
list: [],
|
||||
origin: [],
|
||||
selected: {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selected(v) {
|
||||
v && this.$emit('select', {...v, type: this.current})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleTabClick(tab) {
|
||||
this.current = tab.name
|
||||
this.isTagType ? this.getTags() : this.getUnits()
|
||||
this.$emit('tabClick')
|
||||
},
|
||||
handleTreeFilter(v, data) {
|
||||
return data?.name?.indexOf(v) > -1
|
||||
},
|
||||
handleSearchChange(v) {
|
||||
if (this.isTagType) {
|
||||
} else {
|
||||
this.$refs.tree?.filter(v)
|
||||
}
|
||||
},
|
||||
handleTagClick(tag) {
|
||||
this.$emit('tag', tag)
|
||||
this.selected = tag
|
||||
},
|
||||
getUnits() {
|
||||
this.instance.post(`/app/wxcp/wxdepartment/listAll`).then(res => {
|
||||
if (res?.data) {
|
||||
this.list = res.data?.filter(e => !e.parentid)
|
||||
this.list.map(p => this.addChild(p, res.data, {parent: 'parentid'}))
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs.tree.setCurrentKey(res.data[0].id)
|
||||
this.$emit('select', res.data[0])
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getTags() {
|
||||
this.instance.post(`/app/wxcp/wxtag/listAll`).then(res => {
|
||||
if (res?.data) {
|
||||
this.origin = JSON.parse(JSON.stringify(res.data))
|
||||
this.list = res?.data
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getUnits()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AiAddressBookMenu {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #FAFAFB;
|
||||
.tabsPane {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: #ffffff;
|
||||
|
||||
h2 {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
line-height: 40px;
|
||||
color: #222;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
|
||||
&.tabActive {
|
||||
color: #2266FF;
|
||||
border-bottom: 2px solid #2266FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.AiAddressBookMenu-wrapper {
|
||||
height: calc(100% - 32px);
|
||||
.AiAddressBookMenu-tree {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.contentPane {
|
||||
height: calc(100% - 56px);
|
||||
margin: 8px;
|
||||
overflow: auto;
|
||||
|
||||
.addressBook-left__tags--item {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 40px;
|
||||
padding: 0 8px 0 16px;
|
||||
color: #222222;
|
||||
|
||||
&.addressBook-left__tags--item-active, &:hover {
|
||||
background: #E8EFFF;
|
||||
color: #2266FF;
|
||||
|
||||
i, span {
|
||||
color: #2266FF;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
i {
|
||||
cursor: pointer;
|
||||
color: #8e9ebf;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
color: #222;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
:deep( .el-tree ){
|
||||
width: 100%;
|
||||
margin-top: 4px;
|
||||
background: transparent;
|
||||
width: fit-content;
|
||||
min-width: 100%;
|
||||
|
||||
.el-tree-node__content {
|
||||
display: inline-flex;
|
||||
min-width: 100%;
|
||||
height: 32px;
|
||||
|
||||
&:hover {
|
||||
background: #E8EFFF;
|
||||
color: #222222;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.is-current > .el-tree-node__content {
|
||||
background: #2266FF;
|
||||
|
||||
&:hover {
|
||||
background: #2266FF;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
356
ui/dv/AiAssist.vue
Normal file
356
ui/dv/AiAssist.vue
Normal file
@@ -0,0 +1,356 @@
|
||||
<script>
|
||||
import AiDrag from "./AiDrag.vue";
|
||||
import {Loading} from "element-ui";
|
||||
import AiDvSvg from "./layout/AiDvSvg/AiDvSvg.vue";
|
||||
import AiEchart from "dui/packages/tools/AiEchart.vue";
|
||||
|
||||
export default {
|
||||
name: "AiAssist",
|
||||
components: {AiEchart, AiDvSvg, AiDrag},
|
||||
data() {
|
||||
return {
|
||||
dialog: false,
|
||||
prompt: "",
|
||||
content: "",
|
||||
assistPos: {},
|
||||
reply: {
|
||||
table: [
|
||||
{address: "张家堡街道", count: 132, handle: 132},
|
||||
{address: "徐家湾街道", count: 125, handle: 225},
|
||||
{address: "未央湖街道", count: 157, handle: 572},
|
||||
{address: "辛家庙街道", count: 142, handle: 422},
|
||||
{address: "六村堡街道", count: 233, handle: 453},
|
||||
],
|
||||
chart: {
|
||||
ops: {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
color: '#00EFFF',
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(179, 223, 255, 0.5)',
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#8FABBF',
|
||||
},
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
show: false
|
||||
},
|
||||
data: ['贷款', '诈骗', '失火', '消防', '醉酒']
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
color: '#8FABBF',
|
||||
interval: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(61, 82, 102, 0.65)',
|
||||
width: 1,
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '4%',
|
||||
right: '1%',
|
||||
bottom:0,
|
||||
top: 0,
|
||||
containLabel: true
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [919, 1210, 9794, 3559, 743],
|
||||
type: 'bar',
|
||||
barWidth: '25%',
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear', x: 1, y: 0, x2: 0, y2: 0, colorStops: [
|
||||
{offset: 0, color: '#02FEFF'},
|
||||
{offset: 1, color: '#00527d1c'}
|
||||
]
|
||||
}
|
||||
},
|
||||
backgroundStyle: {
|
||||
color: '#00527d1c'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isAiResult: v => v.content == "您好!一下是这个月敏感词触发情况概览:"
|
||||
},
|
||||
methods: {
|
||||
confirm() {
|
||||
const loading = Loading.service({fullscreen: true, text: "助手回复中...", background: "rgba(0, 0, 0, 0.2)"});
|
||||
if (/(网格建设|居民报事|居民档案|两委干部|敏感词)/.test(this.prompt)) {
|
||||
setTimeout(() => {
|
||||
loading.close()
|
||||
this.content = "您好!一下是这个月敏感词触发情况概览:"
|
||||
}, 3000)
|
||||
} else {
|
||||
this.content = "抱歉，我还没有学习到关于这个话题的内容，无法提供相关信息。您可以选择其他问题，我将努力为您解答。"
|
||||
loading.close()
|
||||
// this.dialog = false
|
||||
}
|
||||
this.prompt = ""
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
dialog(v) {
|
||||
document.body.onclick = v ? () => this.dialog = false : null
|
||||
if (!v) {
|
||||
this.content = ""
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const {x, y} = this.$el.getBoundingClientRect()
|
||||
this.assistPos = {left: `calc(50vw - ${x}px)`, top: `calc(50vh - ${y}px)`}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="AiAssist" @click.stop>
|
||||
<div class="pointer" @click="dialog=true">
|
||||
<img src="https://cdn.cunwuyun.cn/dvcp/dv/aiIcon.png"/>
|
||||
<div class="avatar-text" v-text="'全局AI助手'"/>
|
||||
</div>
|
||||
<ai-drag class="assistDialog" v-if="dialog" :resizable="false">
|
||||
<div class="inbox" :style="assistPos">
|
||||
<dv-border-box-1 v-if="!content" background-color="#001C30">
|
||||
<div class="title mar-b32 mar-t16">慧智会言</div>
|
||||
<el-input v-model="prompt" placeholder="您说,我在听~" clearable size="small">
|
||||
<template #append><i class="el-icon-microphone">语音输入</i></template>
|
||||
</el-input>
|
||||
<div class="flex center gap-8 mar-t56">
|
||||
<div class="btn" @click="dialog=false">取消</div>
|
||||
<div class="btn" @click="confirm">确定</div>
|
||||
</div>
|
||||
</dv-border-box-1>
|
||||
<ai-dv-svg v-else class="reply" @close="dialog=false">
|
||||
<div class="w100" v-html="content"/>
|
||||
<template v-if="isAiResult">
|
||||
<div class="glass flex mar-v8">
|
||||
<div class="sta fill">网格员总人数<span>5118</span>
|
||||
<p>人</p></div>
|
||||
<div class="sta">网格划分<span>3118</span>
|
||||
<p>个</p></div>
|
||||
</div>
|
||||
<h2>敏感词处理情况</h2>
|
||||
<el-table size="mini" :data="reply.table" stripe class="w100 mar-v8">
|
||||
<el-table-column prop="address" label="地方"/>
|
||||
<el-table-column prop="count" label="触发次数" width="100" align="right"/>
|
||||
<el-table-column prop="handle" label="已处理" width="100" align="right"/>
|
||||
</el-table>
|
||||
<h2>敏感词触发统计</h2>
|
||||
<ai-echart v-bind="reply.chart" class="mar-v8" id="KeywordChart"/>
|
||||
<div class="flex column mar-b16">
|
||||
<div class="btn">导出到本地</div>
|
||||
</div>
|
||||
</template>
|
||||
</ai-dv-svg>
|
||||
</div>
|
||||
</ai-drag>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$theme-color: #23ECFD;
|
||||
.AiAssist {
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
|
||||
.avatar-text {
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
:deep(.assistDialog) {
|
||||
.border-box-content {
|
||||
padding: 16px 28px;
|
||||
position: relative;
|
||||
$gap-v: 6px;
|
||||
$gap-h: 8px;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
left: $gap-h;
|
||||
right: $gap-h;
|
||||
top: $gap-v;
|
||||
bottom: $gap-v;
|
||||
content: " ";
|
||||
box-shadow: 4px 4px 10px $theme-color inset, -4px -4px 10px $theme-color inset;
|
||||
$v: 14px;
|
||||
$vv: calc(100% - #{$v});
|
||||
clip-path: polygon($v 0, $vv 0, 100% $v, 100% $vv, $vv 100%, $v 100%, 0 $vv, 0 $v);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.inbox {
|
||||
width: 400px;
|
||||
height: 230px;
|
||||
position: fixed;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
background-image: url("https://cdn.cunwuyun.cn/dvcp/dv/weiyang/titleBg.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center bottom;
|
||||
}
|
||||
|
||||
.el-input {
|
||||
input {
|
||||
background: transparent;
|
||||
border-color: $theme-color;
|
||||
color: white;
|
||||
|
||||
&::placeholder {
|
||||
color: #B3DAE5;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input-group__append {
|
||||
user-select: none;
|
||||
color: white;
|
||||
background: $theme-color;
|
||||
border-color: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reply {
|
||||
font-size: 14px;
|
||||
|
||||
.glass {
|
||||
width: 100%;
|
||||
padding: 18px 14px;
|
||||
background: hsla(0, 0%, 100%, .04);
|
||||
}
|
||||
|
||||
.sta {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
|
||||
span {
|
||||
font-family: D-DIN;
|
||||
font-size: 18px;
|
||||
color: $theme-color;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $theme-color;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 14px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
padding: 0px 10px;
|
||||
background-image: linear-gradient(270deg, rgba(31, 67, 102, 0), rgba(31, 78, 102, 0.4));
|
||||
}
|
||||
|
||||
.el-table {
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
background-color: transparent !important;
|
||||
|
||||
.el-table__header {
|
||||
background: rgba(33, 180, 253, 0.1);
|
||||
}
|
||||
|
||||
&::before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
tr.el-table__row--striped td {
|
||||
background: rgba(33, 180, 253, 0.1) !important;
|
||||
}
|
||||
|
||||
.el-table th.el-table__cell {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.el-table__header tr th:first-child .cell {
|
||||
padding-left: 20px !important;
|
||||
}
|
||||
|
||||
.el-table__header tr th.is-right .cell {
|
||||
padding-right: 20px !important;
|
||||
}
|
||||
|
||||
.el-table__body tr td.is-right .cell {
|
||||
padding-right: 20px !important;
|
||||
}
|
||||
|
||||
.el-table__body tr td:first-child .cell {
|
||||
padding-left: 20px !important;
|
||||
}
|
||||
|
||||
&.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
||||
background-color: rgba(33, 180, 253, 0.1) !important;
|
||||
}
|
||||
|
||||
td.el-table__cell, th.el-table__cell.is-leaf {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
th.el-table__cell {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
tr {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.el-table__cell {
|
||||
padding: 7px 0;
|
||||
color: #d0e1e8;
|
||||
}
|
||||
|
||||
.el-table__header tr .cell {
|
||||
color: #02FEFF !important;
|
||||
}
|
||||
}
|
||||
|
||||
#KeywordChart {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
background-image: linear-gradient(180deg, #5ac8f666 0%, #01336566 84%);
|
||||
box-shadow: inset 0 2px 8px 0 #33bbff80;
|
||||
border-radius: 4px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
35
ui/dv/AiDrag.vue
Normal file
35
ui/dv/AiDrag.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<section class="AiDrag">
|
||||
<vue-draggable-resizable v-bind="$attrs">
|
||||
<slot/>
|
||||
</vue-draggable-resizable>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
|
||||
import VueDraggableResizable from 'vue-draggable-resizable'
|
||||
|
||||
export default {
|
||||
name: "AiDrag",
|
||||
components: {VueDraggableResizable},
|
||||
props: {
|
||||
type: {default: "show"} //show:只拖拽
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AiDrag {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
pointer-events: none;
|
||||
|
||||
:deep(.vdr ){
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
64
ui/dv/AiDvDialog.vue
Normal file
64
ui/dv/AiDvDialog.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<script>
|
||||
import AiDrag from "./AiDrag.vue";
|
||||
import AiDvSvg from "./layout/AiDvSvg/AiDvSvg.vue";
|
||||
|
||||
export default {
|
||||
name: "AiDvDialog",
|
||||
components: {AiDvSvg, AiDrag},
|
||||
props: {
|
||||
title: {default: "弹窗"},
|
||||
tableData: {default: () => []},
|
||||
columns: {type: [Array, Object]}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialog: false,
|
||||
detail: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
colConfigs() {
|
||||
let config = []
|
||||
if (!Array.isArray(this.columns)) {
|
||||
config = Object.entries(this.columns).map(([key, value]) => {
|
||||
return {...value, prop: key}
|
||||
})
|
||||
} else config = this.columns
|
||||
return config
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
show() {
|
||||
this.dialog = true
|
||||
},
|
||||
close() {
|
||||
this.dialog = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="AiDvDialog">
|
||||
<ai-drag v-if="dialog" :resizable="false">
|
||||
<ai-dv-svg :title="title" @close="dialog=false">
|
||||
<slot v-if="$slots.default"/>
|
||||
<el-table v-else class="simple" :data="tableData">
|
||||
<el-table-column v-for="item in colConfigs" :key="item.prop" :prop="item.prop" :label="item.label"/>
|
||||
</el-table>
|
||||
</ai-dv-svg>
|
||||
</ai-drag>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "dv";
|
||||
|
||||
.AiDvDialog {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 999;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
</style>
|
||||
270
ui/dv/AiDvMap.vue
Normal file
270
ui/dv/AiDvMap.vue
Normal file
@@ -0,0 +1,270 @@
|
||||
<template>
|
||||
<div class="AiDvMap" v-resize="onDomResize">
|
||||
<div class="chart-map" ref="dvMap"/>
|
||||
<div class="dialog" v-if="dialog" :style="dialogPos">
|
||||
<div v-for="item in detail" :key="item.name" class="flex">
|
||||
<div class="dot" :style="dotStyle(item.color)"/>
|
||||
<div class="label fill" v-text="item.label"/>
|
||||
<div v-text="item.value"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import http from "dui/lib/js/request";
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'AiDvMap',
|
||||
props: {
|
||||
geoJson: String,
|
||||
data: Array
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialog: false,
|
||||
chart: null,
|
||||
detail: {},
|
||||
dialogPos: {}
|
||||
}
|
||||
},
|
||||
directives: {
|
||||
resize: {
|
||||
bind(el, binding) {
|
||||
let width = ''
|
||||
let height = ''
|
||||
|
||||
function isResize() {
|
||||
const style = document.defaultView.getComputedStyle(el)
|
||||
if (width !== style.width || height !== style.height) {
|
||||
binding.value({
|
||||
width: style.width,
|
||||
height: style.height
|
||||
})
|
||||
}
|
||||
width = style.width
|
||||
height = style.height
|
||||
}
|
||||
|
||||
el.__vueSetInterval__ = setInterval(isResize, 300)
|
||||
},
|
||||
unbind(el) {
|
||||
clearInterval(el.__vueSetInterval__)
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user'])
|
||||
},
|
||||
mounted() {
|
||||
this.$load(this.$refs.dvMap).then(() => this.initChart())
|
||||
},
|
||||
watch: {
|
||||
dialog(v) {
|
||||
if (!v) {
|
||||
this.detail = []
|
||||
this.dialogPos = {}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onDomResize() {
|
||||
this.$nextTick(() => {
|
||||
this.chart.resize()
|
||||
})
|
||||
},
|
||||
initChart() {
|
||||
const {echarts} = window
|
||||
this.chart = echarts.init(this.$refs.dvMap)
|
||||
this.getData(this.geoJson).then(res => {
|
||||
if (res?.data) {
|
||||
echarts.registerMap('customMap', res.data)
|
||||
const option = {
|
||||
geo: [
|
||||
{
|
||||
map: "customMap",
|
||||
aspectScale: 1,
|
||||
zoom: 0.65,
|
||||
layoutCenter: ["50%", "50%"],
|
||||
layoutSize: "180%",
|
||||
show: true,
|
||||
roam: false,
|
||||
selectedMode: 'single',
|
||||
emphasis: {
|
||||
show: true,
|
||||
label: {
|
||||
textStyle: {
|
||||
color: "#FFFFFF"
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: '#02C6DC'
|
||||
}
|
||||
},
|
||||
select: {
|
||||
label: {
|
||||
color: "#fff"
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: '#02bcff29'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: '#fff',
|
||||
fontSize: 22
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: "rgba(2, 198, 220, 1)",
|
||||
borderWidth: 2,
|
||||
areaColor: "#02bcff29",
|
||||
shadowBlur: 120,
|
||||
}
|
||||
},
|
||||
// 重影
|
||||
...Array(3).fill(1).map((e, i) => {
|
||||
return {
|
||||
type: "map",
|
||||
map: "customMap",
|
||||
zlevel: -1,
|
||||
aspectScale: 1,
|
||||
zoom: 0.65,
|
||||
layoutCenter: ["50%", `${51 + i}%`],
|
||||
layoutSize: "180%",
|
||||
roam: false,
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 1,
|
||||
// borderColor:"rgba(17, 149, 216,0.6)",
|
||||
borderColor: `rgba(2, 198, 220, ${0.6 - i * 0.2})`,
|
||||
shadowColor: `rgba(2, 198, 220, ${0.6 - i * 0.2})`,
|
||||
shadowOffsetY: 5,
|
||||
shadowBlur: 15,
|
||||
areaColor: "transparent",
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
],
|
||||
// geo3D: {
|
||||
// map: "customMap",
|
||||
// shading: 'color',
|
||||
// regionHeight: 8,
|
||||
// show: true,
|
||||
// emphasis: {
|
||||
// show: true,
|
||||
// },
|
||||
// label: {
|
||||
// show: true,
|
||||
// color: '#fff',
|
||||
// fontSize: 22
|
||||
// },
|
||||
// itemStyle: {
|
||||
// color: '#02bcff29',
|
||||
// borderColor: "rgba(2, 198, 220, 1)",
|
||||
// borderWidth: 2
|
||||
// },
|
||||
// viewControl: {
|
||||
// rotateSensitivity: 0,
|
||||
// zoomSensitivity: 0,
|
||||
// panMouseButton: 0,
|
||||
// distance: 250,
|
||||
// alpha:50,
|
||||
// center:[0,-60,0]
|
||||
// }
|
||||
// },
|
||||
}
|
||||
this.chart.setOption(option)
|
||||
this.chart.on('click', evt => {
|
||||
const {name, event: {offsetX, offsetY}} = evt
|
||||
this.dialog = true
|
||||
this.detail = []
|
||||
const item = this.data.find(e => e.name.includes(name))
|
||||
for (const k in item) {
|
||||
if ('name' != k) {
|
||||
this.detail.push({
|
||||
label: k, value: item[k], color: {
|
||||
高风险纠纷: "#FF6868",
|
||||
中风险纠纷: "#FFAB68",
|
||||
低风险纠纷: "#7FE89E",
|
||||
}[k]
|
||||
})
|
||||
}
|
||||
}
|
||||
this.dialogPos = {left: offsetX + 'px', top: offsetY + 'px'}
|
||||
})
|
||||
this.chart.on('globalout', () => {
|
||||
this.dialog = false
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getData(url = `https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=${this.user.info.areaId?.substring(0, 6)}`) {
|
||||
return http.post(`/app/appdvcpconfig/apiForward?url=${encodeURIComponent(url)}`)
|
||||
},
|
||||
dotStyle(color) {
|
||||
return {
|
||||
background: color,
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AiDvMap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
.chart-map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.dialog {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -120%);
|
||||
z-index: 20240327926;
|
||||
padding: 16px 16px 24px;
|
||||
background-color: rgba(9, 48, 69, 0.8);
|
||||
backdrop-filter: blur(5px);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
min-width: 200px;
|
||||
border: 1px solid #02C6DC;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 50%) rotate(-135deg);
|
||||
content: " ";
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: inherit;
|
||||
border: inherit;
|
||||
clip-path: polygon(0 0, 100% 0, 0 100%);
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
border: 3px solid rgba(9, 48, 69, .4);
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #9BB7D4;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
210
ui/dv/AiDvPartyOrg.vue
Normal file
210
ui/dv/AiDvPartyOrg.vue
Normal file
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<div class="partyDvOrg" ref="container">
|
||||
<div class="partyDvOrg-wrapper" ref="tree" id="tree"
|
||||
:style="{left: x, top: y, transform: `scale(${scale}) translate(-50%, -50%) `, 'transform-origin': `${0} ${0}`}">
|
||||
<ai-okr-tree :props="props" node-key="id" :data="treeData"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AiOkrTree from "./AiOkrTree/AiOkrTree";
|
||||
|
||||
export default {
|
||||
name: 'AiDvPartyOrg',
|
||||
components: {AiOkrTree},
|
||||
props: ['instance'],
|
||||
data() {
|
||||
return {
|
||||
scale: 1,
|
||||
x: '50%',
|
||||
y: '50%',
|
||||
treeData: [],
|
||||
props: {
|
||||
label: 'name',
|
||||
children: 'children'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.bindEvent()
|
||||
this.getPartyOrg()
|
||||
},
|
||||
|
||||
destroyed() {
|
||||
document.querySelector('body').removeEventListener('mousewheel', this.onMousewheel)
|
||||
document.querySelector('body').removeEventListener('mouseup', this.onMouseUp)
|
||||
document.querySelector('body').removeEventListener('mousedown', this.onMousedown)
|
||||
document.querySelector('body').removeEventListener('mousemove', this.onMouseMove)
|
||||
},
|
||||
|
||||
methods: {
|
||||
bindEvent() {
|
||||
document.querySelector('body').addEventListener('mousewheel', this.onMousewheel, true)
|
||||
document.querySelector('body').addEventListener('mouseup', this.onMouseUp, true)
|
||||
document.querySelector('body').addEventListener('mousedown', this.onMousedown, true)
|
||||
document.querySelector('body').addEventListener('mousemove', this.onMouseMove, true)
|
||||
},
|
||||
|
||||
onMousewheel(event) {
|
||||
if (!event) return false
|
||||
const elClass = event.target.className
|
||||
if (elClass === 'tree' || elClass === 'middle' || (elClass && (elClass.indexOf('chart') > -1 || elClass.indexOf('user') > -1))) {
|
||||
var dir = event.deltaY > 0 ? 'Up' : 'Down'
|
||||
if (dir === 'Up') {
|
||||
this.scale = this.scale - 0.2 <= 0.1 ? 0.1 : this.scale - 0.2
|
||||
} else {
|
||||
this.scale = this.scale + 0.2
|
||||
}
|
||||
}
|
||||
|
||||
return false
|
||||
},
|
||||
|
||||
onMousedown(e) {
|
||||
const elClass = e.target.className
|
||||
if ((elClass && (elClass.indexOf('chart') > -1 || elClass.indexOf('user') > -1))) {
|
||||
const left = document.querySelector('#tree').offsetLeft
|
||||
const top = document.querySelector('#tree').offsetTop
|
||||
this.isMove = true
|
||||
this.offsetX = e.clientX - left
|
||||
this.offsetY = e.clientY - top
|
||||
}
|
||||
},
|
||||
|
||||
onMouseMove(e) {
|
||||
if (!this.isMove) return
|
||||
|
||||
this.x = (e.clientX - this.offsetX) + 'px'
|
||||
this.y = (e.clientY - this.offsetY) + 'px'
|
||||
},
|
||||
|
||||
onMouseUp() {
|
||||
this.isMove = false
|
||||
},
|
||||
|
||||
getPartyOrg() {
|
||||
this.instance.post('/app/partyOrganization/queryPartyOrganizationServiceList').then(res => {
|
||||
if (res.code === 0) {
|
||||
this.treeData = res.data.filter(e => !e.parentId)
|
||||
this.treeData.map(p => this.addChild(p, res.data.map(v => {
|
||||
return {
|
||||
...v,
|
||||
name: v.name.substr(0, 12)
|
||||
}
|
||||
}), {parent: 'parentId'}))
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.autoScale()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
autoScale() {
|
||||
const treeWidth = this.$refs.tree.offsetWidth
|
||||
const containerWidth = this.$refs.container.offsetWidth
|
||||
this.scale = treeWidth < containerWidth ? 1 : containerWidth / treeWidth
|
||||
this.x = '50%'
|
||||
this.y = '50%'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.partyDvOrg {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.partyDvOrg-wrapper {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
align-items: center;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
padding: 20px;
|
||||
overflow: hidden;
|
||||
width: max-content;
|
||||
height: 300%;
|
||||
}
|
||||
|
||||
:deep( .org-chart-container ){
|
||||
color: #FFFFFF;
|
||||
font-size: 16px;
|
||||
|
||||
.org-chart-node {
|
||||
overflow: hidden;
|
||||
|
||||
.org-chart-node-label {
|
||||
width: 40px;
|
||||
height: 330px;
|
||||
margin-right: 15px;
|
||||
padding: 0 0;
|
||||
box-shadow: 0 0 10px 4px rgba(188, 59, 0, 0.6) inset;
|
||||
|
||||
.org-chart-node-label-inner {
|
||||
line-height: 1.3;
|
||||
padding: 10px 0;
|
||||
font-weight: 500;
|
||||
writing-mode: vertical-rl;
|
||||
text-align: center;
|
||||
letter-spacing: 5px;
|
||||
font-size: 18px;
|
||||
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
line-height: 24px;
|
||||
text-shadow: 0px 2px 4px rgba(117, 9, 9, 0.2);
|
||||
background: linear-gradient(180deg, #FFF6C7 0%, #FFC573 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.org-chart-node-label {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-root-label {
|
||||
width: auto !important;
|
||||
height: 40px !important;
|
||||
line-height: 40px !important;
|
||||
min-height: 40px !important;
|
||||
text-align: center;
|
||||
|
||||
.org-chart-node-label-inner {
|
||||
padding: 0 30px !important;
|
||||
writing-mode: horizontal-tb !important;
|
||||
font-size: 18px;
|
||||
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
line-height: 24px;
|
||||
text-shadow: 0px 2px 4px rgba(117, 9, 9, 0.2);
|
||||
background: linear-gradient(180deg, #FFF6C7 0%, #FFC573 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.org-chart-node-children:before, .org-chart-node:after, .org-chart-node:last-child:before,
|
||||
.org-chart-node.is-leaf:before {
|
||||
border-radius: 0;
|
||||
border-color: #FFBA3E !important;
|
||||
}
|
||||
|
||||
.vertical .org-chart-node:after, .vertical .org-chart-node:before {
|
||||
border-radius: 0;
|
||||
border-color: #FFBA3E !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
369
ui/dv/AiDvRender.vue
Normal file
369
ui/dv/AiDvRender.vue
Normal file
@@ -0,0 +1,369 @@
|
||||
<template>
|
||||
<div class="AiDvRender" style="width: 100%; height: 100%;">
|
||||
<ai-dv-display v-if="currentType === 'display'" :title="data.title" :list="values"/>
|
||||
<ai-dv-panel
|
||||
style="height: 100%; width: 100%;"
|
||||
v-if="currentType !== 'display'"
|
||||
:padding="data.padding"
|
||||
:title="data.title"
|
||||
:theme="theme"
|
||||
:border="data.border || ''">
|
||||
<AiDvSummary v-if="currentType === 'summary'" :theme="theme" :summaryTitle="data.summaryTitle"
|
||||
:key="`summary${index}`" :type="data.display"
|
||||
:data="values"/>
|
||||
<AiSwiper v-else-if="currentType === 'swiper'" :heigth="'100%'" :data="values" :dotIndicator="data.dotIndicator"/>
|
||||
<dv-scroll-board
|
||||
v-if="currentType === 'table'"
|
||||
:class="'dvScrollBoard' + theme"
|
||||
:config="formatTable(values, data.isShowIndex, data.rowNum)"
|
||||
:key="data.height"
|
||||
:theme="theme"
|
||||
:style="{height: data.height + 'px', width: '100%'}"/>
|
||||
<ai-echart-v2 v-else-if="/Chart/.test(currentType)"
|
||||
style="height: 100%; width: 100%;"
|
||||
:ref="'chart' + index"
|
||||
:key="`chart-${index}`"
|
||||
:theme="theme"
|
||||
:data="values"
|
||||
:tpl="data.config"
|
||||
:ops="data.echartOps"/>
|
||||
<AiDvTable
|
||||
v-else-if="currentType === 'AiDvTable'"
|
||||
:heigth="'100%'"
|
||||
:stripe="data.stripe"
|
||||
:theme="theme"
|
||||
:isShowIndex="data.isShowIndex"
|
||||
:config="dvTableConfig"
|
||||
:data="values" :simple="data.simple==1">
|
||||
</AiDvTable>
|
||||
<AiRanking
|
||||
v-else-if="currentType === 'AiRanking'"
|
||||
:theme="theme"
|
||||
:heigth="'100%'"
|
||||
:subType="data.subType"
|
||||
:data="values">
|
||||
</AiRanking>
|
||||
<AiDvMap v-else-if="currentType === 'AiDvMap'" style="width: 100%; height: 100%" :theme="theme" :geo-json="data.geoJson" :data="values"/>
|
||||
<ai-map v-else-if="currentType=='map'" :mask="data.mask === '1'" :areaId="data.areaId" :is3d="data.is3d==1"
|
||||
:is3dAround="data.is3dAround === '1'"
|
||||
:map-style="`amap://styles/${data.mapStyle}`" :pulseLines="data.pulseLines==1" :map.sync="map"
|
||||
:lib.sync="lib"
|
||||
:onlyShowArea="data.limitArea==1" :satellite="data.layers=='satellite'">
|
||||
<div class="mapInfoWin" v-show="mapDialog">
|
||||
<div class="corn" v-for="i in 4" :key="i"/>
|
||||
<div ref="mapInfoWin"/>
|
||||
</div>
|
||||
<div v-if="data.showPingchangMapLegend" class="pingchangMapLegend"/>
|
||||
</ai-map>
|
||||
<ai-monitor :src="data.src" v-else-if="currentType === 'monitor'" :type="data.monitorType"/>
|
||||
<ai-monitor-carousel :list="data.list" v-else-if="currentType === 'monitorCarousel'"/>
|
||||
<img v-else-if="currentType=='img'" :src="data.src" alt="" style="width: 100%; height: 100%; object-fit: fill;"/>
|
||||
<video style="width: 100%; height: 100%; object-fit: fill;" loop :src="data.src" autoplay
|
||||
v-else-if="currentType === 'video'"/>
|
||||
<AiDvPartyOrg style="width: 100%; height: 100%;" v-else-if="currentType === 'partyOrg'" :instance="instance"/>
|
||||
<!-- <ai-sprite v-else-if="/building/.test(currentType)" v-bind="data" is3D @init="mods[currentType]"/> -->
|
||||
<ai-dv-plot v-else-if="currentType=='plot'" :options="data.charts" :instance="instance"/>
|
||||
<ai-assist v-else-if="currentType=='aiAssist'"/>
|
||||
</ai-dv-panel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {scrollBoard} from '@jiaminghi/data-view'
|
||||
import Vue from "vue"
|
||||
import {mapState} from 'vuex'
|
||||
import AiDvMap from "./AiDvMap";
|
||||
import AiMonitor from "./AiMonitor/AiMonitor";
|
||||
import AiSwiper from './AiSwiper.vue'
|
||||
import AiDvDisplay from "./layout/AiDvDisplay/AiDvDisplay";
|
||||
import AiDvPanel from "./layout/AiDvPanel/AiDvPanel";
|
||||
import AiDvSummary from "./layout/AiDvSummary/AiDvSummary";
|
||||
import AiDvPlot from "./layout/AiDvPlot/AiDvPlot.vue";
|
||||
import AiAssist from "./AiAssist.vue";
|
||||
import AiMonitorCarousel from "./AiMonitorCarousel.vue";
|
||||
|
||||
Vue.use(scrollBoard)
|
||||
|
||||
export default {
|
||||
name: 'AiDvRender',
|
||||
props: ['data', 'index', 'theme', 'instance'],
|
||||
components: {
|
||||
AiMonitorCarousel,
|
||||
AiAssist,
|
||||
AiDvPlot,
|
||||
// AiSprite,
|
||||
AiDvSummary,
|
||||
AiDvDisplay,
|
||||
AiDvPanel,
|
||||
AiMonitor,
|
||||
AiSwiper,
|
||||
AiDvMap
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// mods,
|
||||
map: null,
|
||||
lib: null,
|
||||
timer: null,
|
||||
dvTableConfig: [],
|
||||
mapDialog: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
values: v => v.data?.[v.data?.dataType] || [],
|
||||
currentType: v => v.data.type
|
||||
},
|
||||
watch: {
|
||||
values: {
|
||||
immediate: true,
|
||||
deep: true, handler() {
|
||||
if (this.currentType == 'map') {
|
||||
this.renderMap()
|
||||
} else if (this.currentType === 'AiDvTable') {
|
||||
this.dvTableConfig = this.data[this.data.dataType].map((v, i) => {
|
||||
return {
|
||||
color: this.data.config[i] ? (this.data.config[i].color || '') : '',
|
||||
width: this.data.config[i] ? (this.data.config[i].width || '') : '',
|
||||
align: this.data.config[i] ? (this.data.config[i].align || '') : ''
|
||||
}
|
||||
})
|
||||
this.data.config = this.dvTableConfig
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatTable(data, isShowIndex, rowNum) {
|
||||
const tableStyle = {
|
||||
headerBGC: 'transparent',
|
||||
evenRowBGC: 'transparent',
|
||||
oddRowBGC: 'rgba(0, 133, 255, 0.2)',
|
||||
headerHeight: 42,
|
||||
align: 'center'
|
||||
}
|
||||
if (!data.length) {
|
||||
return {
|
||||
header: [],
|
||||
data: []
|
||||
}
|
||||
}
|
||||
if (this.data.tableConfig) {
|
||||
const {x, y} = this.data.tableConfig, dataMap = {}
|
||||
const header = [...new Set(Object.entries(data.find(e => e.row == x) || null)?.filter(e => e[0] != 'row').map(e => e[1]) || [])],
|
||||
rows = [...new Set(Object.entries(data.find(e => e.row == y) || null)?.filter(e => e[0] != 'row').map(e => e[1]) || [])]
|
||||
data.map(e => Object.keys(e).map(k => k != 'row' && (dataMap[k] = (dataMap[k] || "") + "#" + e[k])))
|
||||
const tableData = Object.values(dataMap).map(e => e.split("#"))
|
||||
return {
|
||||
...tableStyle,
|
||||
header: ["", ...header],
|
||||
data: rows.map(y => [y, ...header.map(x => {
|
||||
return tableData.find(m => m.includes(x) && m.includes(y)).at(-1)
|
||||
})])
|
||||
}
|
||||
}
|
||||
let rows = []
|
||||
const header = data.map(v => {
|
||||
return v[Object.keys(v)[0]]
|
||||
})
|
||||
Object.keys(data[0]).forEach((item, index) => {
|
||||
if (index !== 0) {
|
||||
rows.push(item)
|
||||
}
|
||||
})
|
||||
return {
|
||||
header: header,
|
||||
data: rows.map(item => {
|
||||
return data.map(v => {
|
||||
return v[item]
|
||||
})
|
||||
}),
|
||||
...tableStyle,
|
||||
rowNum: rowNum || 7,
|
||||
index: isShowIndex === '1',
|
||||
waitTime: 8000,
|
||||
carousel: 'page',
|
||||
indexHeader: '排名',
|
||||
align: ['center', 'center', 'center', 'center', 'center']
|
||||
}
|
||||
},
|
||||
renderMap(count = 0) {
|
||||
let {lib: AMap, map} = this
|
||||
this.timer && clearInterval(this.timer)
|
||||
if (AMap && map) {
|
||||
map.clearMap()
|
||||
const markers = Array.isArray(this.values) ? this.values : this.values.markers
|
||||
const polylines = Array.isArray(this.values) ? [] : this.values.polylines || []
|
||||
markers.map(e => ({lng: e['经度'], lat: e['纬度'], label: e['地区名称'], ...e})).filter(e => e.lng).map((e) => {
|
||||
const {icon = "https://cdn.cunwuyun.cn/dvcp/h5/Location2.png"} = e
|
||||
return new AMap.Marker({
|
||||
map,
|
||||
content: e.content || `<div class="marker ${this.data.alwaysShow ? 'showLabel' : ''}">
|
||||
<img src="${icon}"/>
|
||||
<span>${e.label}</span>
|
||||
</div>`,
|
||||
position: [e.lng, e.lat]
|
||||
}).on('click', () => {
|
||||
this.mapDialog = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.mapInfoWin.innerHTML = e.infoWindowHtml || [`<div class="infoWin">`, `<b>${e.label}</b>`, '</div>'].join('')
|
||||
map.setZoomAndCenter(16, [e.lng, e.lat])
|
||||
map.setPitch(60)
|
||||
})
|
||||
})
|
||||
})
|
||||
polylines.filter(e => e.path?.length > 0)?.map(e => new AMap.Polyline({
|
||||
map, strokeColor: "#00FFAE", ...e, path: e.path.map(p => new AMap.LngLat(p[1], p[0]))
|
||||
}))
|
||||
map.setFitView()
|
||||
const center = map.getCenter()
|
||||
const zoom = map.getZoom()
|
||||
map.on('click', () => {
|
||||
map.setZoomAndCenter(zoom, center)
|
||||
map.setPitch(0)
|
||||
this.mapDialog = false
|
||||
})
|
||||
this.data.is3d > 0 && map.setPitch(65)
|
||||
if (this.data.is3dAround == 1) {
|
||||
this.timer = setInterval(() => map.setRotation(360, false, 16000))
|
||||
}
|
||||
} else if (count < 10) {
|
||||
console.log("正在加载...%s", count)
|
||||
setTimeout(() => this.renderMap(++count), 1000)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AiDvRender {
|
||||
:deep(.dvScrollBoard1 ) {
|
||||
|
||||
.header {
|
||||
background: rgba(0, 0, 0, 0.1) !important;
|
||||
|
||||
.header-item {
|
||||
color: #FFBB73 !important;
|
||||
font-size: 16px !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.rows {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
line-height: 21px;
|
||||
text-shadow: 0 2px 4px rgba(117, 9, 9, 0.5);
|
||||
background: linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
|
||||
& > div:nth-of-type(2n - 1) {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
& > div:nth-of-type(2n) {
|
||||
background-color: rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
.index {
|
||||
color: #fff;
|
||||
text-shadow: none;
|
||||
background: #BD4921 !important;
|
||||
-webkit-background-clip: inherit;
|
||||
-webkit-text-fill-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
:deep(.marker) {
|
||||
position: relative;
|
||||
|
||||
& > img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
& > span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover > span, &.showLabel > span {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translate(-50%, 100%);
|
||||
display: block;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.mapInfoWin) {
|
||||
$borderColor: #245D8E;
|
||||
$borderCorn: url("https://cdn.cunwuyun.cn/dvcp/dv/mapDialogCorn.png");
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 40%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding: 16px 20px;
|
||||
max-width: 800px;
|
||||
background-color: rgba(#0A1B3E, 0.8);
|
||||
backdrop-filter: blur(6px);
|
||||
border: 1px solid $borderColor;
|
||||
box-shadow: 10px 10px 10px inset rgba($borderColor, .8), -10px -10px 10px inset rgba($borderColor, .8);
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
|
||||
.corn {
|
||||
$offset: -2px;
|
||||
background-image: $borderCorn;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background-size: 100% 100%;
|
||||
|
||||
&:nth-of-type(1) {
|
||||
left: $offset;
|
||||
top: $offset;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
right: $offset;
|
||||
top: $offset;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
right: $offset;
|
||||
bottom: $offset;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
&:nth-of-type(4) {
|
||||
left: $offset;
|
||||
bottom: $offset;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pingchangMapLegend {
|
||||
width: 189px;
|
||||
height: 95px;
|
||||
background: url("https://cdn.cunwuyun.cn/pingchang/pingchangMapLegend.png");
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
bottom: 32px;
|
||||
right: 32px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
253
ui/dv/AiDvViewer.vue
Normal file
253
ui/dv/AiDvViewer.vue
Normal file
@@ -0,0 +1,253 @@
|
||||
<template>
|
||||
<section class="AiDvViewer">
|
||||
<div v-if="!component">
|
||||
<div class="component-item"
|
||||
:style="{
|
||||
width: item.width + 'px',
|
||||
height: item.height + 'px',
|
||||
left: item.left * scale + 'px',
|
||||
top: item.top * scale + 'px',
|
||||
position: 'absolute',
|
||||
zIndex: item.zIndex,
|
||||
transform: `scale(${scale})`
|
||||
}"
|
||||
v-for="(item, index) in componentList"
|
||||
:key="index" @click="handleClick(item)">
|
||||
<ai-dv-render :instance="instance" :key="index" :data="item" :index="index" :theme="dashboard.theme"/>
|
||||
</div>
|
||||
</div>
|
||||
<components v-else :is="component" :dict="dict" :instance="instance" :nav="meta"/>
|
||||
<ai-dv-dialog ref="dvDialog" v-bind="dialog">
|
||||
<div v-if="dialog.content" v-html="dialog.content"/>
|
||||
</ai-dv-dialog>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AiDvDialog from "./AiDvDialog.vue";
|
||||
|
||||
export default {
|
||||
name: 'AiDvViewer',
|
||||
components: {AiDvDialog},
|
||||
label: '大屏预览',
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
id: String,
|
||||
urlPrefix: {
|
||||
type: String,
|
||||
default: '/app'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
id: {
|
||||
handler(v) {
|
||||
v && this.getInfo(v)
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
component: '',
|
||||
dashboard: {
|
||||
title: '大屏',
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
backgroundColor: '',
|
||||
theme: '0',
|
||||
backgroundImage: []
|
||||
},
|
||||
componentList: [],
|
||||
scale: 1,
|
||||
meta: {},
|
||||
dialog: {}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
let content = document.querySelector('#dv-full-screen-container')
|
||||
if (content) {
|
||||
const transform = content.style.transform
|
||||
const scale = transform.replace('scale', '').replace('(', '').replace(')', '')
|
||||
if (scale == 1) {
|
||||
this.scale = document.body.clientWidth / 1920
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getInfo(id) {
|
||||
this.component = null
|
||||
id && this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
|
||||
if (res?.data) {
|
||||
const config = JSON.parse(res.data.config)
|
||||
if (config.custom) {
|
||||
this.component = config.custom
|
||||
this.meta = config?.meta || {}
|
||||
} else {
|
||||
this.componentList = JSON.parse(res.data.config).config
|
||||
this.dashboard = JSON.parse(res.data.config).dashboard
|
||||
|
||||
this.componentList.forEach((item, index) => {
|
||||
if (item.dataType !== 'staticData' && ((item.type.indexOf('Chart') > -1) || ['display', 'table', 'map', 'summary', 'AiRanking', 'AiDvTable'].includes(item.type))) {
|
||||
this.getSourceData(item, index)
|
||||
}
|
||||
if (item.type === 'monitor' && item.monitorType === 'cmcc') {
|
||||
this.instance.post(`${this.urlPrefix}/appzyvideoequipment/getWebSdkUrl?deviceId=${item.moniterId}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$set(this.componentList[index], 'src', JSON.parse(res.data).url)
|
||||
}
|
||||
})
|
||||
}
|
||||
if (item.type === 'monitor' && item.monitorType === 'slw') {
|
||||
this.instance.post(`${this.urlPrefix}/appzyvideoequipment/getWebSdkUrl?deviceId=${item.moniterId}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$set(this.componentList[index], 'src', res.data)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
getSourceData(item, index) {
|
||||
const api = item.dataType === 'apiData' ? item.api : `${this.urlPrefix}/appdiylargescreen/statisticsByLsid?id=${item.sourceDataId}`
|
||||
this.instance.post(api).then(res => {
|
||||
if (res?.data) {
|
||||
if (res.data.length) {
|
||||
const keys = Object.keys(res.data[0])
|
||||
const list = res.data
|
||||
let dynamicData = []
|
||||
if (item.type === 'table' || item.type === 'AiDvTable') {
|
||||
dynamicData = keys.map(v => {
|
||||
let obj = {}
|
||||
list.forEach((item, index) => {
|
||||
obj[`v${index}`] = item[v]
|
||||
})
|
||||
|
||||
return {
|
||||
row: v,
|
||||
...obj
|
||||
}
|
||||
})
|
||||
} else if (item.type === 'summary') {
|
||||
if (item.display === 'summary9') {
|
||||
dynamicData = res.data
|
||||
} else {
|
||||
dynamicData = Object.keys(res.data[0]).map(item => {
|
||||
return {
|
||||
key: item,
|
||||
value: res.data[0][item]
|
||||
}
|
||||
})
|
||||
}
|
||||
} else if (item.dataType === 'dynamicData' && !item.dataX && !item.dataY.length) {
|
||||
dynamicData = Object.keys(res.data[0]).map(item => {
|
||||
return {
|
||||
label: item,
|
||||
value: res.data[0][item]
|
||||
}
|
||||
})
|
||||
} else {
|
||||
if (item.dataX && item.dataY.length) {
|
||||
list.forEach(i => {
|
||||
let obj = {}
|
||||
item.dataY.forEach(v => {
|
||||
obj[v] = i[v]
|
||||
})
|
||||
dynamicData.push({
|
||||
[item.dataX]: i[item.dataX],
|
||||
...obj
|
||||
})
|
||||
})
|
||||
} else {
|
||||
dynamicData = res.data
|
||||
}
|
||||
}
|
||||
this.$set(this.componentList[index], item.dataType, dynamicData)
|
||||
} else {
|
||||
this.$set(this.componentList[index], item.dataType, [])
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
handleClick(item = {}) {
|
||||
const {dialogTitle, dialogContent} = item
|
||||
if (dialogTitle) {
|
||||
this.dialog = {title: dialogTitle, content: dialogContent, ...this.getStaticDataProps(item.staticData)}
|
||||
this.$refs.dvDialog.show()
|
||||
}
|
||||
},
|
||||
//新版静态数据处理
|
||||
getStaticDataProps(meta = []) {
|
||||
const columnProp = "name"
|
||||
let columns = [], tableData = []
|
||||
meta.map((row, i) => {
|
||||
const prop = `c${i || ""}`
|
||||
columns.push({label: row[columnProp], prop})
|
||||
Object.entries(row).map(([k, v]) => {
|
||||
if (/^v/.test(k)) {
|
||||
const item = tableData[k.substring(1) || 0] || {}
|
||||
item[prop] = v
|
||||
tableData[k.substring(1) || 0] = item
|
||||
}else if (k != columnProp) {
|
||||
const index = columns.findIndex(e => k == e)
|
||||
if (index > -1) {
|
||||
const item = tableData[index] || {}
|
||||
item[prop] = v
|
||||
tableData[index] = item
|
||||
} else {
|
||||
columns.push(k)
|
||||
const newIndex = columns.length - 1
|
||||
const item = tableData[newIndex] || {}
|
||||
item[prop] = v
|
||||
tableData[newIndex] = item
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
tableData = tableData.map(e => ({...e, $cellEdit: false}))
|
||||
return {columns, tableData}
|
||||
},
|
||||
close() {
|
||||
this.$emit('close')
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.AiDvViewer {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
background: transparent !important;
|
||||
|
||||
.component-item {
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
.dv-scroll-board {
|
||||
height: calc(100%) !important;
|
||||
|
||||
.header-item {
|
||||
color: #7e8697;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.index {
|
||||
display: inline-block;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
font-size: 16px;
|
||||
background-color: #4F57FF !important;
|
||||
}
|
||||
}
|
||||
|
||||
.vdr {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
7
ui/dv/AiEchart/echartTpls.js
Normal file
7
ui/dv/AiEchart/echartTpls.js
Normal file
@@ -0,0 +1,7 @@
|
||||
import pie from "./template/pie"
|
||||
import line from "./template/line";
|
||||
import bar from "./template/bar";
|
||||
|
||||
export default {
|
||||
...bar, ...line, ...pie
|
||||
}
|
||||
307
ui/dv/AiEchart/template/bar.js
Normal file
307
ui/dv/AiEchart/template/bar.js
Normal file
@@ -0,0 +1,307 @@
|
||||
import tools from "./tools";
|
||||
|
||||
export const barChart1 = {
|
||||
yAxis: {
|
||||
nameGap: 23,
|
||||
minInterval: 1,
|
||||
splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
|
||||
axisLabel: {color: '#C3C4C4'},
|
||||
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(0, 249, 255, 1)'},
|
||||
{offset: 1, color: 'rgba(0, 249, 255, 0.4)'}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
x2: 0,
|
||||
y: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{offset: 0, color: 'rgba(236, 102, 102, 1)'},
|
||||
{offset: 1, color: 'rgba(236, 102, 102, 0.4)'}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
x2: 0,
|
||||
y: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{offset: 0, color: 'rgba(252, 59, 255, 1)'},
|
||||
{offset: 1, color: 'rgba(252, 59, 255, 0.4)'}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
x2: 0,
|
||||
y: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{offset: 0, color: 'rgba(24, 144, 255, 1)'},
|
||||
{offset: 1, color: 'rgba(24, 144, 255, 0.4)'}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
x2: 0,
|
||||
y: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{offset: 0, color: 'rgba(149, 255, 68, 1)'},
|
||||
{offset: 1, color: 'rgba(149, 255, 68, 0.4)'}
|
||||
]
|
||||
}
|
||||
],
|
||||
daemon: {
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
barCategoryGap: 40,
|
||||
itemStyle: {}
|
||||
}
|
||||
}
|
||||
export const barChart2 = {
|
||||
legend: {
|
||||
right: 0, itemGap: 16,
|
||||
textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
|
||||
itemWidth: 16, itemHeight: 5
|
||||
},
|
||||
grid: {
|
||||
left: 50, right: 0
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
|
||||
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', show: true,
|
||||
shadowStyle: {color: 'rgba(46, 153, 255, .2)'}
|
||||
},
|
||||
daemon: {type: 'bar', barWidth: 2, barGap: 4}
|
||||
}
|
||||
export const barChart3 = {
|
||||
legend: {show: false},
|
||||
yAxis: {
|
||||
nameGap: 23, minInterval: 1,
|
||||
splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
|
||||
axisLabel: {color: '#fff'}, axisPointer: {show: false}
|
||||
},
|
||||
axisPointer: {
|
||||
type: 'none', show: true, triggerTooltip: false,
|
||||
},
|
||||
daemon: {
|
||||
type: 'bar', label: {show: true, position: 'insideBottom', color: '#fff'},
|
||||
barWidth: 24,
|
||||
showBackground: true,
|
||||
// backgroundStyle: {
|
||||
// color: 'rgba(123, 165, 255, .2)'
|
||||
// },
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear', x: 0, x2: 0, y: 0, y2: 1,
|
||||
// colorStops: [{offset: 0, color: '#42FFFE'}, {offset: 1, color: 'rgba(37, 255, 246, 0.2)'}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
export const barChart5 = {
|
||||
legend: {
|
||||
right: 0, itemGap: 16,
|
||||
textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
|
||||
itemWidth: 16, itemHeight: 5
|
||||
},
|
||||
grid: {
|
||||
left: 50, right: 0
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
|
||||
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: 'none', show: true, triggerTooltip: false,
|
||||
},
|
||||
}
|
||||
export const barChart7 = {
|
||||
legend: {show: false},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', textStyle: {color: '#fff'},
|
||||
axisPointer: {
|
||||
type: 'shadow', shadowStyle: {color: 'rgba(46, 153, 255, .2)'},
|
||||
label: {show: true, backgroundColor: 'transparent', fontSize: 14, margin: 1, color: '#28FBFF'}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
axisLabel: {color: '#fff', fontSize: 14},
|
||||
axisTick: {show: false},
|
||||
axisLine: {show: false},
|
||||
},
|
||||
xAxis: {
|
||||
nameGap: 23, minInterval: 1,
|
||||
splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
|
||||
axisLabel: {color: '#fff', fontSize: 14},
|
||||
},
|
||||
daemon: {
|
||||
type: 'bar', barWidth: 10, barGap: '40%',
|
||||
label: {show: true, position: 'insideRight', color: '#fff', fontSize: 14},
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: 'rgba(123, 165, 255, .2)'
|
||||
},
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear', x: 0, x2: 1, y: 0, y2: 0,
|
||||
colorStops: [{offset: 0, color: 'rgba(37, 143, 255,.5)'}, {offset: 1, color: 'rgba(43, 199, 255, 1)'}]
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
label: {color: '#28FBFF', position: 'right'},
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear', x: 0, x2: 1, y: 0, y2: 0,
|
||||
colorStops: [{offset: 0, color: 'rgba(37, 255, 246, 0.5)'}, {offset: 1, color: '#28FBFF'}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
export const barChart8 = {
|
||||
legend: {
|
||||
right: 0, itemGap: 16,
|
||||
textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
|
||||
itemWidth: 16, itemHeight: 5
|
||||
},
|
||||
grid: {
|
||||
left: 50, right: 0
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', textStyle: {color: '#fff'}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
axisLabel: {color: '#fff', fontSize: 14},
|
||||
axisLine: {lineStyle: {color: 'rgba(255,255,255,.5)'}},
|
||||
axisPointer: {show: false},
|
||||
},
|
||||
xAxis: {
|
||||
nameGap: 23, minInterval: 1,
|
||||
splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
|
||||
axisLabel: {color: '#fff', fontSize: 14},
|
||||
},
|
||||
daemon: {
|
||||
type: 'bar', barWidth: 10,
|
||||
itemStyle: {
|
||||
color: ({color}) => ({
|
||||
type: 'linear', x: 0, x2: 1, y: 0, y2: 0,
|
||||
colorStops: [{offset: 0, color: tools.$colorUtils.Hex2RGBA(color, .5)}, {offset: 1, color}]
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
export const barChart9 = {
|
||||
legend: {
|
||||
right: 0, itemGap: 16,
|
||||
textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
|
||||
itemWidth: 16, itemHeight: 5
|
||||
},
|
||||
grid: {
|
||||
left: 80, right: 0
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', textStyle: {color: '#fff'},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
axisLabel: {color: '#fff', fontSize: 14, margin: 23},
|
||||
axisTick: {show: false},
|
||||
axisLine: {show: false},
|
||||
},
|
||||
xAxis: {
|
||||
nameGap: 23, minInterval: 1,
|
||||
splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
|
||||
axisLabel: {color: '#fff', fontSize: 14},
|
||||
},
|
||||
daemon: {
|
||||
type: 'bar', barWidth: 10, barGap: '40%', stack: 'stack',
|
||||
showBackground: true,
|
||||
backgroundStyle: {color: 'rgba(123, 165, 255, .2)'}
|
||||
}
|
||||
}
|
||||
export const barChart10 = {
|
||||
yAxis: {
|
||||
nameGap: 23,
|
||||
minInterval: 1,
|
||||
splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
|
||||
axisLabel: {color: '#C3C4C4'},
|
||||
axisPointer: {show: false}
|
||||
},
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
triggerTooltip: false,
|
||||
shadowStyle: {color: 'rgba(46, 153, 255, .2)'}
|
||||
},
|
||||
daemon: {
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
barCategoryGap: 40,
|
||||
itemStyle: {
|
||||
borderRadius: 20,
|
||||
color(params) {
|
||||
const color = ['#DBB36E', '#2C97E8', '#00EFFF', '#BFEAFF'][params.dataIndex]
|
||||
return {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
x2: 0,
|
||||
y: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{offset: 0, color},
|
||||
{offset: 1, color: tools.$colorUtils.Hex2RGBA(color, .1)}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
barChart1,
|
||||
barChart2,
|
||||
barChart3,
|
||||
barChart5,
|
||||
barChart7,
|
||||
barChart8,
|
||||
barChart9,
|
||||
barChart10
|
||||
}
|
||||
148
ui/dv/AiEchart/template/line.js
Normal file
148
ui/dv/AiEchart/template/line.js
Normal file
@@ -0,0 +1,148 @@
|
||||
import tools from "./tools";
|
||||
|
||||
export const lineChart1 = {
|
||||
legend: { show: false },
|
||||
grid: {
|
||||
left: 50,
|
||||
right: 0
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(14, 51, 111, 0.9)',
|
||||
borderColor: '#1A6ABC',
|
||||
textStyle: { color: '#fff' },
|
||||
axisPointer: { type: 'cross' }
|
||||
},
|
||||
yAxis: {
|
||||
nameGap: 23,
|
||||
minInterval: 1,
|
||||
splitLine: { lineStyle: { color: 'rgba(255,255,255,.2)', type: 'dashed' } },
|
||||
axisLabel: { color: '#fff' },
|
||||
axisPointer: { snap: true }
|
||||
},
|
||||
daemon: (color) => ({
|
||||
showSymbol: false,
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
shadowBlur: 4,
|
||||
shadowOffsetY: 2,
|
||||
width: 2
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
x2: 0,
|
||||
y: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: tools.$colorUtils.Hex2RGBA(color, 0.3) },
|
||||
{ offset: 1, color: tools.$colorUtils.Hex2RGBA(color, 0.1) }
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
export const lineChart2 = {
|
||||
legend: {
|
||||
right: 0, itemGap: 16,
|
||||
textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
|
||||
},
|
||||
grid: {
|
||||
left: 50, right: 0
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
|
||||
textStyle: {color: '#fff'}
|
||||
},
|
||||
daemon: color => ({
|
||||
showSymbol: false,
|
||||
lineStyle: {shadowBlur: 4, shadowOffsetY: 2},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear', x: 0, x2: 0, y: 0, y2: 1, colorStops: [
|
||||
{offset: 0, color: tools.$colorUtils.Hex2RGBA(color, .5)},
|
||||
{offset: 1, color: tools.$colorUtils.Hex2RGBA(color, 0)},
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
export const lineChart3 = {
|
||||
// legend: {
|
||||
// right: 0, itemGap: 16,
|
||||
// textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
|
||||
// },
|
||||
grid: {
|
||||
left: 50, right: 0
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
|
||||
textStyle: {color: '#fff'}
|
||||
},
|
||||
daemon: {
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
shadowBlur: 1,
|
||||
shadowOffsetY: 2,
|
||||
width: 3
|
||||
}
|
||||
}
|
||||
};
|
||||
export const lineChart4 = {
|
||||
legend: {
|
||||
right: 0, itemGap: 16,
|
||||
textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
|
||||
},
|
||||
grid: {
|
||||
left: 50, right: 0
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
|
||||
textStyle: {color: '#fff'}
|
||||
},
|
||||
daemon: {
|
||||
lineStyle: {shadowBlur: 4, shadowOffsetY: 2},
|
||||
emphasis: {
|
||||
focus: 'self'
|
||||
}
|
||||
}
|
||||
};
|
||||
export const lineChart5 = {
|
||||
legend: {show: false},
|
||||
grid: {
|
||||
left: 50, right: 0, top: 10, bottom: 30
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
|
||||
textStyle: {color: '#fff'},
|
||||
axisPointer: {type: 'cross'}
|
||||
},
|
||||
yAxis: {
|
||||
nameGap: 23, minInterval: 1,
|
||||
splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
|
||||
axisLabel: {color: '#fff'},
|
||||
axisPointer: {snap: true}
|
||||
},
|
||||
daemon: color => ({
|
||||
showSymbol: false, smooth: true,
|
||||
lineStyle: {shadowBlur: 4, shadowOffsetY: 2},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear', x: 0, x2: 0, y: 0, y2: 1, colorStops: [
|
||||
{offset: 0, color: tools.$colorUtils.Hex2RGBA(color, .5)},
|
||||
{offset: 1, color: tools.$colorUtils.Hex2RGBA(color, 0)},
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
export default {
|
||||
lineChart1,
|
||||
lineChart2,
|
||||
lineChart3,
|
||||
lineChart4,
|
||||
lineChart5,
|
||||
}
|
||||
225
ui/dv/AiEchart/template/pie.js
Normal file
225
ui/dv/AiEchart/template/pie.js
Normal file
@@ -0,0 +1,225 @@
|
||||
export const pieChart1 = {
|
||||
legend: {
|
||||
right: 20,
|
||||
top: 'middle',
|
||||
orient: 'vertical',
|
||||
textStyle: {color: "#fff", fontSize: 14}
|
||||
},
|
||||
grid: {
|
||||
top: '0%',
|
||||
left: '0%',
|
||||
right: '0px',
|
||||
bottom: '0%'
|
||||
},
|
||||
xAxis: {show: false},
|
||||
yAxis: {show: false},
|
||||
tooltip: {},
|
||||
series: {
|
||||
type: "pie",
|
||||
radius: ['60%', '70%'],
|
||||
minShowLabelAngle: 10,
|
||||
itemStyle: {
|
||||
borderColor: 'rgba(128, 128, 128, 0.1)',
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
}
|
||||
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
|
||||
if (points) {
|
||||
const isLeft = points[2][0] < points[1][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 >= 100000) {
|
||||
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 pieChart3 = {
|
||||
legend: {
|
||||
right: 20,
|
||||
top: 'middle',
|
||||
orient: 'vertical',
|
||||
textStyle: {color: "#fff", fontSize: 14}
|
||||
},
|
||||
grid: {
|
||||
top: '0%',
|
||||
left: '0%',
|
||||
right: '0px',
|
||||
bottom: '0%'
|
||||
},
|
||||
xAxis: {show: false},
|
||||
yAxis: {show: false},
|
||||
tooltip: {},
|
||||
series: {
|
||||
type: "pie",
|
||||
minShowLabelAngle: 10,
|
||||
radius: [50, 71],
|
||||
itemStyle: {
|
||||
borderColor: "#8d1419",
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {}
|
||||
},
|
||||
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%",
|
||||
zIndex: '-1',
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
flexDirection: "column",
|
||||
position: "absolute",
|
||||
transform: "translate(-50%,-50%)",
|
||||
backgroundPosition: "center"
|
||||
}
|
||||
},
|
||||
[
|
||||
h(
|
||||
'span',
|
||||
{
|
||||
style: {
|
||||
'font-size': '32px',
|
||||
'font-weight': 'bold',
|
||||
'margin-bottom': '3px',
|
||||
'color': '#CEE1FF',
|
||||
'line-height': '28px',
|
||||
'text-shadow': '0px 2px 4px rgba(117, 9, 9, 0.1)',
|
||||
'background': 'linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%)',
|
||||
'-webkit-background-clip': 'text',
|
||||
'-webkit-text-fill-color': 'transparent'
|
||||
}
|
||||
},
|
||||
formatNum(total)
|
||||
),
|
||||
h('span', {
|
||||
style: {
|
||||
'font-size': '16px',
|
||||
'color': '#CEE1FF',
|
||||
'line-height': '16px',
|
||||
'text-shadow': '0px 2px 4px rgba(117, 9, 9, 0.5)',
|
||||
'background': 'linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%)',
|
||||
'-webkit-background-clip': 'text',
|
||||
'-webkit-text-fill-color': 'transparent'
|
||||
}
|
||||
}, "总量")
|
||||
]
|
||||
)
|
||||
}
|
||||
}
|
||||
export default {
|
||||
pieChart1, pieChart2, pieChart3
|
||||
}
|
||||
24
ui/dv/AiEchart/template/tools.js
Normal file
24
ui/dv/AiEchart/template/tools.js
Normal file
@@ -0,0 +1,24 @@
|
||||
export default {
|
||||
$colorUtils: {
|
||||
Hex2RGBA(color, alpha = 1) {
|
||||
let hex = 0;
|
||||
if (color.charAt(0) == "#") {
|
||||
if (color.length == 4) {
|
||||
//检测诸如#FFF简写格式
|
||||
color = "#" + color.charAt(1).repeat(2) +
|
||||
color.charAt(2).repeat(2) +
|
||||
color.charAt(3).repeat(2);
|
||||
}
|
||||
hex = parseInt(color.slice(1), 16);
|
||||
}
|
||||
let r = hex >> 16 & 0xFF;
|
||||
let g = hex >> 8 & 0xFF;
|
||||
let b = hex & 0xFF;
|
||||
return `rgba(${r},${g},${b},${alpha})`;
|
||||
},
|
||||
RGBtoHex(r, g, b) {
|
||||
let hex = r << 16 | g << 8 | b;
|
||||
return "#" + hex.toString(16);
|
||||
}
|
||||
}
|
||||
}
|
||||
33
ui/dv/AiEditBtn.vue
Normal file
33
ui/dv/AiEditBtn.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<section class="AiEditBtn">
|
||||
<el-button v-if="!edit" type="text" @click="handleOper('edit')">编辑</el-button>
|
||||
<template v-else>
|
||||
<el-button type="text" @click="handleOper('submit')">保存</el-button>
|
||||
<el-button type="text" @click="handleOper('cancel')">取消</el-button>
|
||||
</template>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "AiEditBtn",
|
||||
data() {
|
||||
return {
|
||||
edit: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleOper(event) {
|
||||
if (event != "submit") {
|
||||
this.edit = !this.edit
|
||||
this.$emit(event)
|
||||
} else this.$emit(event, () => this.edit = !this.edit)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AiEditBtn {
|
||||
}
|
||||
</style>
|
||||
181
ui/dv/AiLocateDialog.vue
Normal file
181
ui/dv/AiLocateDialog.vue
Normal file
@@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<section class="AiLocateDialog">
|
||||
<ai-dialog :visible.sync="dialog" title="标绘" @closed="$emit('visible',false),selected={}"
|
||||
@opened="$nextTick(()=>initMap())"
|
||||
@onConfirm="handleConfirm">
|
||||
<div id="amap" v-if="dialog"/>
|
||||
<div class="poi">
|
||||
<el-input ref="poiInput" v-model="search" size="small" clearable @change="handleSearch" placeholder="请输入地点"/>
|
||||
</div>
|
||||
<el-form class="selected" v-if="!!selected.location" id="result" size="mini" label-suffix="："
|
||||
label-position="left">
|
||||
<div class="header">
|
||||
<i class="iconfont iconLocation"/>
|
||||
<span v-html="[selected.location.lng, selected.location.lat].join(',')"/>
|
||||
</div>
|
||||
<el-form-item label="地点">{{ selected.name || "未知地名" }}</el-form-item>
|
||||
<el-form-item label="类型" v-if="!!selected.type">{{ selected.type }}</el-form-item>
|
||||
<el-form-item label="地址" v-if="!!selected.address">{{ selected.address }}</el-form-item>
|
||||
</el-form>
|
||||
</ai-dialog>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AMapLoader from '@amap/amap-jsapi-loader'
|
||||
|
||||
export default {
|
||||
name: "AiLocateDialog",
|
||||
model: {
|
||||
prop: "visible",
|
||||
event: "visible",
|
||||
},
|
||||
props: ['latlng', 'visible'],
|
||||
data() {
|
||||
return {
|
||||
dialog: false,
|
||||
search: "",
|
||||
poi: null,
|
||||
map: null,
|
||||
AMap: null,
|
||||
selected: {},
|
||||
geo: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible(v) {
|
||||
this.dialog = v
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initMap() {
|
||||
AMapLoader.load({
|
||||
key: "b553334ba34f7ac3cd09df9bc8b539dc",
|
||||
version: '2.0',
|
||||
plugins: ['AMap.PlaceSearch', 'AMap.Marker', 'AMap.Geolocation'],
|
||||
}).then(AMap => {
|
||||
this.AMap = AMap
|
||||
this.map = new AMap.Map('amap', {
|
||||
zoom: 14,
|
||||
center: this.latlng ? [this.latlng.lng, this.latlng.lat] : ''
|
||||
}).on('click', res => {
|
||||
this.map.clearMap()
|
||||
this.selected = {location: res.lnglat}
|
||||
this.poi?.searchNearBy('', res.lnglat, 100)
|
||||
});
|
||||
if (this.latlng) {
|
||||
let marker = new AMap.Marker({
|
||||
position: [this.latlng.lng, this.latlng.lat]
|
||||
})
|
||||
this.map.add(marker)
|
||||
}
|
||||
this.poi = new AMap.PlaceSearch().on('complete', ({poiList}) => {
|
||||
this.map.clearMap()
|
||||
if (poiList?.length > 0) {
|
||||
poiList?.pois?.map(e => {
|
||||
let marker = new AMap.Marker({
|
||||
position: e.location,
|
||||
}).on('click', () => this.selected = e)
|
||||
this.map.add(marker)
|
||||
})
|
||||
} else {
|
||||
let marker = new AMap.Marker({
|
||||
position: this.selected.location,
|
||||
})
|
||||
this.map.add(marker)
|
||||
}
|
||||
})
|
||||
this.geo = new AMap.Geolocation({
|
||||
enableHighAccuracy: true,//是否使用高精度定位
|
||||
zoomToAccuracy: true//定位成功后是否自动调整地图视野到定位点
|
||||
})
|
||||
this.map.addControl(this.geo)
|
||||
})
|
||||
},
|
||||
handleSearch(v) {
|
||||
if (v) {
|
||||
this.poi.searchNearBy(v, this.map.getCenter(), 50000)
|
||||
}
|
||||
},
|
||||
handleConfirm() {
|
||||
if (this.selected?.location) {
|
||||
this.$emit('confirm', this.selected)
|
||||
} else {
|
||||
this.$message.error('请先选择坐标位置')
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.dialog = this.visible
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AiLocateDialog {
|
||||
:deep( .el-dialog__body ){
|
||||
padding: 0;
|
||||
height: 480px;
|
||||
position: relative;
|
||||
|
||||
.ai-dialog__content--wrapper {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
#amap {
|
||||
width: 100%;
|
||||
height: 480px;
|
||||
|
||||
.amap-logo, .amap-copyright {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.amap-marker-label {
|
||||
border-color: transparent;
|
||||
box-shadow: 1px 1px 0 0 rgba(#999, .2);
|
||||
}
|
||||
}
|
||||
|
||||
.poi {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
display: flex;
|
||||
height: 32px;
|
||||
flex-direction: column;
|
||||
|
||||
div {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.selected {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 16px;
|
||||
background: #fff;
|
||||
min-width: 200px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
.header {
|
||||
color: #fff;
|
||||
background: #26f;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
font-size: 14px;
|
||||
gap: 4px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
padding: 0 8px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
67
ui/dv/AiMonitor/AiMonitor.vue
Normal file
67
ui/dv/AiMonitor/AiMonitor.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<section class="AiMonitor">
|
||||
<template v-if="type=='cmcc'">
|
||||
<iframe v-if="cmccUrl" :src="cmccUrl" allow="autoplay *; microphone *; fullscreen *" allowfullscreen
|
||||
allowtransparency allowusermedia frameBorder="no"/>
|
||||
</template>
|
||||
<hikversion-monitor v-else-if="type=='hik'" :src="src"/>
|
||||
<dhVideo v-else-if="type=='dahua'" :src="src"/>
|
||||
<slwVideo v-else-if="type=='slw'" :src="src"/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HikversionMonitor from "./hikversionMonitor";
|
||||
import dhVideo from "./dhVideo";
|
||||
import slwVideo from "./slwVideo";
|
||||
import request from "dui/lib/js/request";
|
||||
|
||||
export default {
|
||||
name: "AiMonitor",
|
||||
components: {HikversionMonitor, dhVideo, slwVideo},
|
||||
props: {
|
||||
/**
|
||||
* 视频源
|
||||
*/
|
||||
src: {default: ""},
|
||||
/**
|
||||
* 组件类型
|
||||
* cmcc 中移物联,hik 海康威视
|
||||
* @values cmcc,hik
|
||||
*/
|
||||
type: {default: "cmcc"},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cmccUrl: ""
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getCmccURL() {
|
||||
const {did} = this.$attrs
|
||||
request.post(`/app/appzyvideoequipment/getWebSdkUrl?deviceId=${did}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.cmccUrl = JSON.parse(res.data).url
|
||||
}
|
||||
}).finally(() => this.cmccUrl = this.cmccUrl || this.src)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getCmccURL()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AiMonitor {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 100px;
|
||||
min-height: 60px;
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
81
ui/dv/AiMonitor/dhVideo.vue
Normal file
81
ui/dv/AiMonitor/dhVideo.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div class="dh-video" style="height: 100%;">
|
||||
<video :id="id" autoplay class="video-js vjs-default-skin" style="width: 100%; height: 100%;" controls>
|
||||
<source :src="src">
|
||||
</video>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
props: ['src'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
id: `video-${Math.ceil(Math.random() * 1000000)}`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadLib() {
|
||||
const promise = url => new Promise(resolve => this.$injectLib(url, () => resolve())),
|
||||
promiseCss = url => new Promise(resolve => this.$injectCss(url, () => resolve()))
|
||||
return Promise.all([
|
||||
promiseCss("https://cdn.cunwuyun.cn/videojs/video-js.min.css"),
|
||||
promise("https://cdn.cunwuyun.cn/videojs/video.min.js"),
|
||||
]).then(() => promise("https://cdn.cunwuyun.cn/videojs/videojs-contrib-hls.js"))
|
||||
},
|
||||
initVideoJs(count = 0) {
|
||||
if (!!window.videojs) {
|
||||
videojs(this.id, {
|
||||
autoplay: true
|
||||
}, function () {
|
||||
console.log('videojs播放器初始化成功')
|
||||
})
|
||||
} else if (count < 10) {
|
||||
setTimeout(() => this.initVideoJs(), 200)
|
||||
} else console.error("videojs加载失败!")
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
src: {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.loadLib().then(() => this.initVideoJs())
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dh-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.video-js {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
:deep( .video-js ){
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
|
||||
.vjs-big-play-button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
169
ui/dv/AiMonitor/hikversionMonitor.vue
Normal file
169
ui/dv/AiMonitor/hikversionMonitor.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<section class="hikversionMonitor">
|
||||
<div id="monitorIns">
|
||||
<el-link v-if="needSetupPlugin" href="https://cdn.cunwuyun.cn/wsr/lib/VideoWebPlugin.exe" type="primary">
|
||||
请检查是否安装视频插件,如果没有请点击下载视频插件并安装
|
||||
</el-link>
|
||||
<div v-else>视频插件未启动，正在尝试启动，请稍候...</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "hikversionMonitor",
|
||||
props: {
|
||||
src: {default: ""},
|
||||
list: {default: () => []}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
monitorIns: null,
|
||||
initCount: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
needSetupPlugin() {
|
||||
return this.initCount >= 3
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getMonitorWidth() {
|
||||
let {width} = document.querySelector("#monitorIns")?.getBoundingClientRect()
|
||||
return width
|
||||
},
|
||||
getMonitorHeight() {
|
||||
let {height} = document.querySelector("#monitorIns")?.getBoundingClientRect()
|
||||
return height
|
||||
},
|
||||
initSDK() {
|
||||
this.$nextTick(() => {
|
||||
let width = this.getMonitorWidth(), height = this.getMonitorHeight()
|
||||
if (width) {
|
||||
this.monitorIns = new WebControl({
|
||||
szPluginContainer: "monitorIns", // 指定容器id
|
||||
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
|
||||
iServicePortEnd: 15909,
|
||||
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
|
||||
cbConnectSuccess: () => { // 创建WebControl实例成功
|
||||
this.monitorIns.JS_StartService("window", { // WebControl实例创建成功后需要启动服务
|
||||
dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死
|
||||
}).then(() => { // 启动插件服务成功
|
||||
this.monitorIns.JS_CreateWnd("monitorIns", width, height).then(() => { //JS_CreateWnd创建视频播放窗口，宽高可设定
|
||||
this.monitorIns.JS_RequestInterface({
|
||||
funcName: "getRSAPubKey",
|
||||
argument: JSON.stringify({
|
||||
keyLength: 1024
|
||||
})
|
||||
}).then((oData) => {
|
||||
if (oData.responseMsg.data) {
|
||||
let encrypt = new JSEncrypt();
|
||||
encrypt.setPublicKey(oData.responseMsg.data);
|
||||
let secret = encrypt.encrypt("JSqHo9JUgPLQxfCIjsmQ");
|
||||
this.monitorIns.JS_RequestInterface({
|
||||
funcName: "init",
|
||||
argument: JSON.stringify({
|
||||
appkey: "23335895", //API网关提供的appkey
|
||||
secret, //API网关提供的secret
|
||||
ip: "124.128.246.74", //API网关IP地址
|
||||
playMode: 0, //初始播放模式：0-预览，1-回放
|
||||
port: 1443, //端口
|
||||
snapDir: ".", //抓图存储路径
|
||||
videoDir: ".", //紧急录像或录像剪辑存储路径
|
||||
layout: "1x1", //布局
|
||||
enableHTTPS: 1, //是否启用HTTPS协议
|
||||
encryptedFields: "secret", //加密字段
|
||||
showToolbar: 1, //是否显示工具栏
|
||||
showSmart: 1, //是否显示智能信息
|
||||
buttonIDs: "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769" //自定义工具条按钮
|
||||
})
|
||||
}).then(() => {
|
||||
this.monitorIns.JS_Resize(width, height); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
|
||||
this.startPreview()
|
||||
})
|
||||
}
|
||||
})
|
||||
});
|
||||
}, (...args) => {
|
||||
// 启动插件服务失败
|
||||
console.log(args)
|
||||
})
|
||||
},
|
||||
cbConnectError: () => {
|
||||
this.monitorIns = null
|
||||
WebControl.JS_WakeUp("VideoWebPlugin://");
|
||||
this.initCount++
|
||||
if (!this.needSetupPlugin) {
|
||||
setTimeout(() => {
|
||||
this.initSDK()
|
||||
}, 3000)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
startPreview() {
|
||||
const layout = len =>
|
||||
len <= 1 ? '1x1' :
|
||||
len == 2 ? '1x2' :
|
||||
len == 3 ? '1+2' :
|
||||
len == 4 ? '2x2' :
|
||||
len < 6 ? '1+5' :
|
||||
len == 7 ? '3+4' :
|
||||
len == 8 ? '1+7' :
|
||||
len == 9 ? '3x3' :
|
||||
len == 10 ? '1+9' :
|
||||
len <= 16 ? '4x4' : '4x6'
|
||||
let list = this.src?.split(",")
|
||||
this.monitorIns?.JS_RequestInterface({
|
||||
funcName: "setLayout",
|
||||
argument: JSON.stringify({layout: layout(list.length)})
|
||||
}).then(() => {
|
||||
this.monitorIns?.JS_RequestInterface({
|
||||
funcName: "startMultiPreviewByCameraIndexCode",
|
||||
argument: JSON.stringify({
|
||||
list: list.map((cameraIndexCode, i) => ({
|
||||
cameraIndexCode, //监控点编号
|
||||
streamMode: 0, //主子码流标识
|
||||
transMode: 1, //传输协议
|
||||
gpuMode: 0, //是否开启GPU硬解
|
||||
wndId: i + 1 //可指定播放窗口
|
||||
}))
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
src(v) {
|
||||
v && this.monitorIns?.JS_RequestInterface({funcName: "stopAllPreview"}).then(() => this.startPreview())
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$injectLib("https://cdn.cunwuyun.cn/wsr/lib/jsencrypt.min.js")
|
||||
this.$injectLib("https://cdn.cunwuyun.cn/wsr/lib/jsWebControl-1.0.0.min.js", () => {
|
||||
this.initSDK()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.monitorIns?.JS_DestroyWnd()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.hikversionMonitor {
|
||||
color: #fff;
|
||||
height: 100%;
|
||||
|
||||
#monitorIns {
|
||||
height: 100%;
|
||||
background: #000;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
90
ui/dv/AiMonitor/slwVideo.vue
Normal file
90
ui/dv/AiMonitor/slwVideo.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div class="slw">
|
||||
<iframe
|
||||
v-if="isShow"
|
||||
:id="id"
|
||||
allow="autoplay *; microphone *; fullscreen *" allowfullscreen allowtransparency key="" allowusermedia frameBorder="no"
|
||||
style="width: 100%; height: 100%;"
|
||||
:src="`https://cdn.cunwuyun.cn/jssdk/slw/index.html?url=${src}`"></iframe>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['src'],
|
||||
|
||||
name: 'slwVideo',
|
||||
|
||||
data () {
|
||||
return {
|
||||
isShow: true,
|
||||
id: `video-${new Date().getTime()}`
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
src: {
|
||||
handler (val) {
|
||||
if (val) {
|
||||
this.isShow = false
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.isShow = true
|
||||
})
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
window.addEventListener('message', e => {
|
||||
if (e.data.type && e.data.name === 'fullscreen') {
|
||||
this.requestFullScreen(document.getElementById(this.id))
|
||||
}
|
||||
|
||||
if (!e.data.type && e.data.name === 'fullscreen') {
|
||||
this.exitFullscreen()
|
||||
}
|
||||
}, false)
|
||||
},
|
||||
|
||||
methods: {
|
||||
exitFullscreen () {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen()
|
||||
} else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen()
|
||||
} else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen()
|
||||
} else if (document.webkitExitFullscreen) {
|
||||
document.webkitExitFullscreen()
|
||||
}
|
||||
},
|
||||
|
||||
requestFullScreen (element) {
|
||||
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
|
||||
if (requestMethod) {
|
||||
requestMethod.call(element);
|
||||
} else if (typeof window.ActiveXObject !== 'undefined') {
|
||||
var wscript = new ActiveXObject('WScript.Shell')
|
||||
if (wscript !== null) {
|
||||
wscript.SendKeys('{F11}')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.slw {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
iframe {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
31
ui/dv/AiMonitorCarousel.vue
Normal file
31
ui/dv/AiMonitorCarousel.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<script>
|
||||
import AiMonitor from "./AiMonitor/AiMonitor.vue";
|
||||
|
||||
export default {
|
||||
name: "AiMonitorCarousel",
|
||||
components: {AiMonitor},
|
||||
props: {
|
||||
list: {default: () => []}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="AiMonitorCarousel">
|
||||
<el-carousel height="100%" indicator-position="none" arrow="hover">
|
||||
<el-carousel-item v-for="item in list" :key="item.id">
|
||||
<ai-monitor v-bind="item" :type="item.monitorType"/>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.AiMonitorCarousel {
|
||||
height: 100%;
|
||||
|
||||
.el-carousel {
|
||||
height: inherit;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
732
ui/dv/AiOkrTree/AiOkrTree.vue
Normal file
732
ui/dv/AiOkrTree/AiOkrTree.vue
Normal file
@@ -0,0 +1,732 @@
|
||||
<template>
|
||||
<div class="org-chart-container">
|
||||
<div
|
||||
ref="orgChartRoot"
|
||||
class="org-chart-node-children"
|
||||
:class="{
|
||||
vertical: direction === 'vertical',
|
||||
horizontal: direction === 'horizontal',
|
||||
'show-collapsable': showCollapsable,
|
||||
'one-branch': data.length === 1
|
||||
}"
|
||||
>
|
||||
<OkrTreeNode
|
||||
v-for="child in root.childNodes"
|
||||
:node="child"
|
||||
:root="root"
|
||||
orkstyle
|
||||
:show-collapsable="showCollapsable"
|
||||
:label-width="labelWidth"
|
||||
:label-height="labelHeight"
|
||||
:renderContent="renderContent"
|
||||
:nodeBtnContent="nodeBtnContent"
|
||||
:selected-key="selectedKey"
|
||||
:default-expand-all="defaultExpandAll"
|
||||
:node-key="nodeKey"
|
||||
:show-node-num="showNodeNum"
|
||||
:key="getNodeKey(child)"
|
||||
:props="props"
|
||||
></OkrTreeNode>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Vue from "vue";
|
||||
import OkrTreeNode from "./OkrTreeNode.vue";
|
||||
import TreeStore from "./model/tree-store.js";
|
||||
import {getNodeKey} from "./model/util";
|
||||
|
||||
export default {
|
||||
name: "AiOkrTree",
|
||||
components: {
|
||||
OkrTreeNode
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
okrEventBus: this.okrEventBus
|
||||
};
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
// 源数据
|
||||
required: true
|
||||
},
|
||||
leftData: {
|
||||
// 源数据
|
||||
type: Array
|
||||
},
|
||||
// 方向
|
||||
direction: {
|
||||
type: String,
|
||||
default: "vertical"
|
||||
},
|
||||
// 子节点是否可折叠
|
||||
showCollapsable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 飞书 OKR 模式
|
||||
onlyBothTree: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
orkstyle: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 树节点的内容区的渲染 Function
|
||||
renderContent: Function,
|
||||
// 展开节点的内容渲染 Function
|
||||
nodeBtnContent: Function,
|
||||
// 显示节点数
|
||||
showNodeNum: Boolean,
|
||||
// 树节点区域的宽度
|
||||
labelWidth: [String, Number],
|
||||
// 树节点区域的高度
|
||||
labelHeight: [String, Number],
|
||||
// 树节点的样式
|
||||
labelClassName: [Function, String],
|
||||
// 当前选中节点样式
|
||||
currentLableClassName: [Function, String],
|
||||
// 用来控制选择节点的字段名
|
||||
selectedKey: String,
|
||||
// 是否默认展开所有节点
|
||||
defaultExpandAll: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 当前选中的节点
|
||||
currentNodeKey: [String, Number],
|
||||
// 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
|
||||
nodeKey: String,
|
||||
defaultExpandedKeys: {
|
||||
type: Array
|
||||
},
|
||||
filterNodeMethod: Function,
|
||||
props: {
|
||||
default() {
|
||||
return {
|
||||
leftChildren: "leftChildren",
|
||||
children: "children",
|
||||
label: "label",
|
||||
disabled: "disabled"
|
||||
};
|
||||
}
|
||||
},
|
||||
// 动画
|
||||
animate: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
animateName: {
|
||||
type: String,
|
||||
default: "okr-zoom-in-center"
|
||||
},
|
||||
animateDuration: {
|
||||
type: Number,
|
||||
default: 200
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
ondeClass() {
|
||||
return {
|
||||
findNode: null
|
||||
};
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
okrEventBus: new Vue(),
|
||||
store: null,
|
||||
root: null
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.isTree = true;
|
||||
this.store = new TreeStore({
|
||||
key: this.nodeKey,
|
||||
data: Object.freeze(this.data),
|
||||
leftData: this.leftData,
|
||||
props: this.props,
|
||||
defaultExpandedKeys: this.defaultExpandedKeys,
|
||||
showCollapsable: this.showCollapsable,
|
||||
currentNodeKey: this.currentNodeKey,
|
||||
defaultExpandAll: this.defaultExpandAll,
|
||||
filterNodeMethod: this.filterNodeMethod,
|
||||
labelClassName: this.labelClassName,
|
||||
currentLableClassName: this.currentLableClassName,
|
||||
onlyBothTree: this.onlyBothTree,
|
||||
direction: this.direction,
|
||||
animate: this.animate,
|
||||
animateName: this.animateName
|
||||
});
|
||||
this.root = this.store.root;
|
||||
},
|
||||
watch: {
|
||||
data(newVal) {
|
||||
this.store.setData(newVal);
|
||||
},
|
||||
defaultExpandedKeys(newVal) {
|
||||
this.store.defaultExpandedKeys = newVal;
|
||||
this.store.setDefaultExpandedKeys(newVal);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filter(value) {
|
||||
if (!this.filterNodeMethod)
|
||||
throw new Error("[Tree] filterNodeMethod is required when filter");
|
||||
this.store.filter(value);
|
||||
if (this.onlyBothTree) {
|
||||
this.store.filter(value, "leftChildNodes");
|
||||
}
|
||||
},
|
||||
getNodeKey(node) {
|
||||
return getNodeKey(this.nodeKey, node.data);
|
||||
},
|
||||
// 通过 node 设置某个节点的当前选中状态
|
||||
setCurrentNode(node) {
|
||||
if (!this.nodeKey)
|
||||
throw new Error("[Tree] nodeKey is required in setCurrentNode");
|
||||
this.store.setUserCurrentNode(node);
|
||||
},
|
||||
// 根据 data 或者 key 拿到 Tree 组件中的 node
|
||||
getNode(data) {
|
||||
return this.store.getNode(data);
|
||||
},
|
||||
// 通过 key 设置某个节点的当前选中状态
|
||||
setCurrentKey(key) {
|
||||
if (!this.nodeKey)
|
||||
throw new Error("[Tree] nodeKey is required in setCurrentKey");
|
||||
this.store.setCurrentNodeKey(key);
|
||||
},
|
||||
remove(data) {
|
||||
this.store.remove(data);
|
||||
},
|
||||
// 获取当前被选中节点的 data
|
||||
getCurrentNode() {
|
||||
const currentNode = this.store.getCurrentNode();
|
||||
return currentNode ? currentNode.data : null;
|
||||
},
|
||||
getCurrentKey() {
|
||||
if (!this.nodeKey)
|
||||
throw new Error("[Tree] nodeKey is required in getCurrentKey");
|
||||
const currentNode = this.getCurrentNode();
|
||||
return currentNode ? currentNode[this.nodeKey] : null;
|
||||
},
|
||||
append(data, parentNode) {
|
||||
this.store.append(data, parentNode);
|
||||
},
|
||||
insertBefore(data, refNode) {
|
||||
this.store.insertBefore(data, refNode);
|
||||
},
|
||||
insertAfter(data, refNode) {
|
||||
this.store.insertAfter(data, refNode);
|
||||
},
|
||||
updateKeyChildren(key, data) {
|
||||
if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in updateKeyChild');
|
||||
this.store.updateChildren(key, data);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import "./model/transition.css";
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.org-chart-container {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.vertical .org-chart-node-children {
|
||||
position: relative;
|
||||
padding-top: 20px;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.vertical .org-chart-node {
|
||||
float: left;
|
||||
text-align: center;
|
||||
list-style-type: none;
|
||||
position: relative;
|
||||
padding: 20px 5px 0 5px;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
/*使用 ::before 和 ::after 绘制连接器*/
|
||||
.vertical .org-chart-node::before,
|
||||
.vertical .org-chart-node::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 50%;
|
||||
width: 50%;
|
||||
border-top: 1px solid #ccc;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.vertical .org-chart-node::after {
|
||||
right: auto;
|
||||
left: 50%;
|
||||
border-left: 1px solid #ccc;
|
||||
}
|
||||
|
||||
/*我们需要从没有任何兄弟元素的元素中删除左右连接器*/
|
||||
.vertical.one-branch > .org-chart-node::after,
|
||||
.vertical.one-branch > .org-chart-node::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*从单个子节点的顶部移除空格*/
|
||||
.vertical.one-branch > .org-chart-node {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
/*从第一个子节点移除左连接器，从最后一个子节点移除右连接器*/
|
||||
.vertical .org-chart-node:first-child::before,
|
||||
.vertical .org-chart-node:last-child::after {
|
||||
border: 0 none;
|
||||
}
|
||||
|
||||
/*将垂直连接器添加回最后的节点*/
|
||||
.vertical .org-chart-node:last-child::before {
|
||||
border-right: 1px solid #ccc;
|
||||
border-radius: 0 5px 0 0;
|
||||
}
|
||||
|
||||
.vertical .org-chart-node:only-child:before {
|
||||
border-radius: 0 0px 0 0;
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.vertical .org-chart-node:first-child::after {
|
||||
border-radius: 5px 0 0 0;
|
||||
}
|
||||
|
||||
.vertical .org-chart-node.is-leaf {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.vertical .org-chart-node.is-leaf::before {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.vertical .org-chart-node.is-leaf .org-chart-node-label::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*从父节点添加向下的连接器了*/
|
||||
.vertical .org-chart-node-children::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
border-left: 1px solid #ccc;
|
||||
width: 0;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.vertical .org-chart-node-label {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.vertical .org-chart-node-label .org-chart-node-label-inner {
|
||||
box-shadow: 0 1px 10px rgba(31, 35, 41, 0.08);
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
margin: 0px;
|
||||
font-size: 16px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.vertical .org-chart-node-label .org-chart-node-label-inner:hover {
|
||||
box-shadow: 0 1px 14px rgba(31, 35, 41, 0.12);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vertical .org-chart-node-label .org-chart-node-btn {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
z-index: 10;
|
||||
margin-left: -11px;
|
||||
margin-top: 9px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
|
||||
cursor: pointer;
|
||||
transition: all 0.35s ease;
|
||||
}
|
||||
|
||||
.vertical .org-chart-node-label .org-chart-node-btn:hover {
|
||||
transform: scale(1.15);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vertical .org-chart-node-label .org-chart-node-btn::before,
|
||||
.vertical .org-chart-node-label .org-chart-node-btn::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.vertical .org-chart-node-label .org-chart-node-btn::before {
|
||||
top: 50%;
|
||||
left: 4px;
|
||||
right: 4px;
|
||||
height: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.vertical .org-chart-node-label .org-chart-node-btn::after {
|
||||
top: 4px;
|
||||
left: 50%;
|
||||
bottom: 4px;
|
||||
width: 0;
|
||||
border-left: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.vertical .org-chart-node-label .expanded.org-chart-node-btn::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vertical .org-chart-node.collapsed .org-chart-node-label {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.vertical .org-chart-node.collapsed .org-chart-node-label::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 50%;
|
||||
height: 20px;
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.horizontal .org-chart-node-children,
|
||||
.horizontal .org-chart-node-left-children {
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.horizontal .org-chart-node-left-children {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.horizontal .org-chart-node:not(.is-left-child-node) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 0px 5px 0 20px;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.horizontal .is-left-child-node {
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.horizontal .is-left-child-node {
|
||||
padding: 0px 20px 0 5px;
|
||||
}
|
||||
|
||||
/*使用 ::before 和 ::after 绘制连接器*/
|
||||
.horizontal .org-chart-node:not(.is-left-child-node):before,
|
||||
.horizontal .org-chart-node:not(.is-left-child-node)::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-left: 1px solid #ccc;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 20px;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.horizontal .is-left-child-node:before,
|
||||
.horizontal .is-left-child-node::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-right: 1px solid #ccc;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 20px;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.horizontal .org-chart-node:not(.is-left-child-node):after {
|
||||
top: 50%;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.horizontal .is-left-child-node:after {
|
||||
top: 50%;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
/*我们需要从没有任何兄弟元素的元素中删除左右连接器*/
|
||||
.horizontal.one-branch > .org-chart-node::after,
|
||||
.horizontal.one-branch > .org-chart-node::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*从单个子节点的顶部移除空格*/
|
||||
.horizontal.one-branch > .org-chart-node {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
/*从第一个子节点移除左连接器，从最后一个子节点移除右连接器*/
|
||||
.horizontal .org-chart-node:first-child::before,
|
||||
.horizontal .org-chart-node:last-child::after {
|
||||
border: 0 none;
|
||||
}
|
||||
|
||||
/*将垂直连接器添加回最后的节点*/
|
||||
.horizontal .org-chart-node:not(.is-left-child-node):not(.is-not-child):last-child::before {
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-radius: 0 0px 0 5px;
|
||||
}
|
||||
|
||||
.horizontal .is-left-child-node:last-child::before {
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-radius: 0 0px 5px 0px;
|
||||
}
|
||||
|
||||
.horizontal .org-chart-node:only-child::before {
|
||||
border-radius: 0 0px 0 0px !important;
|
||||
border-color: #ccc;
|
||||
}
|
||||
|
||||
.horizontal .org-chart-node:not(.is-left-child-node):first-child::after {
|
||||
border-radius: 5px 0px 0 0;
|
||||
}
|
||||
|
||||
.horizontal .is-left-child-node:first-child::after {
|
||||
border-radius: 0 5px 0px 0px;
|
||||
}
|
||||
|
||||
.horizontal .org-chart-node.is-leaf {
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.horizontal .org-chart-node.is-leaf::before {
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
|
||||
.horizontal .org-chart-node.is-leaf .org-chart-node-label::after,
|
||||
.horizontal .is-left-child-node.is-leaf .org-chart-node-label::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.horizontal .is-left-child-node:last-child::after {
|
||||
/* border-bottom: 1px solid green; */
|
||||
border-radius: 0 0px 5px 0px;
|
||||
}
|
||||
|
||||
.horizontal .is-left-child-node:only-child::after {
|
||||
border-radius: 0 0px 0 0px;
|
||||
}
|
||||
|
||||
.horizontal .is-left-child-node.is-leaf {
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.horizontal .is-left-child-node.is-leaf::before {
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
|
||||
.horizontal .is-left-child-node .org-chart-node-label::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*从父节点添加向下的连接器了*/
|
||||
.horizontal .org-chart-node-children::before,
|
||||
.horizontal .org-chart-node-left-children::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
border-top: 1px solid #ccc;
|
||||
width: 12px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.horizontal .org-chart-node-children::before {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.horizontal .org-chart-node-left-children::before {
|
||||
left: calc(100% - 11px);
|
||||
}
|
||||
|
||||
.horizontal > .only-both-tree-node > .org-chart-node-left-children::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.horizontal .org-chart-node-label {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.horizontal .org-chart-node-label .org-chart-node-label-inner {
|
||||
box-shadow: 0 1px 10px rgba(31, 35, 41, 0.08);
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
font-size: 16px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.horizontal .org-chart-node-label .org-chart-node-label-inner:hover {
|
||||
box-shadow: 0 1px 14px rgba(31, 35, 41, 0.12);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.horizontal .org-chart-node-label .org-chart-node-btn {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
z-index: 10;
|
||||
margin-top: -11px;
|
||||
margin-left: 9px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
|
||||
cursor: pointer;
|
||||
transition: all 0.35s ease;
|
||||
}
|
||||
|
||||
.horizontal .org-chart-node-label .org-chart-node-btn:hover,
|
||||
.horizontal .org-chart-node-label .org-chart-node-left-btn:hover {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
|
||||
.horizontal .org-chart-node-label .org-chart-node-btn::before,
|
||||
.horizontal .org-chart-node-label .org-chart-node-btn::after,
|
||||
.horizontal .org-chart-node-label .org-chart-node-left-btn::before,
|
||||
.horizontal .org-chart-node-label .org-chart-node-left-btn::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.horizontal .org-chart-node-label .org-chart-node-btn::before,
|
||||
.horizontal .org-chart-node-label .org-chart-node-left-btn::before {
|
||||
top: 50%;
|
||||
left: 4px;
|
||||
right: 3px;
|
||||
border-top: 1px solid #ccc;
|
||||
height: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.horizontal .org-chart-node-label .org-chart-node-btn::after,
|
||||
.horizontal .org-chart-node-label .org-chart-node-left-btn::after {
|
||||
top: 4px;
|
||||
left: 50%;
|
||||
bottom: 4px;
|
||||
width: 0;
|
||||
border-left: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.horizontal .org-chart-node-label .expanded.org-chart-node-btn::after,
|
||||
.horizontal .org-chart-node-label .expanded.org-chart-node-left-btn::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.horizontal .org-chart-node-label .org-chart-node-left-btn {
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
top: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
z-index: 10;
|
||||
margin-top: -11px;
|
||||
margin-right: 9px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
|
||||
cursor: pointer;
|
||||
transition: all 0.35s ease;
|
||||
}
|
||||
|
||||
.horizontal .org-chart-node.collapsed .org-chart-node-label,
|
||||
.horizontal .is-left-child-node.collapsed .org-chart-node-label {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.horizontal .org-chart-node.collapsed .org-chart-node-label::after,
|
||||
.horizontal .is-left-child-node.collapsed .org-chart-node-label::before {
|
||||
content: "";
|
||||
border-bottom: 1px solid #ccc;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
height: 50%;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.horizontal .org-chart-node .is-root-label.is-not-right-child::after,
|
||||
.horizontal .org-chart-node .is-root-label.is-not-left-child::before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* .horizontal .org-chart-node.collapsed .is-root-label.is-right-child::after,
|
||||
.horizontal .org-chart-node.collapsed .is-root-label.is-left-child::before {
|
||||
display: block;
|
||||
} */
|
||||
|
||||
.horizontal .is-left-child-node.collapsed .org-chart-node-label::before {
|
||||
left: -10px;
|
||||
}
|
||||
|
||||
.horizontal .only-both-tree-node > .org-chart-node-label::before {
|
||||
content: "";
|
||||
border-bottom: 1px solid #ccc;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 100%;
|
||||
height: 50%;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.org-chart-node-children .org-chart-node-btn-text {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #909090;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
386
ui/dv/AiOkrTree/OkrTreeNode.vue
Normal file
386
ui/dv/AiOkrTree/OkrTreeNode.vue
Normal file
@@ -0,0 +1,386 @@
|
||||
<template>
|
||||
<div
|
||||
class="org-chart-node"
|
||||
@contextmenu="$event => this.handleContextMenu($event)"
|
||||
v-if="node.visible"
|
||||
:class="{
|
||||
collapsed: !node.leftExpanded || !node.expanded,
|
||||
'is-leaf': isLeaf,
|
||||
'is-current': node.isCurrent,
|
||||
'is-left-child-node': isLeftChildNode,
|
||||
'is-not-child': node.level === 1 && node.childNodes.length <= 0 && leftChildNodes.length <= 0,
|
||||
'only-both-tree-node': node.level === 1 && tree.store.onlyBothTree
|
||||
}"
|
||||
>
|
||||
<transition :duration="animateDuration" :name="animateName">
|
||||
<div
|
||||
class="org-chart-node-left-children"
|
||||
v-if="showLeftChildNode"
|
||||
v-show="node.leftExpanded"
|
||||
>
|
||||
<OkrTreeNode
|
||||
v-for="child in leftChildNodes"
|
||||
:show-collapsable="showCollapsable"
|
||||
:node="child"
|
||||
:label-width="labelWidth"
|
||||
:label-height="labelHeight"
|
||||
:renderContent="renderContent"
|
||||
:nodeBtnContent="nodeBtnContent"
|
||||
:selected-key="selectedKey"
|
||||
:node-key="nodeKey"
|
||||
:key="getNodeKey(child)"
|
||||
:props="props"
|
||||
:show-node-num="showNodeNum"
|
||||
is-left-child-node
|
||||
></OkrTreeNode>
|
||||
</div>
|
||||
</transition>
|
||||
<div class="org-chart-node-label"
|
||||
:class="{
|
||||
'is-root-label': node.level === 1,
|
||||
'is-not-right-child': node.level === 1 && node.childNodes.length <= 0,
|
||||
'is-not-left-child': node.level === 1 && leftChildNodes.length <= 0
|
||||
}"
|
||||
>
|
||||
<div
|
||||
v-if="showNodeLeftBtn && leftChildNodes.length > 0"
|
||||
class="org-chart-node-left-btn"
|
||||
:class="{ expanded: node.leftExpanded }"
|
||||
@click="handleBtnClick('left')">
|
||||
<template v-if="showNodeNum" >
|
||||
<span v-if="!node.leftExpanded" class="org-chart-node-btn-text">
|
||||
{{ (node.level === 1 && leftChildNodes.length > 0) ? leftChildNodes.length : node.childNodes.length }}
|
||||
</span>
|
||||
</template>
|
||||
<node-btn-content v-else :node="node">
|
||||
<slot>
|
||||
</slot>
|
||||
</node-btn-content>
|
||||
</div>
|
||||
<div
|
||||
class="org-chart-node-label-inner"
|
||||
@click="handleNodeClick"
|
||||
:class="computeLabelClass"
|
||||
:style="computeLabelStyle"
|
||||
>
|
||||
<node-content :node="node">
|
||||
<slot>
|
||||
{{ node.label }}
|
||||
</slot>
|
||||
</node-content>
|
||||
</div>
|
||||
<div
|
||||
v-if="showNodeBtn && !isLeftChildNode"
|
||||
class="org-chart-node-btn"
|
||||
:class="{ expanded: node.expanded }"
|
||||
@click="handleBtnClick('right')">
|
||||
<template v-if="showNodeNum">
|
||||
<span v-if="!node.expanded " class="org-chart-node-btn-text">
|
||||
{{ node.childNodes.length }}
|
||||
</span>
|
||||
</template>
|
||||
<node-btn-content v-else :node="node">
|
||||
<slot>
|
||||
<!-- <div class="org-chart-node-btn-text">10</div> -->
|
||||
</slot>
|
||||
</node-btn-content>
|
||||
</div>
|
||||
</div>
|
||||
<transition :duration="animateDuration" :name="animateName">
|
||||
<div
|
||||
class="org-chart-node-children"
|
||||
v-if="!isLeftChildNode && node.childNodes && node.childNodes.length > 0"
|
||||
v-show="node.expanded"
|
||||
>
|
||||
<OkrTreeNode
|
||||
v-for="child in node.childNodes"
|
||||
:show-collapsable="showCollapsable"
|
||||
:node="child"
|
||||
:label-width="labelWidth"
|
||||
:label-height="labelHeight"
|
||||
:renderContent="renderContent"
|
||||
:nodeBtnContent="nodeBtnContent"
|
||||
:selected-key="selectedKey"
|
||||
:node-key="nodeKey"
|
||||
:key="getNodeKey(child)"
|
||||
:show-node-num='showNodeNum'
|
||||
:props="props"
|
||||
></OkrTreeNode>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getNodeKey } from "./model/util";
|
||||
export default {
|
||||
name: "OkrTreeNode",
|
||||
inject: ["okrEventBus"],
|
||||
props: {
|
||||
props: {},
|
||||
node: {
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
root: {
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
// 子节点是否可折叠
|
||||
showCollapsable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 判断是否是左子树的节点，样式需要改
|
||||
isLeftChildNode: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 树节点的内容区的渲染 Function
|
||||
renderContent: Function,
|
||||
// 展开节点的内容渲染 Function
|
||||
nodeBtnContent: Function,
|
||||
// 显示节点数
|
||||
showNodeNum: Boolean,
|
||||
// 树节点区域的宽度
|
||||
labelWidth: [String, Number],
|
||||
// 树节点区域的高度
|
||||
labelHeight: [String, Number],
|
||||
// 用来控制选择节点的字段名
|
||||
selectedKey: String,
|
||||
// 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
|
||||
nodeKey: String
|
||||
},
|
||||
components: {
|
||||
NodeContent: {
|
||||
props: {
|
||||
node: {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
render(h) {
|
||||
const parent = this.$parent;
|
||||
if (parent._props.renderContent) {
|
||||
return parent._props.renderContent(h, this.node);
|
||||
} else {
|
||||
return this.$scopedSlots.default(this.node);
|
||||
}
|
||||
}
|
||||
},
|
||||
// 渲染展开节点的样式
|
||||
NodeBtnContent: {
|
||||
props: {
|
||||
node: {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
render(h) {
|
||||
const parent = this.$parent;
|
||||
if (parent._props.nodeBtnContent) {
|
||||
return parent._props.nodeBtnContent(h, this.node);
|
||||
} else {
|
||||
if (this.$scopedSlots.default) {
|
||||
return this.$scopedSlots.default(this.node);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isLeaf () {
|
||||
if (this.node.level === 1) {
|
||||
if (this.leftChildNodes.length == 0 && this.node.childNodes.length == 0) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
} else {
|
||||
return this.node.isLeaf
|
||||
}
|
||||
},
|
||||
leftChildNodes() {
|
||||
if (this.tree.store.onlyBothTree) {
|
||||
if (this.isLeftChildNode) {
|
||||
return this.node.childNodes;
|
||||
} else {
|
||||
return this.node.leftChildNodes;
|
||||
}
|
||||
}
|
||||
return [];
|
||||
},
|
||||
animateName() {
|
||||
if (this.tree.store.animate) {
|
||||
return this.tree.store.animateName;
|
||||
}
|
||||
return "";
|
||||
},
|
||||
animateDuration() {
|
||||
if (this.tree.store.animate) {
|
||||
return this.tree.store.animateDuration;
|
||||
}
|
||||
return 0;
|
||||
},
|
||||
// 是否显示展开按钮
|
||||
showNodeBtn() {
|
||||
if (this.isLeftChildNode) {
|
||||
return (
|
||||
(this.tree.store.direction === "horizontal" &&
|
||||
this.showCollapsable &&
|
||||
this.leftChildNodes.length > 0) || this.level === 1
|
||||
);
|
||||
}
|
||||
return (
|
||||
this.showCollapsable &&
|
||||
this.node.childNodes &&
|
||||
this.node.childNodes.length > 0
|
||||
)
|
||||
},
|
||||
showNodeLeftBtn() {
|
||||
return (
|
||||
(this.tree.store.direction === "horizontal" &&
|
||||
this.showCollapsable &&
|
||||
this.leftChildNodes.length > 0)
|
||||
)
|
||||
},
|
||||
// 节点的宽度
|
||||
computeLabelStyle() {
|
||||
let { labelWidth = "auto", labelHeight = "auto" } = this;
|
||||
if (typeof labelWidth === "number") {
|
||||
labelWidth = `${labelWidth}px`;
|
||||
}
|
||||
if (typeof labelHeight === "number") {
|
||||
labelHeight = `${labelHeight}px`;
|
||||
}
|
||||
return {
|
||||
width: labelWidth,
|
||||
height: labelHeight
|
||||
};
|
||||
},
|
||||
computeLabelClass() {
|
||||
let clsArr = [];
|
||||
const store = this.tree.store;
|
||||
if (store.labelClassName) {
|
||||
if (typeof store.labelClassName === "function") {
|
||||
clsArr.push(store.labelClassName(this.node));
|
||||
} else {
|
||||
clsArr.push(store.labelClassName);
|
||||
}
|
||||
}
|
||||
if (store.currentLableClassName && this.node.isCurrent) {
|
||||
if (typeof store.currentLableClassName === "function") {
|
||||
clsArr.push(store.currentLableClassName(this.node));
|
||||
} else {
|
||||
clsArr.push(store.currentLableClassName);
|
||||
}
|
||||
}
|
||||
if (this.node.isCurrent) {
|
||||
clsArr.push("is-current");
|
||||
}
|
||||
return clsArr;
|
||||
},
|
||||
computNodeStyle() {
|
||||
return {
|
||||
display: this.node.expanded ? "" : "none"
|
||||
};
|
||||
},
|
||||
computLeftNodeStyle() {
|
||||
return {
|
||||
display: this.node.leftExpanded ? "" : "none"
|
||||
};
|
||||
},
|
||||
// 是否显示左子数
|
||||
showLeftChildNode() {
|
||||
return (
|
||||
this.tree.onlyBothTree &&
|
||||
this.tree.store.direction === "horizontal" &&
|
||||
this.leftChildNodes &&
|
||||
this.leftChildNodes.length > 0
|
||||
);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
"node.expanded"(val) {
|
||||
// this.$nextTick(() => this.expanded = val);
|
||||
},
|
||||
"node.leftExpanded"(val) {
|
||||
// this.$nextTick(() => this.expanded = val);
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// node 的展开状态
|
||||
expanded: false,
|
||||
tree: null
|
||||
};
|
||||
},
|
||||
created() {
|
||||
const parent = this.$parent;
|
||||
if (parent.isTree) {
|
||||
this.tree = parent;
|
||||
} else {
|
||||
this.tree = parent.tree;
|
||||
}
|
||||
|
||||
const tree = this.tree;
|
||||
if (!tree) {
|
||||
console.warn("Can not find node's tree.");
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getNodeKey(node) {
|
||||
return getNodeKey(this.nodeKey, node.data);
|
||||
},
|
||||
handleNodeClick() {
|
||||
const store = this.tree.store;
|
||||
store.setCurrentNode(this.node);
|
||||
this.tree.$emit("node-click", this.node.data, this.node, this);
|
||||
},
|
||||
handleBtnClick(isLeft) {
|
||||
isLeft = isLeft === "left";
|
||||
const store = this.tree.store;
|
||||
// 表示是OKR飞书模式
|
||||
if (store.onlyBothTree) {
|
||||
if (isLeft) {
|
||||
if (this.node.leftExpanded) {
|
||||
this.node.leftExpanded = false;
|
||||
this.tree.$emit("node-collapse", this.node.data, this.node, this);
|
||||
} else {
|
||||
this.node.leftExpanded = true;
|
||||
this.tree.$emit("node-expand", this.node.data, this.node, this);
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (this.node.expanded) {
|
||||
this.node.collapse();
|
||||
this.tree.$emit("node-collapse", this.node.data, this.node, this);
|
||||
} else {
|
||||
if (this.node.parent.childNodes && this.node.parent.childNodes.length) {
|
||||
this.node.parent.childNodes.forEach(e => {
|
||||
e.collapse()
|
||||
})
|
||||
}
|
||||
this.node.expand();
|
||||
this.tree.$emit("node-expand", this.node.data, this.node, this);
|
||||
}
|
||||
},
|
||||
handleContextMenu(event) {
|
||||
if (
|
||||
this.tree._events["node-contextmenu"] &&
|
||||
this.tree._events["node-contextmenu"].length > 0
|
||||
) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
this.tree.$emit(
|
||||
"node-contextmenu",
|
||||
event,
|
||||
this.node.data,
|
||||
this.node,
|
||||
this
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
14
ui/dv/AiOkrTree/model/merge.js
Normal file
14
ui/dv/AiOkrTree/model/merge.js
Normal file
@@ -0,0 +1,14 @@
|
||||
export default function(target) {
|
||||
for (let i = 1, j = arguments.length; i < j; i++) {
|
||||
let source = arguments[i] || {};
|
||||
for (let prop in source) {
|
||||
if (source.hasOwnProperty(prop)) {
|
||||
let value = source[prop];
|
||||
if (value !== undefined) {
|
||||
target[prop] = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return target;
|
||||
}
|
||||
254
ui/dv/AiOkrTree/model/node.js
Normal file
254
ui/dv/AiOkrTree/model/node.js
Normal file
@@ -0,0 +1,254 @@
|
||||
import {markNodeData} from './util';
|
||||
import objectAssign from './merge';
|
||||
|
||||
const getPropertyFromData = function (node, prop) {
|
||||
const props = node.store.props;
|
||||
const data = node.data || {};
|
||||
const config = props[prop];
|
||||
|
||||
if (typeof config === 'function') {
|
||||
return config(data, node);
|
||||
} else if (typeof config === 'string') {
|
||||
return data[config];
|
||||
} else if (typeof config === 'undefined') {
|
||||
const dataProp = data[prop];
|
||||
return dataProp === undefined ? '' : dataProp;
|
||||
}
|
||||
};
|
||||
|
||||
let nodeIdSeed = 0;
|
||||
|
||||
export default class Node {
|
||||
constructor(options, isLeftChild = false) {
|
||||
this.isLeftChild = isLeftChild;
|
||||
this.id = nodeIdSeed++;
|
||||
this.data = null;
|
||||
this.expanded = false;
|
||||
this.leftExpanded = false;
|
||||
this.isCurrent = false;
|
||||
this.visible = true;
|
||||
this.parent = null;
|
||||
for (let name in options) {
|
||||
if (options.hasOwnProperty(name)) {
|
||||
this[name] = options[name];
|
||||
}
|
||||
}
|
||||
this.level = 0;
|
||||
this.childNodes = [];
|
||||
this.leftChildNodes = [];
|
||||
|
||||
if (this.parent) {
|
||||
this.level = this.parent.level + 1;
|
||||
}
|
||||
|
||||
const store = this.store;
|
||||
if (!store) {
|
||||
throw new Error('[Node]store is required!');
|
||||
}
|
||||
store.registerNode(this);
|
||||
if (this.data) {
|
||||
this.setData(this.data, isLeftChild);
|
||||
if (store.defaultExpandAll || !store.showCollapsable) {
|
||||
this.expanded = true;
|
||||
this.leftExpanded = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (!Array.isArray(this.data)) {
|
||||
markNodeData(this, this.data);
|
||||
}
|
||||
if (!this.data) return;
|
||||
const defaultExpandedKeys = store.defaultExpandedKeys;
|
||||
const key = store.key;
|
||||
if (
|
||||
key &&
|
||||
defaultExpandedKeys &&
|
||||
defaultExpandedKeys.indexOf(this.key) !== -1
|
||||
) {
|
||||
this.expand(null, true);
|
||||
}
|
||||
|
||||
if (
|
||||
key &&
|
||||
store.currentNodeKey !== undefined &&
|
||||
this.key === store.currentNodeKey
|
||||
) {
|
||||
store.currentNode = this;
|
||||
store.currentNode.isCurrent = true;
|
||||
}
|
||||
|
||||
this.updateLeafState();
|
||||
}
|
||||
|
||||
setData(data, isLeftChild) {
|
||||
if (!Array.isArray(data)) {
|
||||
markNodeData(this, data);
|
||||
}
|
||||
const store = this.store;
|
||||
this.data = data;
|
||||
this.childNodes = [];
|
||||
let children;
|
||||
if (this.level === 0 && this.data instanceof Array) {
|
||||
children = this.data;
|
||||
} else {
|
||||
children = getPropertyFromData(this, 'children') || [];
|
||||
}
|
||||
for (let i = 0, j = children.length; i < j; i++) {
|
||||
this.insertChild({ data: children[i] }, null, null, isLeftChild);
|
||||
}
|
||||
}
|
||||
get key() {
|
||||
const nodeKey = this.store.key;
|
||||
if (this.data) return this.data[nodeKey];
|
||||
return null;
|
||||
}
|
||||
get label() {
|
||||
return getPropertyFromData(this, 'label');
|
||||
}
|
||||
// 是否是 OKR 飞书模式
|
||||
hasLeftChild() {
|
||||
const store = this.store;
|
||||
return store.onlyBothTree && store.direction === 'horizontal';
|
||||
}
|
||||
insertChild(child, index, batch, isLeftChild) {
|
||||
if (!child) throw new Error('insertChild error: child is required.');
|
||||
if (!(child instanceof Node)) {
|
||||
if (!batch) {
|
||||
const children = this.getChildren(true);
|
||||
if (children.indexOf(child.data) === -1) {
|
||||
if (index === undefined || index === null || index < 0) {
|
||||
children.push(child.data);
|
||||
} else {
|
||||
children.splice(index, 0, child.data);
|
||||
}
|
||||
}
|
||||
}
|
||||
objectAssign(child, {
|
||||
parent: this,
|
||||
store: this.store,
|
||||
});
|
||||
child = new Node(child, isLeftChild);
|
||||
}
|
||||
child.level = this.level + 1;
|
||||
if (index === undefined || index === null || index < 0) {
|
||||
this.childNodes.push(child);
|
||||
} else {
|
||||
this.childNodes.splice(index, 0, child);
|
||||
}
|
||||
this.updateLeafState();
|
||||
}
|
||||
getChildren(forceInit = false) {
|
||||
// this is data
|
||||
if (this.level === 0) return this.data;
|
||||
const data = this.data;
|
||||
if (!data) return null;
|
||||
|
||||
const props = this.store.props;
|
||||
let children = 'children';
|
||||
if (props) {
|
||||
children = props.children || 'children';
|
||||
}
|
||||
|
||||
if (data[children] === undefined) {
|
||||
data[children] = null;
|
||||
}
|
||||
|
||||
if (forceInit && !data[children]) {
|
||||
data[children] = [];
|
||||
}
|
||||
|
||||
return data[children];
|
||||
}
|
||||
updateLeafState() {
|
||||
if (
|
||||
this.store.lazy === true &&
|
||||
this.loaded !== true &&
|
||||
typeof this.isLeafByUser !== 'undefined'
|
||||
) {
|
||||
this.isLeaf = this.isLeafByUser;
|
||||
return;
|
||||
}
|
||||
const childNodes = this.childNodes;
|
||||
if (
|
||||
!this.store.lazy ||
|
||||
(this.store.lazy === true && this.loaded === true)
|
||||
) {
|
||||
this.isLeaf = !childNodes || childNodes.length === 0;
|
||||
return;
|
||||
}
|
||||
this.isLeaf = false;
|
||||
}
|
||||
updateLeftLeafState() {
|
||||
if (
|
||||
this.store.lazy === true &&
|
||||
this.loaded !== true &&
|
||||
typeof this.isLeafByUser !== 'undefined'
|
||||
) {
|
||||
this.isLeaf = this.isLeafByUser;
|
||||
return;
|
||||
}
|
||||
const childNodes = this.leftChildNodes;
|
||||
if (
|
||||
!this.store.lazy ||
|
||||
(this.store.lazy === true && this.loaded === true)
|
||||
) {
|
||||
this.isLeaf = !childNodes || childNodes.length === 0;
|
||||
return;
|
||||
}
|
||||
this.isLeaf = false;
|
||||
}
|
||||
// 节点的收起
|
||||
collapse() {
|
||||
this.expanded = false;
|
||||
}
|
||||
// 节点的展开
|
||||
expand(callback, expandParent) {
|
||||
const done = () => {
|
||||
if (expandParent) {
|
||||
let parent = this.parent;
|
||||
while (parent.level > 0) {
|
||||
parent.isLeftChild
|
||||
? (parent.leftExpanded = true)
|
||||
: (parent.expanded = true);
|
||||
parent = parent.parent;
|
||||
}
|
||||
}
|
||||
this.isLeftChild ? (this.leftExpanded = true) : (this.expanded = true);
|
||||
if (callback) callback();
|
||||
};
|
||||
done();
|
||||
}
|
||||
|
||||
removeChild(child) {
|
||||
const children = this.getChildren() || [];
|
||||
const dataIndex = children.indexOf(child.data);
|
||||
if (dataIndex > -1) {
|
||||
children.splice(dataIndex, 1);
|
||||
}
|
||||
|
||||
const index = this.childNodes.indexOf(child);
|
||||
|
||||
if (index > -1) {
|
||||
this.store && this.store.deregisterNode(child);
|
||||
child.parent = null;
|
||||
this.childNodes.splice(index, 1);
|
||||
}
|
||||
|
||||
this.updateLeafState();
|
||||
}
|
||||
insertBefore(child, ref) {
|
||||
let index;
|
||||
if (ref) {
|
||||
index = this.childNodes.indexOf(ref);
|
||||
}
|
||||
this.insertChild(child, index);
|
||||
}
|
||||
insertAfter(child, ref) {
|
||||
let index;
|
||||
if (ref) {
|
||||
index = this.childNodes.indexOf(ref);
|
||||
if (index !== -1) index += 1;
|
||||
}
|
||||
this.insertChild(child, index);
|
||||
}
|
||||
}
|
||||
1
ui/dv/AiOkrTree/model/transition.css
Normal file
1
ui/dv/AiOkrTree/model/transition.css
Normal file
@@ -0,0 +1 @@
|
||||
.okr-fade-in-enter,.okr-fade-in-leave-active,.okr-fade-in-linear-enter,.okr-fade-in-linear-leave,.okr-fade-in-linear-leave-active,.fade-in-linear-enter,.fade-in-linear-leave,.fade-in-linear-leave-active{opacity:0}.fade-in-linear-enter-active,.fade-in-linear-leave-active{-webkit-transition:opacity .2s linear;transition:opacity .2s linear}.okr-fade-in-linear-enter-active,.okr-fade-in-linear-leave-active{-webkit-transition:opacity .2s linear;transition:opacity .2s linear}.okr-fade-in-enter-active,.okr-fade-in-leave-active{-webkit-transition:all .3s cubic-bezier(.55,0,.1,1);transition:all .3s cubic-bezier(.55,0,.1,1)}.okr-zoom-in-center-enter-active,.okr-zoom-in-center-leave-active{-webkit-transition:all .3s cubic-bezier(.55,0,.1,1);transition:all .3s cubic-bezier(.55,0,.1,1)}.okr-zoom-in-center-enter,.okr-zoom-in-center-leave-active{opacity:0;-webkit-transform:scaleX(0);transform:scaleX(0)}.okr-zoom-in-top-enter-active,.okr-zoom-in-top-leave-active{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);-webkit-transform-origin:center top;transform-origin:center top}.okr-zoom-in-top-enter,.okr-zoom-in-top-leave-active{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}.okr-zoom-in-bottom-enter-active,.okr-zoom-in-bottom-leave-active{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);-webkit-transform-origin:center bottom;transform-origin:center bottom}.okr-zoom-in-bottom-enter,.okr-zoom-in-bottom-leave-active{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}.okr-zoom-in-left-enter-active,.okr-zoom-in-left-leave-active{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);-webkit-transform-origin:top left;transform-origin:top left}.okr-zoom-in-left-enter,.okr-zoom-in-left-leave-active{opacity:0;-webkit-transform:scale(.45,.45);transform:scale(.45,.45)}.collapse-transition{-webkit-transition:.3s height ease-in-out,.3s padding-top ease-in-out,.3s padding-bottom ease-in-out;transition:.3s height ease-in-out,.3s padding-top ease-in-out,.3s padding-bottom ease-in-out}.horizontal-collapse-transition{-webkit-transition:.3s width ease-in-out,.3s padding-left ease-in-out,.3s padding-right ease-in-out;transition:.3s width ease-in-out,.3s padding-left ease-in-out,.3s padding-right ease-in-out}.okr-list-enter-active,.okr-list-leave-active{-webkit-transition:all 1s;transition:all 1s}.okr-list-enter,.okr-list-leave-active{opacity:0;-webkit-transform:translateY(-30px);transform:translateY(-30px)}.okr-opacity-transition{-webkit-transition:opacity .3s cubic-bezier(.55,0,.1,1);transition:opacity .3s cubic-bezier(.55,0,.1,1)}
|
||||
177
ui/dv/AiOkrTree/model/tree-store.js
Normal file
177
ui/dv/AiOkrTree/model/tree-store.js
Normal file
@@ -0,0 +1,177 @@
|
||||
import Node from "./node";
|
||||
import {getNodeKey} from "./util";
|
||||
|
||||
export default class TreeStore {
|
||||
constructor(options) {
|
||||
this.currentNode = null;
|
||||
this.currentNodeKey = null;
|
||||
|
||||
for (let option in options) {
|
||||
if (options.hasOwnProperty(option)) {
|
||||
this[option] = options[option];
|
||||
}
|
||||
}
|
||||
this.nodesMap = {};
|
||||
this.root = new Node(
|
||||
{
|
||||
data: this.data,
|
||||
store: this
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
if (this.root.store.onlyBothTree) {
|
||||
if (!this.leftData)
|
||||
throw new Error("[Tree] leftData is required in onlyBothTree");
|
||||
if (this.leftData) {
|
||||
this.isLeftChilds = new Node(
|
||||
{
|
||||
data: this.leftData,
|
||||
store: this
|
||||
},
|
||||
true
|
||||
);
|
||||
if (this.isLeftChilds) {
|
||||
this.root.childNodes[0].leftChildNodes = this.isLeftChilds.childNodes[0].childNodes;
|
||||
this.root.childNodes[0].leftExpanded = this.isLeftChilds.childNodes[0].leftExpanded;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
filter(value, childName = "childNodes") {
|
||||
this.filterRight(value, childName);
|
||||
}
|
||||
// 过滤默认节点
|
||||
filterRight(value, childName) {
|
||||
const filterNodeMethod = this.filterNodeMethod;
|
||||
const traverse = function(node, childName) {
|
||||
let childNodes;
|
||||
if (node.root) {
|
||||
childNodes = node.root.childNodes[0][childName];
|
||||
} else {
|
||||
childNodes = node.childNodes;
|
||||
}
|
||||
childNodes.forEach(child => {
|
||||
child.visible = filterNodeMethod.call(child, value, child.data, child);
|
||||
traverse(child, childName);
|
||||
});
|
||||
|
||||
if (!node.visible && childNodes.length) {
|
||||
let allHidden = true;
|
||||
allHidden = !childNodes.some(child => child.visible);
|
||||
|
||||
if (node.root) {
|
||||
node.root.visible = allHidden === false;
|
||||
} else {
|
||||
node.visible = allHidden === false;
|
||||
}
|
||||
}
|
||||
if (!value) return;
|
||||
|
||||
if (node.visible) node.expand();
|
||||
};
|
||||
|
||||
traverse(this, childName);
|
||||
}
|
||||
|
||||
registerNode(node) {
|
||||
const key = this.key;
|
||||
if (!key || !node || !node.data) return;
|
||||
|
||||
const nodeKey = node.key;
|
||||
if (nodeKey !== undefined) this.nodesMap[node.key] = node;
|
||||
}
|
||||
deregisterNode(node) {
|
||||
const key = this.key;
|
||||
if (!key || !node || !node.data) return;
|
||||
node.childNodes.forEach(child => {
|
||||
this.deregisterNode(child);
|
||||
});
|
||||
delete this.nodesMap[node.key];
|
||||
}
|
||||
setData(newVal) {
|
||||
const instanceChanged = newVal !== this.root.data;
|
||||
if (instanceChanged) {
|
||||
this.root.setData(newVal);
|
||||
} else {
|
||||
this.root.updateChildren();
|
||||
}
|
||||
}
|
||||
updateChildren(key, data) {
|
||||
const node = this.nodesMap[key];
|
||||
if (!node) return;
|
||||
const childNodes = node.childNodes;
|
||||
for (let i = childNodes.length - 1; i >= 0; i--) {
|
||||
const child = childNodes[i];
|
||||
this.remove(child.data);
|
||||
}
|
||||
for (let i = 0, j = data.length; i < j; i++) {
|
||||
const child = data[i];
|
||||
this.append(child, node.data);
|
||||
}
|
||||
}
|
||||
getNode(data) {
|
||||
if (data instanceof Node) return data;
|
||||
const key = typeof data !== "object" ? data : getNodeKey(this.key, data);
|
||||
return this.nodesMap[key] || null;
|
||||
}
|
||||
setDefaultExpandedKeys(keys) {
|
||||
keys = keys || [];
|
||||
this.defaultExpandedKeys = keys;
|
||||
keys.forEach(key => {
|
||||
const node = this.getNode(key);
|
||||
if (node) node.expand(null, true);
|
||||
});
|
||||
}
|
||||
setCurrentNode(currentNode) {
|
||||
const prevCurrentNode = this.currentNode;
|
||||
if (prevCurrentNode) {
|
||||
prevCurrentNode.isCurrent = false;
|
||||
}
|
||||
this.currentNode = currentNode;
|
||||
this.currentNode.isCurrent = true;
|
||||
}
|
||||
setUserCurrentNode(node) {
|
||||
const key = node.key;
|
||||
const currNode = this.nodesMap[key];
|
||||
this.setCurrentNode(currNode);
|
||||
}
|
||||
setCurrentNodeKey(key) {
|
||||
if (key === null || key === undefined) {
|
||||
this.currentNode && (this.currentNode.isCurrent = false);
|
||||
this.currentNode = null;
|
||||
return;
|
||||
}
|
||||
const node = this.getNode(key);
|
||||
if (node) {
|
||||
this.setCurrentNode(node);
|
||||
}
|
||||
}
|
||||
getCurrentNode() {
|
||||
return this.currentNode;
|
||||
}
|
||||
remove(data) {
|
||||
const node = this.getNode(data);
|
||||
if (node && node.parent) {
|
||||
if (node === this.currentNode) {
|
||||
this.currentNode = null;
|
||||
}
|
||||
node.parent.removeChild(node);
|
||||
}
|
||||
}
|
||||
append(data, parentData) {
|
||||
const parentNode = parentData ? this.getNode(parentData) : this.root;
|
||||
|
||||
if (parentNode) {
|
||||
parentNode.insertChild({ data });
|
||||
}
|
||||
}
|
||||
insertBefore(data, refData) {
|
||||
const refNode = this.getNode(refData);
|
||||
refNode.parent.insertBefore({ data }, refNode);
|
||||
}
|
||||
insertAfter(data, refData) {
|
||||
const refNode = this.getNode(refData);
|
||||
refNode.parent.insertAfter({ data }, refNode);
|
||||
}
|
||||
}
|
||||
27
ui/dv/AiOkrTree/model/util.js
Normal file
27
ui/dv/AiOkrTree/model/util.js
Normal file
@@ -0,0 +1,27 @@
|
||||
export const NODE_KEY = "$treeNodeId";
|
||||
|
||||
export const markNodeData = function(node, data) {
|
||||
if (!data || data[NODE_KEY]) return;
|
||||
Object.defineProperty(data, NODE_KEY, {
|
||||
value: node.id,
|
||||
enumerable: false,
|
||||
configurable: false,
|
||||
writable: false
|
||||
});
|
||||
};
|
||||
|
||||
export const getNodeKey = function(key, data) {
|
||||
if (!key) return data[NODE_KEY];
|
||||
return data[key];
|
||||
};
|
||||
|
||||
export const findNearestComponent = (element, componentName) => {
|
||||
let target = element;
|
||||
while (target && target.tagName !== "BODY") {
|
||||
if (target.__vue__ && target.__vue__.$options.name === componentName) {
|
||||
return target.__vue__;
|
||||
}
|
||||
target = target.parentNode;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
53
ui/dv/AiSprite.vue
Normal file
53
ui/dv/AiSprite.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<section class="AiSprite" :ref="ref"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "AiSprite",
|
||||
props: {
|
||||
width: {default: 400},
|
||||
height: {default: 300},
|
||||
is3D: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ref: ""
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(count = 0) {
|
||||
const container = this.$refs[this.ref]
|
||||
if (container) {
|
||||
let {width, height} = this.$props
|
||||
const scene = new spritejs.Scene({container, width, height, ...this.$attrs}),
|
||||
layer = scene.layer()
|
||||
/**
|
||||
* layer 图层
|
||||
* lib spritejs的依赖库
|
||||
*/
|
||||
this.$emit("init", {layer, lib: spritejs})
|
||||
} else if (count == 20) {
|
||||
console.log(this.$refs)
|
||||
} else setTimeout(() => this.init(++count), 500)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.ref = "AiSprite_" + new Date().getTime()
|
||||
},
|
||||
mounted() {
|
||||
this.$injectLib("https://cdn.cunwuyun.cn/spritejs/spritejs.min.js", () => {
|
||||
if (this.is3D) {
|
||||
this.$injectLib("https://cdn.cunwuyun.cn/spritejs/sprite-extend-3d.js", () => {
|
||||
this.init()
|
||||
})
|
||||
} else this.init()
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AiSprite {
|
||||
}
|
||||
</style>
|
||||
107
ui/dv/AiSwiper.vue
Normal file
107
ui/dv/AiSwiper.vue
Normal file
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div class="swiper" :class="{dotIndicator}">
|
||||
<el-carousel height="100%" :indicator-position="indicator" :arrow="arrow">
|
||||
<el-carousel-item v-for="(item, index) in data" :key="index">
|
||||
<img v-if="item.img" :src="item.img">
|
||||
<div class="swiper-content" v-if="item.title">
|
||||
<h2>{{ item.title }}</h2>
|
||||
<p>{{ item.content }}</p>
|
||||
</div>
|
||||
<div class="pad-h20" v-else-if="item.content" v-html="item.content"/>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AiSwiper',
|
||||
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
dotIndicator: Boolean//点指示器
|
||||
},
|
||||
computed: {
|
||||
arrow: v => v.dotIndicator ? 'never' : 'hover',
|
||||
indicator: v => v.dotIndicator ? undefined : 'none'
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px 0 0;
|
||||
|
||||
&.dotIndicator {
|
||||
:deep(.el-carousel ) {
|
||||
|
||||
.el-carousel__button {
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(103, 123, 154, 0.5);
|
||||
}
|
||||
.is-active{
|
||||
.el-carousel__button{
|
||||
background-color: #02FEFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep( .el-carousel ) {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.swiper-content {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, #000000 100%);
|
||||
|
||||
h2 {
|
||||
margin-bottom: 4px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 22px;
|
||||
white-space: pre-line;
|
||||
color: #B6DFFF;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
text-indent: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
163
ui/dv/AiUserPicker.vue
Normal file
163
ui/dv/AiUserPicker.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<section class="AiUserPicker">
|
||||
<div v-if="$slots.default " @click="handleSelect">
|
||||
<slot/>
|
||||
</div>
|
||||
<div class="AiWechatSelecter-userlist" v-else>
|
||||
<div class="user-item" v-for="(item, index) in value" :key="index">
|
||||
<img :src="getAvatar(item)">
|
||||
<div class="itemLabel" v-text="item.name"/>
|
||||
<i class="iconfont iconwarning" @click="removeUser(index)"/>
|
||||
</div>
|
||||
<div class="user-add" @click="handleSelect">
|
||||
<div class="userlist-add__icon">
|
||||
<i class="el-icon-plus"/>
|
||||
</div>
|
||||
<span>选择</span>
|
||||
</div>
|
||||
</div>
|
||||
<ai-dialog title="选择人员" :visible.sync="dialog" width="1100px" @onConfirm="submit" @close="selected=[]">
|
||||
<ai-table-select :instance="instance" v-model="selected" multiple action="/app/wxcp/wxuser/list?status=1" valueObj extra="mobile"/>
|
||||
</ai-dialog>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "AiUserPicker",
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change',
|
||||
},
|
||||
props: {
|
||||
value: {default: () => []},
|
||||
instance: Function,
|
||||
multiple: {default: true},
|
||||
props: {
|
||||
default: () => ({
|
||||
label: 'name',
|
||||
id: 'id'
|
||||
})
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialog: false,
|
||||
selected: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
removeUser(i) {
|
||||
let list = this.$copy(this.value)
|
||||
list.splice(i, 1)
|
||||
this.$emit("change", list)
|
||||
},
|
||||
submit() {
|
||||
this.$emit("change", this.selected)
|
||||
this.dialog = false
|
||||
},
|
||||
handleSelect() {
|
||||
this.selected = this.$copy(this.value)
|
||||
this.dialog = true
|
||||
},
|
||||
getAvatar(row){
|
||||
return row.avatar||row.photo||'https://cdn.cunwuyun.cn/dvcp/h5/defaultAvatar.png'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AiUserPicker {
|
||||
.AiWechatSelecter-userlist {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.user-add {
|
||||
margin-bottom: 6px;
|
||||
|
||||
.userlist-add__icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-bottom: 4px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #CCCCCC;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
i {
|
||||
color: #CCCCCC;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 100%;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
color: #888888;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-item {
|
||||
position: relative;
|
||||
margin-bottom: 6px;
|
||||
margin-right: 16px;
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-bottom: 4px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #CCCCCC;
|
||||
}
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 2px;
|
||||
font-size: 16px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transform: translate(40%, -100%);
|
||||
height: 16px;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.itemLabel {
|
||||
display: block;
|
||||
width: 60px;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
color: #888888;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
17
ui/dv/animation.scss
Normal file
17
ui/dv/animation.scss
Normal file
@@ -0,0 +1,17 @@
|
||||
@keyframes breathe {
|
||||
0% {
|
||||
opacity: .2;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes floatCard {
|
||||
0% {
|
||||
transform: translateY(5px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
62
ui/dv/dv.scss
Normal file
62
ui/dv/dv.scss
Normal file
@@ -0,0 +1,62 @@
|
||||
:deep(.el-table.simple) {
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
background-color: transparent !important;
|
||||
|
||||
.el-table__header {
|
||||
background: rgba(33, 180, 253, 0.1);
|
||||
}
|
||||
|
||||
&::before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
tr.el-table__row--striped td {
|
||||
background: rgba(33, 180, 253, 0.1) !important;
|
||||
}
|
||||
|
||||
.el-table th.el-table__cell {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.el-table__header tr th:first-child .cell {
|
||||
padding-left: 20px !important;
|
||||
}
|
||||
|
||||
.el-table__header tr th.is-right .cell {
|
||||
padding-right: 20px !important;
|
||||
}
|
||||
|
||||
.el-table__body tr td.is-right .cell {
|
||||
padding-right: 20px !important;
|
||||
}
|
||||
|
||||
.el-table__body tr td:first-child .cell {
|
||||
padding-left: 20px !important;
|
||||
}
|
||||
|
||||
&.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
||||
background-color: rgba(33, 180, 253, 0.1) !important;
|
||||
}
|
||||
|
||||
td.el-table__cell, th.el-table__cell.is-leaf {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
th.el-table__cell {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
tr {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.el-table__cell {
|
||||
padding: 7px 0;
|
||||
color: #d0e1e8;
|
||||
}
|
||||
|
||||
.el-table__header tr .cell {
|
||||
color: #02FEFF !important;
|
||||
}
|
||||
}
|
||||
118
ui/dv/index.js
Normal file
118
ui/dv/index.js
Normal file
@@ -0,0 +1,118 @@
|
||||
//本地仓库外部组件
|
||||
|
||||
// 存储组件列表
|
||||
let components = [];
|
||||
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
|
||||
const install = function (Vue) {
|
||||
if (install.installed) return;
|
||||
// 声明全局业务对象类
|
||||
const models = require.context('./model', true, /\.js$/)
|
||||
if (models) {
|
||||
const model = {}
|
||||
models.keys().map(e => {
|
||||
model[e.replace(/\.[\/\\]([^\\\/]+)\.js$/, '$1')] = models(e).default
|
||||
})
|
||||
Vue.prototype.MODEL = model
|
||||
}
|
||||
Vue.prototype.$echartTpls = require("./AiEchart/echartTpls").default
|
||||
// 遍历注册全局组件
|
||||
let contexts = require.context('.', true, /[\\\/]Ai([^\\\/]+)\.vue$/);
|
||||
if (contexts) {
|
||||
contexts.keys().map((e) => {
|
||||
components.push(contexts(e).default);
|
||||
Vue.component(contexts(e).default.name, contexts(e).default);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 判断是否是直接引入文件
|
||||
if (typeof window !== 'undefined' && window.Vue) {
|
||||
install(window.Vue);
|
||||
}
|
||||
|
||||
/**
|
||||
* 大屏组件数据类
|
||||
*/
|
||||
export class DvCompData {
|
||||
static types = {
|
||||
staticData: "静态数据", dynamicData: "动态数据", apiData: "接口数据", htmlData: "HTML数据"
|
||||
}
|
||||
|
||||
constructor(type, dataConfig = {}, instance) {
|
||||
this.instance = instance
|
||||
this.type = type
|
||||
this.params = dataConfig
|
||||
}
|
||||
|
||||
getData() {
|
||||
return this.type == 'staticData' ? this.getStaticData() :
|
||||
this.type == 'htmlData' ? this.getStaticData() :
|
||||
this.type == 'dynamicData' ? this.getDynamicData() :
|
||||
this.type == 'apiData' ? this.getApiData() : []
|
||||
}
|
||||
|
||||
getDynamicData() {
|
||||
const {sourceDataId: id} = this.params
|
||||
return id ? this.getAsyncData(`/app/appdiylargescreen/statisticsByLsid?id=${id}`) : Promise.reject("未获取到数据源id")
|
||||
}
|
||||
|
||||
getStaticData() {
|
||||
const {staticData} = this.params
|
||||
return new Promise((resolve, reject) => {
|
||||
staticData ? resolve(staticData) : reject("未获取到静态数据")
|
||||
})
|
||||
}
|
||||
|
||||
getApiData() {
|
||||
const {api} = this.params
|
||||
return api ? this.getAsyncData(api) : Promise.reject("未获取到api")
|
||||
}
|
||||
|
||||
getAsyncData(api) {
|
||||
return this.instance.post(api).then(res => {
|
||||
if (res?.data) {
|
||||
const list = res.data,
|
||||
firstRecord = list?.[0] || {},
|
||||
keys = Object.keys(firstRecord)
|
||||
let meta = []
|
||||
if (['AiDvTable', 'table'].includes(this.params.type)) {
|
||||
meta = keys.map(v => {
|
||||
let obj = {}
|
||||
list.forEach((item, index) => {
|
||||
obj[`v${index}`] = item[v]
|
||||
})
|
||||
return {row: v, ...obj}
|
||||
})
|
||||
} else if (this.params.type === 'summary') {
|
||||
if (this.params.display === 'summary9') {
|
||||
meta = res.data
|
||||
} else {
|
||||
meta = keys.map(key => ({key, value: firstRecord[key]}))
|
||||
}
|
||||
} else if (this.type === 'dynamicData' && !this.params.dataX && this.params.dataY?.length <= 0) {
|
||||
meta = keys.map(key => ({key, value: firstRecord[key]}))
|
||||
} else {
|
||||
if (this.params.dataX && this.params.dataY.length) {
|
||||
list.forEach(i => {
|
||||
let obj = {}
|
||||
this.params.dataY.forEach(v => obj[v] = i[v])
|
||||
meta.push({
|
||||
[this.params.dataX]: i[this.params.dataX], ...obj
|
||||
})
|
||||
})
|
||||
} else {
|
||||
meta = res.data
|
||||
}
|
||||
}
|
||||
return meta
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
// 导出的对象必须具有 install，才能被 Vue.use() 方法安装
|
||||
install,
|
||||
// 以下组件列表
|
||||
...components
|
||||
};
|
||||
139
ui/dv/layout/AiDvDisplay/AiDvDisplay.vue
Normal file
139
ui/dv/layout/AiDvDisplay/AiDvDisplay.vue
Normal file
@@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<section class="AiDvDisplay">
|
||||
<div class="display-top">
|
||||
<img class="left" src="https://cdn.cunwuyun.cn/dvcp/dv/img/display-icon.svg">
|
||||
<h2>{{ title }}</h2>
|
||||
<img class="right" src="https://cdn.cunwuyun.cn/dvcp/dv/img/display-icon.svg">
|
||||
</div>
|
||||
<div class="displayPanel fill">
|
||||
<div class="animation abs-center">
|
||||
<component class="item" v-for="(op,i) in list" :key="i" :is="item" v-bind="op" :style="{transform:getPos(i)}"/>
|
||||
</div>
|
||||
<component class="content-background abs-center" :is="type"/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Display0 from './components/Display0'
|
||||
import DisplayItem from "./components/displayItem";
|
||||
|
||||
export default {
|
||||
name: 'AiDvDisplay',
|
||||
components: {DisplayItem, Display0},
|
||||
props: {
|
||||
type: {default: 'display0'},
|
||||
item: {default: 'DisplayItem'},
|
||||
title: {
|
||||
default: '数据统计'
|
||||
},
|
||||
list: {default: () => []},
|
||||
},
|
||||
methods: {
|
||||
getPos(i) {
|
||||
let unit = this.list.length > 0 ? 2 * Math.PI / this.list.length : 0,
|
||||
corner = this.list.length > 0 ? 360 / this.list.length : 0
|
||||
return `translateZ(${250 * Math.cos(unit * i)}px) translateX(${250 * Math.sin(unit * i)}px) rotateY(${corner * i}deg)`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AiDvDisplay {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.abs-center {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.display-top {
|
||||
position: relative;
|
||||
width: 840px;
|
||||
background-image: url(asset/display-top.svg);
|
||||
background-size: 1420px 142px;
|
||||
background-position: center;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
||||
.left {
|
||||
position: absolute;
|
||||
left: 280px;
|
||||
top: 50%;
|
||||
z-index: 1;
|
||||
width: 35px;
|
||||
height: 22px;
|
||||
background-image: url(asset/display-icon.svg);
|
||||
background-size: 100% 100%;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
|
||||
.right {
|
||||
position: absolute;
|
||||
right: 280px;
|
||||
top: 50%;
|
||||
z-index: 1;
|
||||
width: 35px;
|
||||
height: 22px;
|
||||
background-image: url(asset/display-icon.svg);
|
||||
background-size: 100% 100%;
|
||||
transform: translate(0, -50%) rotate(180deg);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
line-height: 75px;
|
||||
margin: 0;
|
||||
font-size: 36px;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0px 4px 20px #345FFF;
|
||||
background: linear-gradient(180deg, #FFFFFF 0%, #A1E4FF 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.displayPanel {
|
||||
position: relative;
|
||||
transform-style: preserve-3d;
|
||||
|
||||
.animation {
|
||||
animation: rotate3D 30s infinite linear;
|
||||
transform-style: preserve-3d;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
margin-top: -50px;
|
||||
|
||||
&:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
position: absolute;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
}
|
||||
|
||||
.content-background {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate3D {
|
||||
from {
|
||||
transform: translate(-50%, -50%) rotateX(-10deg) rotateY(0deg);
|
||||
}
|
||||
to {
|
||||
transform: translate(-50%, -50%) rotateX(-10deg) rotateY(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
25
ui/dv/layout/AiDvDisplay/asset/display-icon.svg
Normal file
25
ui/dv/layout/AiDvDisplay/asset/display-icon.svg
Normal file
@@ -0,0 +1,25 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="35px" height="22px" viewBox="0 0 35 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>形状结合</title>
|
||||
<defs>
|
||||
<path d="M1072,220 L1072,228 L1068,224 L1072,220 Z M1064,220 L1064,228 L1060,224 L1064,220 Z M1056,220 L1056,228 L1052,224 L1056,220 Z" id="path-1"></path>
|
||||
<filter x="-60.0%" y="-150.0%" width="220.0%" height="400.0%" filterUnits="objectBoundingBox" id="filter-2">
|
||||
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.760001846 0 0 0 0 0.291006098 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
<filter x="-50.0%" y="-125.0%" width="200.0%" height="350.0%" filterUnits="objectBoundingBox" id="filter-3">
|
||||
<feGaussianBlur stdDeviation="2" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
|
||||
<feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
|
||||
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
|
||||
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.97961238 0 0 0 0 0.9078125 0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="钟祥大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="形状结合" transform="translate(-1045.000000, -213.000000)">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
|
||||
<use fill="#FFC143" fill-rule="evenodd" xlink:href="#path-1"></use>
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-1"></use>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
36
ui/dv/layout/AiDvDisplay/asset/display-top.svg
Normal file
36
ui/dv/layout/AiDvDisplay/asset/display-top.svg
Normal file
@@ -0,0 +1,36 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="1478px" height="142px" viewBox="0 0 1478 142" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>编组 2</title>
|
||||
<defs>
|
||||
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-1">
|
||||
<stop stop-color="#5A86FF" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#5AACFF" offset="36.7624563%"></stop>
|
||||
<stop stop-color="#7EEFFF" offset="50.0376124%"></stop>
|
||||
<stop stop-color="#5AACFF" offset="62.9709649%"></stop>
|
||||
<stop stop-color="#5A86FF" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<path d="M547,0.25 C556.749607,0.25 565.858022,4.76380868 571.818048,12.456132 L572.118303,12.85 C577.460114,19.9724141 585.628339,24.4148226 594.493503,25.038944 L594.977736,25.069194 L800,39.9977736 L594.814342,27.814741 C585.045723,27.2819072 576.001062,22.5266807 570.024678,14.8021845 L569.718303,14.4 C564.430381,7.34943641 556.184331,3.14910303 547.389942,3.00389299 L547,3 C483.876874,3 434.876874,3 400,3 C365.099096,3 316.099096,3 253,3 C244.186796,3 235.797203,7.07663928 230.404401,14.0250247 L230.118303,14.4 C224.248419,22.2265123 215.269839,27.1053605 205.52688,27.7834215 L205.022264,27.814741 L0,39.9977736 L204.858871,25.069194 C213.748674,24.5842957 221.980256,20.260414 227.424142,13.235831 L227.718303,12.85 C233.568068,5.05031402 242.693181,0.406510872 252.423056,0.253884 L253,0.25 C316.068383,0.0833333333 365.068383,3.55271368e-15 400,3.55271368e-15 C434.846161,3.55271368e-15 483.846161,0.0833333333 547,0.25 Z" id="path-2"></path>
|
||||
<filter x="-45.4%" y="-147.5%" width="190.9%" height="479.4%" filterUnits="objectBoundingBox" id="filter-3">
|
||||
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
|
||||
<feOffset dx="0" dy="8" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="20" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0.254665854 0 0 0 0 0.715268342 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
<linearGradient x1="0%" y1="49.1111111%" x2="100%" y2="50%" id="linearGradient-4">
|
||||
<stop stop-color="#0085FF" stop-opacity="0.502840909" offset="0%"></stop>
|
||||
<stop stop-color="#0085FF" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="钟祥大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="公共招聘" transform="translate(-221.000000, -146.000000)">
|
||||
<g id="编组-2" transform="translate(560.000000, 180.000000)">
|
||||
<g id="路径-3备份" fill-rule="nonzero">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
|
||||
<use fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
|
||||
</g>
|
||||
<path d="M190.442478,46.7350415 L194.690265,47.0710935 L200,54 L195.752212,53.663948 L190.442478,46.7350415 Z M181.946903,46.0629376 L186.19469,46.3989895 L191.504425,53.3278961 L187.256637,52.9918441 L181.946903,46.0629376 Z M173.451327,45.3919885 L177.699115,45.7280404 L183.00885,52.656947 L178.761062,52.320895 L173.451327,45.3919885 Z M164.955752,44.7198845 L169.20354,45.0559365 L174.513274,51.984843 L170.265487,51.6487911 L164.955752,44.7198845 Z M156.460177,44.0489354 L160.707965,44.3849874 L166.017699,51.3138939 L161.769912,50.9778419 L156.460177,44.0489354 Z M147.964602,43.3768315 L152.212389,43.7128834 L157.522124,50.64179 L153.274336,50.305738 L147.964602,43.3768315 Z M139.469027,42.7047275 L143.716814,43.0407795 L149.026549,49.969686 L144.778761,49.6336341 L139.469027,42.7047275 Z M130.973451,42.0326236 L135.221239,42.3686756 L140.530973,49.2975821 L136.283186,48.9615301 L130.973451,42.0326236 Z M122.477876,41.3605197 L126.725664,41.6965716 L132.035398,48.6254782 L127.787611,48.2894262 L122.477876,41.3605197 Z M113.982301,40.6884157 L118.230088,41.0244677 L123.539823,47.9533742 L119.292035,47.6173223 L113.982301,40.6884157 Z M105.486726,40.0163118 L109.734513,40.3523638 L115.044248,47.2812703 L110.79646,46.9452183 L105.486726,40.0163118 Z M96.9911504,39.3442079 L101.238938,39.6802598 L106.548673,46.6091664 L102.300885,46.2731144 L96.9911504,39.3442079 Z M88.4955752,38.6721039 L92.7433628,39.0081559 L98.0530973,45.9370624 L93.8053097,45.6010105 L88.4955752,38.6721039 Z M80,38 L84.2477876,38.336052 L89.5575221,45.2649585 L85.3097345,44.9289065 L80,38 Z" id="形状" fill="url(#linearGradient-4)" transform="translate(140.000000, 46.000000) scale(-1, 1) translate(-140.000000, -46.000000) "></path>
|
||||
<path d="M710.442478,46.7350415 L714.690265,47.0710935 L720,54 L715.752212,53.663948 L710.442478,46.7350415 Z M701.946903,46.0629376 L706.19469,46.3989895 L711.504425,53.3278961 L707.256637,52.9918441 L701.946903,46.0629376 Z M693.451327,45.3919885 L697.699115,45.7280404 L703.00885,52.656947 L698.761062,52.320895 L693.451327,45.3919885 Z M684.955752,44.7198845 L689.20354,45.0559365 L694.513274,51.984843 L690.265487,51.6487911 L684.955752,44.7198845 Z M676.460177,44.0489354 L680.707965,44.3849874 L686.017699,51.3138939 L681.769912,50.9778419 L676.460177,44.0489354 Z M667.964602,43.3768315 L672.212389,43.7128834 L677.522124,50.64179 L673.274336,50.305738 L667.964602,43.3768315 Z M659.469027,42.7047275 L663.716814,43.0407795 L669.026549,49.969686 L664.778761,49.6336341 L659.469027,42.7047275 Z M650.973451,42.0326236 L655.221239,42.3686756 L660.530973,49.2975821 L656.283186,48.9615301 L650.973451,42.0326236 Z M642.477876,41.3605197 L646.725664,41.6965716 L652.035398,48.6254782 L647.787611,48.2894262 L642.477876,41.3605197 Z M633.982301,40.6884157 L638.230088,41.0244677 L643.539823,47.9533742 L639.292035,47.6173223 L633.982301,40.6884157 Z M625.486726,40.0163118 L629.734513,40.3523638 L635.044248,47.2812703 L630.79646,46.9452183 L625.486726,40.0163118 Z M616.99115,39.3442079 L621.238938,39.6802598 L626.548673,46.6091664 L622.300885,46.2731144 L616.99115,39.3442079 Z M608.495575,38.6721039 L612.743363,39.0081559 L618.053097,45.9370624 L613.80531,45.6010105 L608.495575,38.6721039 Z M600,38 L604.247788,38.336052 L609.557522,45.2649585 L605.309735,44.9289065 L600,38 Z" id="形状" fill="url(#linearGradient-4)"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.4 KiB |
34
ui/dv/layout/AiDvDisplay/asset/displayItem-bg.svg
Normal file
34
ui/dv/layout/AiDvDisplay/asset/displayItem-bg.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.4 KiB |
34
ui/dv/layout/AiDvDisplay/asset/displayItem-bg1.svg
Normal file
34
ui/dv/layout/AiDvDisplay/asset/displayItem-bg1.svg
Normal file
@@ -0,0 +1,34 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="128px" height="128px" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>编组 3</title>
|
||||
<defs>
|
||||
<linearGradient x1="100%" y1="0%" x2="0%" y2="100%" id="linearGradient-1">
|
||||
<stop stop-color="#00DDF2" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#00E0C9" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="linearGradient-2">
|
||||
<stop stop-color="#FFE457" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#FFDC2C" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="linearGradient-3">
|
||||
<stop stop-color="#FFDC2C" offset="0%"></stop>
|
||||
<stop stop-color="#FFE457" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="100%" y1="0%" x2="0%" y2="100%" id="linearGradient-4">
|
||||
<stop stop-color="#00E0C9" offset="0%"></stop>
|
||||
<stop stop-color="#00DDF2" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="农产品推荐" transform="translate(-896.000000, -416.000000)" fill-rule="nonzero">
|
||||
<g id="编组-13" transform="translate(880.000000, 400.000000)">
|
||||
<g id="编组-3" transform="translate(22.000000, 22.000000)">
|
||||
<path d="M122,58 C122,92.9927617 93.9164341,121.426255 59.058357,121.991426 L58,122 L58,110 C86.4316189,110 109.533832,87.1821027 109.993033,58.8599151 L110,58 L122,58 Z" id="路径" fill="url(#linearGradient-1)"></path>
|
||||
<path d="M58,-6 C92.9927617,-6 121.426255,22.0835659 121.991426,56.941643 L122,58 L110,58 C110,29.5683811 87.1821027,6.46616762 58.8599151,6.00696651 L58,6 L58,-6 Z" id="路径" fill="url(#linearGradient-2)"></path>
|
||||
<path d="M6,58 C6,86.4316189 28.8178973,109.533832 57.1400849,109.993033 L58,110 L58,122 C23.0072383,122 -5.42625523,93.9164341 -5.99142583,59.058357 L-6,58 L6,58 Z" id="路径" fill="url(#linearGradient-3)"></path>
|
||||
<path d="M58,-6 L58,6 C29.5683811,6 6.46616762,28.8178973 6.00696651,57.1400849 L6,58 L-6,58 C-6,23.0072383 22.0835659,-5.42625523 56.941643,-5.99142583 L58,-6 Z" id="路径" fill="url(#linearGradient-4)"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
50
ui/dv/layout/AiDvDisplay/components/Display0.vue
Normal file
50
ui/dv/layout/AiDvDisplay/components/Display0.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="display0">
|
||||
<div class="display0-container">
|
||||
<div class="display0-content">
|
||||
<img class="leftBg" src="https://cdn.cunwuyun.cn/dvcp/dv/img/display0-left.png">
|
||||
<img class="contentBg" src="https://cdn.cunwuyun.cn/dvcp/dv/img/display0-bg.png" alt=""/>
|
||||
<img class="leftBg" src="https://cdn.cunwuyun.cn/dvcp/dv/img/display0-left.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'display0',
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.display0 {
|
||||
//position: relative;
|
||||
width: 840px;
|
||||
height: 465px;
|
||||
|
||||
.display0-content {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 465px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-size: cover;
|
||||
|
||||
|
||||
.leftBg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
||||
&:last-of-type {
|
||||
left: unset;
|
||||
right: 0;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
.contentBg{
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
64
ui/dv/layout/AiDvDisplay/components/displayItem.vue
Normal file
64
ui/dv/layout/AiDvDisplay/components/displayItem.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<section class="displayItem">
|
||||
<span class="num" v-text="value"/>
|
||||
<span v-text="label"/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "displayItem",
|
||||
props: {
|
||||
label: {default: "标题"},
|
||||
value: {default: 0},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.displayItem {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
line-height: 26px;
|
||||
position: relative;
|
||||
background-image: url("./../asset/displayItem-bg.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
content: " ";
|
||||
background-image: url("./../asset/displayItem-bg1.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
animation: rotate 4s infinite linear;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-family: DIN;
|
||||
font-size: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
82
ui/dv/layout/AiDvPanel/AiDvPanel.vue
Normal file
82
ui/dv/layout/AiDvPanel/AiDvPanel.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<section class="AiDvPanel">
|
||||
<component :is="border" :title="title" v-if="border" :theme="theme">
|
||||
<template v-if="$slots.title" #title>
|
||||
<slot name="title"/>
|
||||
</template>
|
||||
<div :style="{padding}" class="content">
|
||||
<slot/>
|
||||
</div>
|
||||
</component>
|
||||
<div v-else :style="{padding}" class="content">
|
||||
<slot style="width: 100%; height: 100%;"/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Border1 from "./borders/border1";
|
||||
import Border0 from "./borders/border0";
|
||||
import Border2 from "./borders/border2";
|
||||
import Border3 from "./borders/border3";
|
||||
import Border4 from "./borders/border4";
|
||||
import Border5 from "./borders/border5";
|
||||
import border6 from "./borders/border6";
|
||||
import border7 from "./borders/border7";
|
||||
import border8 from "./borders/border8";
|
||||
import border9 from "./borders/border9";
|
||||
import border10 from "./borders/border10";
|
||||
import border11 from "./borders/border11";
|
||||
import border12 from "./borders/border12";
|
||||
import border13 from "./borders/border13";
|
||||
import Border14 from "./borders/border14.vue";
|
||||
import Border15 from "./borders/border15.vue";
|
||||
|
||||
export default {
|
||||
name: "AiDvPanel",
|
||||
components: {
|
||||
Border15,
|
||||
Border14,
|
||||
Border0,
|
||||
Border1,
|
||||
Border2,
|
||||
Border3,
|
||||
Border4,
|
||||
Border5,
|
||||
border6,
|
||||
border7,
|
||||
border8,
|
||||
border9,
|
||||
border10,
|
||||
border11,
|
||||
border12,
|
||||
border13
|
||||
},
|
||||
props: {
|
||||
title: {default: "请传入标题"},
|
||||
border: {default: "border0"},
|
||||
theme: {
|
||||
type: String,
|
||||
default: '0'
|
||||
},
|
||||
padding: {default: 0}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AiDvPanel {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
ui/dv/layout/AiDvPanel/asset/border10.png
Normal file
BIN
ui/dv/layout/AiDvPanel/asset/border10.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
ui/dv/layout/AiDvPanel/asset/border11.png
Normal file
BIN
ui/dv/layout/AiDvPanel/asset/border11.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
ui/dv/layout/AiDvPanel/asset/border12.png
Normal file
BIN
ui/dv/layout/AiDvPanel/asset/border12.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 592 B |
BIN
ui/dv/layout/AiDvPanel/asset/border13.png
Normal file
BIN
ui/dv/layout/AiDvPanel/asset/border13.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
25
ui/dv/layout/AiDvPanel/asset/border14-icon.svg
Normal file
25
ui/dv/layout/AiDvPanel/asset/border14-icon.svg
Normal file
@@ -0,0 +1,25 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="35px" height="22px" viewBox="0 0 35 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>形状结合</title>
|
||||
<defs>
|
||||
<path d="M1072,220 L1072,228 L1068,224 L1072,220 Z M1064,220 L1064,228 L1060,224 L1064,220 Z M1056,220 L1056,228 L1052,224 L1056,220 Z" id="path-1"></path>
|
||||
<filter x="-60.0%" y="-150.0%" width="220.0%" height="400.0%" filterUnits="objectBoundingBox" id="filter-2">
|
||||
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.760001846 0 0 0 0 0.291006098 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
<filter x="-50.0%" y="-125.0%" width="200.0%" height="350.0%" filterUnits="objectBoundingBox" id="filter-3">
|
||||
<feGaussianBlur stdDeviation="2" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
|
||||
<feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
|
||||
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
|
||||
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.97961238 0 0 0 0 0.9078125 0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="钟祥大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="形状结合" transform="translate(-1045.000000, -213.000000)">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
|
||||
<use fill="#FFC143" fill-rule="evenodd" xlink:href="#path-1"></use>
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-1"></use>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
36
ui/dv/layout/AiDvPanel/asset/border14.svg
Normal file
36
ui/dv/layout/AiDvPanel/asset/border14.svg
Normal file
@@ -0,0 +1,36 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="1478px" height="142px" viewBox="0 0 1478 142" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>编组 2</title>
|
||||
<defs>
|
||||
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-1">
|
||||
<stop stop-color="#5A86FF" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#5AACFF" offset="36.7624563%"></stop>
|
||||
<stop stop-color="#7EEFFF" offset="50.0376124%"></stop>
|
||||
<stop stop-color="#5AACFF" offset="62.9709649%"></stop>
|
||||
<stop stop-color="#5A86FF" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<path d="M547,0.25 C556.749607,0.25 565.858022,4.76380868 571.818048,12.456132 L572.118303,12.85 C577.460114,19.9724141 585.628339,24.4148226 594.493503,25.038944 L594.977736,25.069194 L800,39.9977736 L594.814342,27.814741 C585.045723,27.2819072 576.001062,22.5266807 570.024678,14.8021845 L569.718303,14.4 C564.430381,7.34943641 556.184331,3.14910303 547.389942,3.00389299 L547,3 C483.876874,3 434.876874,3 400,3 C365.099096,3 316.099096,3 253,3 C244.186796,3 235.797203,7.07663928 230.404401,14.0250247 L230.118303,14.4 C224.248419,22.2265123 215.269839,27.1053605 205.52688,27.7834215 L205.022264,27.814741 L0,39.9977736 L204.858871,25.069194 C213.748674,24.5842957 221.980256,20.260414 227.424142,13.235831 L227.718303,12.85 C233.568068,5.05031402 242.693181,0.406510872 252.423056,0.253884 L253,0.25 C316.068383,0.0833333333 365.068383,3.55271368e-15 400,3.55271368e-15 C434.846161,3.55271368e-15 483.846161,0.0833333333 547,0.25 Z" id="path-2"></path>
|
||||
<filter x="-45.4%" y="-147.5%" width="190.9%" height="479.4%" filterUnits="objectBoundingBox" id="filter-3">
|
||||
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
|
||||
<feOffset dx="0" dy="8" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="20" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0.254665854 0 0 0 0 0.715268342 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
<linearGradient x1="0%" y1="49.1111111%" x2="100%" y2="50%" id="linearGradient-4">
|
||||
<stop stop-color="#0085FF" stop-opacity="0.502840909" offset="0%"></stop>
|
||||
<stop stop-color="#0085FF" stop-opacity="0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="钟祥大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="公共招聘" transform="translate(-221.000000, -146.000000)">
|
||||
<g id="编组-2" transform="translate(560.000000, 180.000000)">
|
||||
<g id="路径-3备份" fill-rule="nonzero">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
|
||||
<use fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
|
||||
</g>
|
||||
<path d="M190.442478,46.7350415 L194.690265,47.0710935 L200,54 L195.752212,53.663948 L190.442478,46.7350415 Z M181.946903,46.0629376 L186.19469,46.3989895 L191.504425,53.3278961 L187.256637,52.9918441 L181.946903,46.0629376 Z M173.451327,45.3919885 L177.699115,45.7280404 L183.00885,52.656947 L178.761062,52.320895 L173.451327,45.3919885 Z M164.955752,44.7198845 L169.20354,45.0559365 L174.513274,51.984843 L170.265487,51.6487911 L164.955752,44.7198845 Z M156.460177,44.0489354 L160.707965,44.3849874 L166.017699,51.3138939 L161.769912,50.9778419 L156.460177,44.0489354 Z M147.964602,43.3768315 L152.212389,43.7128834 L157.522124,50.64179 L153.274336,50.305738 L147.964602,43.3768315 Z M139.469027,42.7047275 L143.716814,43.0407795 L149.026549,49.969686 L144.778761,49.6336341 L139.469027,42.7047275 Z M130.973451,42.0326236 L135.221239,42.3686756 L140.530973,49.2975821 L136.283186,48.9615301 L130.973451,42.0326236 Z M122.477876,41.3605197 L126.725664,41.6965716 L132.035398,48.6254782 L127.787611,48.2894262 L122.477876,41.3605197 Z M113.982301,40.6884157 L118.230088,41.0244677 L123.539823,47.9533742 L119.292035,47.6173223 L113.982301,40.6884157 Z M105.486726,40.0163118 L109.734513,40.3523638 L115.044248,47.2812703 L110.79646,46.9452183 L105.486726,40.0163118 Z M96.9911504,39.3442079 L101.238938,39.6802598 L106.548673,46.6091664 L102.300885,46.2731144 L96.9911504,39.3442079 Z M88.4955752,38.6721039 L92.7433628,39.0081559 L98.0530973,45.9370624 L93.8053097,45.6010105 L88.4955752,38.6721039 Z M80,38 L84.2477876,38.336052 L89.5575221,45.2649585 L85.3097345,44.9289065 L80,38 Z" id="形状" fill="url(#linearGradient-4)" transform="translate(140.000000, 46.000000) scale(-1, 1) translate(-140.000000, -46.000000) "></path>
|
||||
<path d="M710.442478,46.7350415 L714.690265,47.0710935 L720,54 L715.752212,53.663948 L710.442478,46.7350415 Z M701.946903,46.0629376 L706.19469,46.3989895 L711.504425,53.3278961 L707.256637,52.9918441 L701.946903,46.0629376 Z M693.451327,45.3919885 L697.699115,45.7280404 L703.00885,52.656947 L698.761062,52.320895 L693.451327,45.3919885 Z M684.955752,44.7198845 L689.20354,45.0559365 L694.513274,51.984843 L690.265487,51.6487911 L684.955752,44.7198845 Z M676.460177,44.0489354 L680.707965,44.3849874 L686.017699,51.3138939 L681.769912,50.9778419 L676.460177,44.0489354 Z M667.964602,43.3768315 L672.212389,43.7128834 L677.522124,50.64179 L673.274336,50.305738 L667.964602,43.3768315 Z M659.469027,42.7047275 L663.716814,43.0407795 L669.026549,49.969686 L664.778761,49.6336341 L659.469027,42.7047275 Z M650.973451,42.0326236 L655.221239,42.3686756 L660.530973,49.2975821 L656.283186,48.9615301 L650.973451,42.0326236 Z M642.477876,41.3605197 L646.725664,41.6965716 L652.035398,48.6254782 L647.787611,48.2894262 L642.477876,41.3605197 Z M633.982301,40.6884157 L638.230088,41.0244677 L643.539823,47.9533742 L639.292035,47.6173223 L633.982301,40.6884157 Z M625.486726,40.0163118 L629.734513,40.3523638 L635.044248,47.2812703 L630.79646,46.9452183 L625.486726,40.0163118 Z M616.99115,39.3442079 L621.238938,39.6802598 L626.548673,46.6091664 L622.300885,46.2731144 L616.99115,39.3442079 Z M608.495575,38.6721039 L612.743363,39.0081559 L618.053097,45.9370624 L613.80531,45.6010105 L608.495575,38.6721039 Z M600,38 L604.247788,38.336052 L609.557522,45.2649585 L605.309735,44.9289065 L600,38 Z" id="形状" fill="url(#linearGradient-4)"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.4 KiB |
23
ui/dv/layout/AiDvPanel/asset/border1Bg.svg
Normal file
23
ui/dv/layout/AiDvPanel/asset/border1Bg.svg
Normal file
@@ -0,0 +1,23 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="560px" height="280px" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>矩形备份 58</title>
|
||||
<defs>
|
||||
<polygon id="path-1" points="680 760 690 750 1230 750 1240 760 1240 1020 1230 1030 690 1030 680 1020"></polygon>
|
||||
<filter x="-2.7%" y="-5.4%" width="105.4%" height="110.7%" filterUnits="objectBoundingBox" id="filter-2">
|
||||
<feMorphology radius="10" operator="erode" in="SourceAlpha" result="shadowSpreadInner1"></feMorphology>
|
||||
<feGaussianBlur stdDeviation="10" in="shadowSpreadInner1" result="shadowBlurInner1"></feGaussianBlur>
|
||||
<feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
|
||||
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1"
|
||||
result="shadowInnerInner1"></feComposite>
|
||||
<feColorMatrix values="0 0 0 0 0.239634146 0 0 0 0 0.473717493 0 0 0 0 1 0 0 0 1 0" type="matrix"
|
||||
in="shadowInnerInner1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="钟祥大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.5">
|
||||
<g id="矩形备份-58" transform="translate(-680.000000, -750.000000)">
|
||||
<use fill="#0B2949" fill-rule="evenodd" xlink:href="#path-1"></use>
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
82
ui/dv/layout/AiDvPanel/asset/border1Title.svg
Normal file
82
ui/dv/layout/AiDvPanel/asset/border1Title.svg
Normal file
@@ -0,0 +1,82 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="166px" height="48px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>编组 8</title>
|
||||
<defs>
|
||||
<polygon id="path-1" points="1 0 165 0 165 31 155 40 11 40 1 31"></polygon>
|
||||
<filter x="-4.6%" y="-18.8%" width="109.1%" height="137.5%" filterUnits="objectBoundingBox" id="filter-2">
|
||||
<feMorphology radius="5" operator="erode" in="SourceAlpha" result="shadowSpreadInner1"></feMorphology>
|
||||
<feGaussianBlur stdDeviation="5" in="shadowSpreadInner1" result="shadowBlurInner1"></feGaussianBlur>
|
||||
<feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
|
||||
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
|
||||
<feColorMatrix values="0 0 0 0 0.0340090302 0 0 0 0 0.105477684 0 0 0 0 0.340155118 0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
|
||||
</filter>
|
||||
<polygon id="path-3" points="72 4 94 4 98 0 68 0"></polygon>
|
||||
<filter x="-20.0%" y="-150.0%" width="140.0%" height="400.0%" filterUnits="objectBoundingBox" id="filter-4">
|
||||
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.607194757 0 0 0 0 0.291006098 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
<filter x="-20.0%" y="-150.0%" width="140.0%" height="400.0%" filterUnits="objectBoundingBox" id="filter-5">
|
||||
<feGaussianBlur stdDeviation="2" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
|
||||
<feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
|
||||
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
|
||||
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.97961238 0 0 0 0 0.9078125 0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
|
||||
</filter>
|
||||
<polygon id="path-6" points="76 38 90 38 92 40 74 40"></polygon>
|
||||
<filter x="-33.3%" y="-300.0%" width="166.7%" height="700.0%" filterUnits="objectBoundingBox" id="filter-7">
|
||||
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.607194757 0 0 0 0 0.291006098 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
<filter x="-33.3%" y="-300.0%" width="166.7%" height="700.0%" filterUnits="objectBoundingBox" id="filter-8">
|
||||
<feGaussianBlur stdDeviation="2" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
|
||||
<feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
|
||||
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
|
||||
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.97961238 0 0 0 0 0.9078125 0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="钟祥大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="画板" transform="translate(-878.000000, -726.000000)">
|
||||
<g id="编组-8" transform="translate(878.000000, 730.000000)">
|
||||
<g id="矩形">
|
||||
<use fill-opacity="0.8" fill="#0B2949" fill-rule="evenodd" xlink:href="#path-1"></use>
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
|
||||
</g>
|
||||
<path d="M3,23 L1,20 L1,12.333 L0,11 L0,0 L30,0 L27,3 L17,3 L17,2 L11,2 L10,3 L3,3 L3,10 L5,10 L5,12 L3,12 L3,14 L5,14 L5,16 L3,16 L3,18 L5,18 L5,20 L3,20 L3,23 Z" id="形状结合" fill="#2B6EFF" fill-rule="nonzero"></path>
|
||||
<path d="M139,23 L137,20 L137,12.333 L136,11 L136,0 L166,0 L163,3 L153,3 L153,2 L147,2 L146,3 L139,3 L139,10 L141,10 L141,12 L139,12 L139,14 L141,14 L141,16 L139,16 L139,18 L141,18 L141,20 L139,20 L139,23 Z" id="形状结合备份" fill="#2B6EFF" fill-rule="nonzero" transform="translate(151.000000, 11.500000) scale(-1, 1) translate(-151.000000, -11.500000) "></path>
|
||||
<polygon id="矩形" fill="#51AAFF" points="38 0 42 0 40 2 36 2"></polygon>
|
||||
<polygon id="矩形备份-74" fill="#51AAFF" transform="translate(127.000000, 1.000000) scale(-1, 1) translate(-127.000000, -1.000000) " points="126 0 130 0 128 2 124 2"></polygon>
|
||||
<polygon id="矩形备份-64" fill="#51AAFF" points="32 0 36 0 34 2 30 2"></polygon>
|
||||
<polygon id="矩形备份-75" fill="#51AAFF" transform="translate(121.000000, 1.000000) scale(-1, 1) translate(-121.000000, -1.000000) " points="120 0 124 0 122 2 118 2"></polygon>
|
||||
<polygon id="矩形备份-61" fill="#51AAFF" points="44 0 48 0 46 2 42 2"></polygon>
|
||||
<polygon id="矩形备份-76" fill="#51AAFF" transform="translate(133.000000, 1.000000) scale(-1, 1) translate(-133.000000, -1.000000) " points="132 0 136 0 134 2 130 2"></polygon>
|
||||
<polygon id="矩形备份-62" fill="#2B6EFF" fill-rule="nonzero" points="50 0 66 0 69 3 47 3"></polygon>
|
||||
<polygon id="矩形备份-73" fill="#2B6EFF" fill-rule="nonzero" points="100 0 116 0 119 3 97 3"></polygon>
|
||||
<g id="矩形备份-63">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
|
||||
<use fill="#FFC143" fill-rule="evenodd" xlink:href="#path-3"></use>
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-3"></use>
|
||||
</g>
|
||||
<polygon id="矩形备份-68" fill="#2B6EFF" points="28 37 39 37 39 40 25 40"></polygon>
|
||||
<polygon id="矩形备份-79" fill="#2B6EFF" transform="translate(134.000000, 38.500000) scale(-1, 1) translate(-134.000000, -38.500000) " points="130 37 141 37 141 40 127 40"></polygon>
|
||||
<polygon id="矩形备份-70" fill="#2B6EFF" transform="translate(56.500000, 38.500000) scale(-1, -1) translate(-56.500000, -38.500000) " points="56 37 60 37 57 40 53 40"></polygon>
|
||||
<polygon id="矩形备份-81" fill="#2B6EFF" transform="translate(95.500000, 38.500000) scale(1, -1) translate(-95.500000, -38.500000) " points="95 37 99 37 96 40 92 40"></polygon>
|
||||
<polygon id="矩形备份-71" fill="#2B6EFF" transform="translate(63.500000, 38.500000) scale(-1, -1) translate(-63.500000, -38.500000) " points="63 37 67 37 64 40 60 40"></polygon>
|
||||
<polygon id="矩形备份-82" fill="#2B6EFF" transform="translate(102.500000, 38.500000) scale(1, -1) translate(-102.500000, -38.500000) " points="102 37 106 37 103 40 99 40"></polygon>
|
||||
<polygon id="矩形备份-72" fill="#2B6EFF" transform="translate(70.500000, 38.500000) scale(-1, -1) translate(-70.500000, -38.500000) " points="70 37 74 37 71 40 67 40"></polygon>
|
||||
<polygon id="矩形备份-83" fill="#2B6EFF" transform="translate(109.500000, 38.500000) scale(1, -1) translate(-109.500000, -38.500000) " points="109 37 113 37 110 40 106 40"></polygon>
|
||||
<polygon id="矩形备份-65" fill="#2B6EFF" fill-rule="nonzero" points="4 32 10 37 16 37 18 40 10 40 1 32 1 28 0 26.6037002 0 23 4 28"></polygon>
|
||||
<polygon id="矩形备份-77" fill="#2B6EFF" fill-rule="nonzero" transform="translate(157.000000, 31.500000) scale(-1, 1) translate(-157.000000, -31.500000) " points="152 32 158 37 164 37 166 40 158 40 149 32 149 28 148 26.6037002 148 23 152 28"></polygon>
|
||||
<rect id="矩形" fill="#2B6EFF" x="16" y="39" width="20" height="1"></rect>
|
||||
<rect id="矩形备份-78" fill="#2B6EFF" transform="translate(140.000000, 39.500000) scale(-1, 1) translate(-140.000000, -39.500000) " x="130" y="39" width="20" height="1"></rect>
|
||||
<polygon id="矩形备份-69" fill="#2B6EFF" points="38 39 51 39 50 40 38 40"></polygon>
|
||||
<polygon id="矩形备份-80" fill="#2B6EFF" transform="translate(121.500000, 39.500000) scale(-1, 1) translate(-121.500000, -39.500000) " points="115 39 128 39 127 40 115 40"></polygon>
|
||||
<g id="矩形">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-6"></use>
|
||||
<use fill="#FFC143" fill-rule="evenodd" xlink:href="#path-6"></use>
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-6"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.8 KiB |
BIN
ui/dv/layout/AiDvPanel/asset/border2Bottom.png
Normal file
BIN
ui/dv/layout/AiDvPanel/asset/border2Bottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
34
ui/dv/layout/AiDvPanel/asset/border2Title.svg
Normal file
34
ui/dv/layout/AiDvPanel/asset/border2Title.svg
Normal file
@@ -0,0 +1,34 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="580px" height="40px" viewBox="0 0 580 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>矩形</title>
|
||||
<defs>
|
||||
<rect id="path-1" x="40" y="740" width="580" height="40"></rect>
|
||||
<pattern id="pattern-2" width="12.0397351" height="12.0397351" x="27.9602649" y="727.960265" patternUnits="userSpaceOnUse">
|
||||
<use xlink:href="#image-3" transform="scale(0.250827815,0.250827815)"></use>
|
||||
</pattern>
|
||||
<image id="image-3" width="48" height="48" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAMKADAAQAAAABAAAAMAAAAADbN2wMAAABX0lEQVRoBe3Y7Q2CMBAGYGu3gOgOJrAQcRAHUXcwrsEcrFH7agpB+ex5cJfQH9ISvfO5xkjP5Hnudn445+5lWZ4xxZo4TJZlV2NMEeJwxbdpml6QxCc7JUlyqKrqGZJSroiDeIjLGd/6JEfuJJzx7VKV4kJYbK9mxBugGVEDtCJaAI2IH4A2RCdAE6IXoAUxCNCAGAVIR0wCSEZMBkhFzAJIRMwGSENEASQhogFSECSABAQZsDYCAIMvQR1rHYqs7x7ckJwKwOfXQKAr8dDYjQhn7D0q5xcF+jiYYk0cDv0l9IFCHM74W18oVLnrusRvYusLdVX++x7nTtR/ZJxJAOKKXwM4k4Qd4UC0ABoRPwBtiE6AJkQvQAtiEKABMQqQjpgEkIyYDJCKmAWQiJgNkIaIAkhCRAOkIEgACQgyYG0EAP84yLM976NAGH2P4ltf6FOf5rWvUrjfvCt+9h3/BX5SBuUP9sYWAAAAAElFTkSuQmCC"></image>
|
||||
<filter x="-0.3%" y="-5.0%" width="100.7%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
|
||||
<feOffset dx="0" dy="4" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
|
||||
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
|
||||
<feColorMatrix values="0 0 0 0 0.121683836 0 0 0 0 0.302967066 0 0 0 0 0.653362772 0 0 0 0.504234047 0" type="matrix" in="shadowInnerInner1" result="shadowMatrixInner1"></feColorMatrix>
|
||||
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetInner2"></feOffset>
|
||||
<feComposite in="shadowOffsetInner2" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner2"></feComposite>
|
||||
<feColorMatrix values="0 0 0 0 0.333333333 0 0 0 0 0.476619275 0 0 0 0 0.862745098 0 0 0 1 0" type="matrix" in="shadowInnerInner2" result="shadowMatrixInner2"></feColorMatrix>
|
||||
<feOffset dx="0" dy="-2" in="SourceAlpha" result="shadowOffsetInner3"></feOffset>
|
||||
<feComposite in="shadowOffsetInner3" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner3"></feComposite>
|
||||
<feColorMatrix values="0 0 0 0 0.22745098 0 0 0 0 0.344729535 0 0 0 0 0.588235294 0 0 0 0.250355114 0" type="matrix" in="shadowInnerInner3" result="shadowMatrixInner3"></feColorMatrix>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadowMatrixInner1"></feMergeNode>
|
||||
<feMergeNode in="shadowMatrixInner2"></feMergeNode>
|
||||
<feMergeNode in="shadowMatrixInner3"></feMergeNode>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="钟祥大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="矩形" transform="translate(-40.000000, -740.000000)">
|
||||
<use fill-opacity="0.2" fill="#004CA0" fill-rule="evenodd" xlink:href="#path-1"></use>
|
||||
<use fill-opacity="0.5" fill="url(#pattern-2)" fill-rule="evenodd" style="mix-blend-mode: multiply;" xlink:href="#path-1"></use>
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-1"></use>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
BIN
ui/dv/layout/AiDvPanel/asset/border3Title.png
Normal file
BIN
ui/dv/layout/AiDvPanel/asset/border3Title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
ui/dv/layout/AiDvPanel/asset/border7.png
Normal file
BIN
ui/dv/layout/AiDvPanel/asset/border7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
BIN
ui/dv/layout/AiDvPanel/asset/border8.png
Normal file
BIN
ui/dv/layout/AiDvPanel/asset/border8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
ui/dv/layout/AiDvPanel/asset/border9.png
Normal file
BIN
ui/dv/layout/AiDvPanel/asset/border9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
21
ui/dv/layout/AiDvPanel/asset/corner.svg
Normal file
21
ui/dv/layout/AiDvPanel/asset/corner.svg
Normal file
@@ -0,0 +1,21 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>路径备份</title>
|
||||
<defs>
|
||||
<polygon id="path-1" points="1826 14 1826 15 1821 15 1821 20 1820 20 1820 14"></polygon>
|
||||
<filter x="-150.0%" y="-150.0%" width="400.0%" height="400.0%" filterUnits="objectBoundingBox" id="filter-2">
|
||||
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
|
||||
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0.088934077 0 0 0 0 0.269903162 0 0 0 0 0.86962183 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="头部导航备份" transform="translate(-1814.000000, -8.000000)" fill-rule="nonzero">
|
||||
<g id="路径备份" transform="translate(1823.000000, 17.000000) scale(-1, 1) translate(-1823.000000, -17.000000) ">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
|
||||
<use fill="#E8F9FF" xlink:href="#path-1"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
1
ui/dv/layout/AiDvPanel/asset/dq.svg
Normal file
1
ui/dv/layout/AiDvPanel/asset/dq.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="180" height="40" viewBox="0 0 180 40"><defs><linearGradient id="a" x1="100%" x2="0%" y1="50%" y2="50%"><stop offset="0%" stop-color="#FF5244"/><stop offset="100%" stop-color="#D21600"/></linearGradient><linearGradient id="d" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#FFF6C7"/><stop offset="100%" stop-color="#FF9A02"/></linearGradient><filter id="c" width="170%" height="170%" x="-35%" y="-25%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="2"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0.457823822 0 0 0 0 0.0353836399 0 0 0 0 0.0353836399 0 0 0 0.5 0"/></filter><path id="b" d="M14.0068268,4.00341841 C19.1676737,5.93854789 22.2992804,12.1241478 19.6165546,17.1359344 L13.0698171,10.5587743 L15.5689049,8.05113932 L14.0059386,6.49580357 C13.1435377,7.34040354 11.7729399,7.52047681 10.8486002,7.14810955 L5.8726766,12.1267591 L8.69064405,14.9339591 L10.5689895,13.0633646 L17.1135326,19.6296095 C13.9108489,21.3881387 9.47146108,20.8339486 6.19504112,17.4306894 L4.60852179,19.0122006 C5.08399639,19.6710504 5.48226026,20.2679818 5.97736409,20.7685363 C5.93418188,20.8204223 5.79807822,20.9320541 5.79546587,20.9351093 C5.71214222,20.9215829 5.61356765,20.8893337 5.52588659,20.8893337 C4.6818088,20.8893337 4,21.6240357 4,22.4686514 C4,23.3119353 4.68835536,24 5.53242792,24 C6.3769498,24 7.09931278,23.3058249 7.09931278,22.4616793 C7.09931278,22.3631299 7.0770712,22.2733022 7.06004909,22.1804193 L7.30389669,21.941044 C11.0706294,24.4813878 15.1989851,24.797947 19.6409696,22.1398662 L21.4752551,23.9808072 L23.9861142,21.5041262 L22.140047,19.6387699 C27.4379223,11.6549703 20.3738238,3.81244048 14.0068268,4.00341841 L14.0068268,4.00341841 L14.0068268,4.00341841 Z"/></defs><g fill="none" fill-rule="evenodd"><path fill="#850100" d="M148,0 L148,20 L59.9048072,11.9285139 L10,13.9990592 C15.970231,4.66635305 27.2050908,0.226703614 43.7045795,0.680110841 C68.4538125,1.36022168 99.8326471,7.79622159 116.382143,8.89811079 C127.415141,9.6327036 137.954427,6.66666667 148,0 Z"/><path fill="url(#a)" d="M0,32.567 C0,30.6617245 0,28.1127921 0,24.9202028 C9.58415484,22.7190157 8.28549035,6.15276659 30.4031861,2.50814365 C52.5208819,-1.13647928 100.23732,16.019279 119.855503,16.019279 C132.934291,16.019279 145.385696,13.1031801 157.209716,7.27098241 L157.209716,22.1589448 C166.282732,22.9696483 173.879493,26.439 180,32.567 C168.804955,37.9116546 144.843267,40 124.922081,40 C105.000895,40 83.8242706,36.2095908 66.6700235,27.6117443 C49.5157764,19.0138977 29.8385713,12.4021534 20,21 C13.4409524,26.7318977 6.77428577,30.5875644 0,32.567 Z"/><g transform="translate(0 2)"><rect width="28" height="28" fill="#000" fill-rule="nonzero" opacity="0"/><use xlink:href="#b" fill="#000" filter="url(#c)"/><use xlink:href="#b" fill="url(#d)"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
1
ui/dv/layout/AiDvPanel/asset/gz.svg
Normal file
1
ui/dv/layout/AiDvPanel/asset/gz.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 12 KiB |
BIN
ui/dv/layout/AiDvPanel/asset/ic-badge.png
Normal file
BIN
ui/dv/layout/AiDvPanel/asset/ic-badge.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
21
ui/dv/layout/AiDvPanel/asset/sanjiaoxing.svg
Normal file
21
ui/dv/layout/AiDvPanel/asset/sanjiaoxing.svg
Normal file
@@ -0,0 +1,21 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="26px" height="36px" viewBox="0 0 26 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>矩形</title>
|
||||
<defs>
|
||||
<polygon id="path-1" points="606 756 610 760 606 764"></polygon>
|
||||
<filter x="-412.5%" y="-259.3%" width="956.1%" height="618.6%" filterUnits="objectBoundingBox" id="filter-2">
|
||||
<feMorphology radius="1.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
|
||||
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0.088934077 0 0 0 0 0.269903162 0 0 0 0 0.86962183 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="钟祥大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="画板" transform="translate(-595.000000, -742.000000)" fill-rule="nonzero">
|
||||
<g id="矩形" transform="translate(608.000000, 760.000000) scale(-1, 1) translate(-608.000000, -760.000000) ">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
|
||||
<use fill="#E8F9FF" xlink:href="#path-1"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
BIN
ui/dv/layout/AiDvPanel/asset/title-6-dj.png
Normal file
BIN
ui/dv/layout/AiDvPanel/asset/title-6-dj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
ui/dv/layout/AiDvPanel/asset/title6.png
Normal file
BIN
ui/dv/layout/AiDvPanel/asset/title6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
59
ui/dv/layout/AiDvPanel/asset/titleBg.svg
Normal file
59
ui/dv/layout/AiDvPanel/asset/titleBg.svg
Normal file
@@ -0,0 +1,59 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="528px" height="41px" viewBox="0 0 528 41" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>编组 2备份</title>
|
||||
<defs>
|
||||
<linearGradient x1="-1.11022302e-14%" y1="50%" x2="100%" y2="50%" id="linearGradient-1">
|
||||
<stop stop-color="#0085FF" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#0085FF" stop-opacity="0.502840909" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<polygon id="path-2" points="8 7 0 14 0 0"></polygon>
|
||||
<filter x="-150.0%" y="-85.7%" width="400.0%" height="271.4%" filterUnits="objectBoundingBox" id="filter-3">
|
||||
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.760001846 0 0 0 0 0.291006098 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
<filter x="-125.0%" y="-71.4%" width="350.0%" height="242.9%" filterUnits="objectBoundingBox" id="filter-4">
|
||||
<feGaussianBlur stdDeviation="2" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
|
||||
<feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
|
||||
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
|
||||
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.97961238 0 0 0 0 0.9078125 0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
|
||||
</filter>
|
||||
<polygon id="path-5" points="16 7 8 14 8 0"></polygon>
|
||||
<filter x="-150.0%" y="-85.7%" width="400.0%" height="271.4%" filterUnits="objectBoundingBox" id="filter-6">
|
||||
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.760001846 0 0 0 0 0.291006098 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
<filter x="-125.0%" y="-71.4%" width="350.0%" height="242.9%" filterUnits="objectBoundingBox" id="filter-7">
|
||||
<feGaussianBlur stdDeviation="2" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
|
||||
<feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
|
||||
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
|
||||
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.97961238 0 0 0 0 0.9078125 0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
|
||||
</filter>
|
||||
<linearGradient x1="-1.11022302e-14%" y1="50%" x2="100%" y2="50%" id="linearGradient-8">
|
||||
<stop stop-color="#0085FF" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#0085FF" stop-opacity="0.502840909" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="饼图" transform="translate(-32.000000, -121.000000)">
|
||||
<g id="编组-2备份" transform="translate(40.000000, 129.000000)">
|
||||
<polygon id="矩形" fill="url(#linearGradient-1)" points="1 9 273 9 255 27 1 27"></polygon>
|
||||
<g id="三角形" opacity="0.300000012">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
|
||||
<use fill="#FFC143" fill-rule="evenodd" xlink:href="#path-2"></use>
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
|
||||
</g>
|
||||
<g id="三角形备份">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
|
||||
<use fill="#FFC143" fill-rule="evenodd" xlink:href="#path-5"></use>
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-5"></use>
|
||||
</g>
|
||||
<polygon id="矩形" fill="#0085FF" opacity="0.25" points="278 13 520 13 520 21 270 21"></polygon>
|
||||
<polygon id="矩形" fill="#0085FF" opacity="0.100000001" points="270 21 520 21 520 29 262 29"></polygon>
|
||||
<polygon id="矩形" fill="url(#linearGradient-8)" points="278 13 398 13 390 21 270 21"></polygon>
|
||||
<polygon id="路径-3" fill="#0085FF" fill-rule="nonzero" opacity="0.5" points="520 11 520 13 278 13 258 33 1 33 1 31 257.17 31 277.18 11"></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.7 KiB |
42
ui/dv/layout/AiDvPanel/borders/border0.vue
Normal file
42
ui/dv/layout/AiDvPanel/borders/border0.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<section class="border0">
|
||||
<div class="title">
|
||||
<slot v-if="$slots.title" name="title"/>
|
||||
<b v-else v-text="title"/>
|
||||
</div>
|
||||
<div class="slot">
|
||||
<slot />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "border0",
|
||||
props: {title: String}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border0 {
|
||||
height: 100%;
|
||||
.title {
|
||||
padding-left: 30px;
|
||||
background-image: url("./../asset/titleBg.svg");
|
||||
background-repeat: no-repeat;
|
||||
height: 41px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
& > b {
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
line-height: 32px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.slot {
|
||||
height: calc(100% - 51px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
65
ui/dv/layout/AiDvPanel/borders/border1.vue
Normal file
65
ui/dv/layout/AiDvPanel/borders/border1.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<section class="border1">
|
||||
<dv-border-box1 :color="['#2B6EFF']">
|
||||
<div class="bg">
|
||||
<div class="header" v-text="title"/>
|
||||
<div class="slot">
|
||||
<slot/>
|
||||
</div>
|
||||
</div>
|
||||
</dv-border-box1>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {borderBox1} from '@jiaminghi/data-view'
|
||||
import Vue from "vue";
|
||||
|
||||
Vue.use(borderBox1)
|
||||
|
||||
export default {
|
||||
name: "border1",
|
||||
props: {title: String}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border1 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
.bg {
|
||||
position: relative;
|
||||
margin: 15px 20px;
|
||||
background-image: url("./../asset/border1Bg.svg");
|
||||
background-size: 100% calc(100%);
|
||||
background-repeat: no-repeat;
|
||||
padding: 30px 20px 0 20px;
|
||||
box-sizing: border-box;
|
||||
height: calc(100% - 40px);
|
||||
|
||||
.header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
height: 48px;
|
||||
min-width: 166px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
background-image: url("./../asset/border1Title.svg");
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.slot {
|
||||
height: calc(100% - 20px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
63
ui/dv/layout/AiDvPanel/borders/border10.vue
Normal file
63
ui/dv/layout/AiDvPanel/borders/border10.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<section class="border10" :class="'border10-' + theme">
|
||||
<div class="border10-title">
|
||||
<!-- <img src="../asset/ic-badge.png" v-if="theme === '1'" /> -->
|
||||
<h2>{{ title }}</h2>
|
||||
</div>
|
||||
<div class="slot">
|
||||
<slot/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'border10',
|
||||
|
||||
props: ['title', 'theme']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border10 {
|
||||
height: 100%;
|
||||
|
||||
.border10-title {
|
||||
display: flex;
|
||||
height: 41px;
|
||||
padding: 0 23px;
|
||||
box-sizing: border-box;
|
||||
background-image: url(../asset/border10.png);
|
||||
background-size: 100% 41px;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
h2 {
|
||||
position: relative;
|
||||
top: -3px;
|
||||
font-size: 24px;
|
||||
color: #E2EBF1;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&.border10-1 .border10-title {
|
||||
// background-image: url(../asset/border8.png);
|
||||
// background-position: bottom;
|
||||
|
||||
&:after {
|
||||
background: #FFA086;
|
||||
}
|
||||
}
|
||||
|
||||
.slot {
|
||||
height: calc(100% - 41px);
|
||||
padding-top: 19px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
64
ui/dv/layout/AiDvPanel/borders/border11.vue
Normal file
64
ui/dv/layout/AiDvPanel/borders/border11.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<section class="border11" :class="'border11-' + theme">
|
||||
<div class="border11-title">
|
||||
<!-- <img src="../asset/ic-badge.png" v-if="theme === '1'" /> -->
|
||||
<h2>{{ title }}</h2>
|
||||
</div>
|
||||
<div class="slot">
|
||||
<slot/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'border11',
|
||||
|
||||
props: ['title', 'theme']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border11 {
|
||||
height: 100%;
|
||||
|
||||
.border11-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
padding: 0 66px;
|
||||
box-sizing: border-box;
|
||||
background-image: url(../asset/border11.png);
|
||||
background-size: 100% 50px;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 2px;
|
||||
text-shadow: 0 0 10px #0671E2;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&.border11-1 .border11-title {
|
||||
// background-image: url(../asset/border8.png);
|
||||
// background-position: bottom;
|
||||
|
||||
&:after {
|
||||
background: #FFA086;
|
||||
}
|
||||
}
|
||||
|
||||
.slot {
|
||||
height: calc(100% - 50px);
|
||||
padding-top: 19px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
64
ui/dv/layout/AiDvPanel/borders/border12.vue
Normal file
64
ui/dv/layout/AiDvPanel/borders/border12.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<section class="border12" :class="'border12-' + theme">
|
||||
<div class="border12-title">
|
||||
<!-- <img src="../asset/ic-badge.png" v-if="theme === '1'" /> -->
|
||||
<h2>{{ title }}</h2>
|
||||
</div>
|
||||
<div class="slot">
|
||||
<slot/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'border12',
|
||||
|
||||
props: ['title', 'theme']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border12 {
|
||||
height: 100%;
|
||||
|
||||
.border12-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
padding: 0 39px;
|
||||
box-sizing: border-box;
|
||||
background-image: url(../asset/border12.png);
|
||||
background-size: 100% 50px;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
h2 {
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
letter-spacing: 2px;
|
||||
text-shadow: 0 2px 24px #1b7ef2e8;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&.border12-1 .border12-title {
|
||||
// background-image: url(../asset/border8.png);
|
||||
// background-position: bottom;
|
||||
|
||||
&:after {
|
||||
background: #FFA086;
|
||||
}
|
||||
}
|
||||
|
||||
.slot {
|
||||
height: calc(100% - 50px);
|
||||
padding-top: 19px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
63
ui/dv/layout/AiDvPanel/borders/border13.vue
Normal file
63
ui/dv/layout/AiDvPanel/borders/border13.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<section class="border13" :class="'border13-' + theme">
|
||||
<div class="border13-title">
|
||||
<!-- <img src="../asset/ic-badge.png" v-if="theme === '1'" /> -->
|
||||
<h2>{{ title }}</h2>
|
||||
</div>
|
||||
<div class="slot">
|
||||
<slot/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'border13',
|
||||
|
||||
props: ['title', 'theme']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border13 {
|
||||
height: 100%;
|
||||
background: #7583900f;
|
||||
|
||||
.border13-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 68px;
|
||||
padding: 0 54px;
|
||||
box-sizing: border-box;
|
||||
background-image: url(../asset/border13.png);
|
||||
background-size: 100% 68px;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&.border13-1 .border13-title {
|
||||
// background-image: url(../asset/border8.png);
|
||||
// background-position: bottom;
|
||||
|
||||
&:after {
|
||||
background: #FFA086;
|
||||
}
|
||||
}
|
||||
|
||||
.slot {
|
||||
height: calc(100% - 68px);
|
||||
padding-top: 19px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
64
ui/dv/layout/AiDvPanel/borders/border14.vue
Normal file
64
ui/dv/layout/AiDvPanel/borders/border14.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<section class="border14">
|
||||
<div class="border14-title">
|
||||
<div class="icon left"/>
|
||||
<h2>{{ title }}</h2>
|
||||
<div class="icon"/>
|
||||
</div>
|
||||
<div class="slot">
|
||||
<slot/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'border14',
|
||||
props: ['title', 'theme']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border14 {
|
||||
height: 100%;
|
||||
background-image: linear-gradient(180deg, rgba(61, 88, 161, 0) 0%, rgba(13, 36, 119, 0.9) 99%);
|
||||
background-size: 100% 100%;
|
||||
background-color: rgba(#0D2477, .3);
|
||||
|
||||
.border14-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 68px;
|
||||
box-sizing: border-box;
|
||||
background-image: url(../asset/border14.svg);
|
||||
background-size: 1478px 142px;
|
||||
background-repeat: no-repeat;
|
||||
padding-top: 30px;
|
||||
background-position: center -20px;
|
||||
|
||||
h2 {
|
||||
font-size: 26px;
|
||||
color: #09F0FE;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 8px;
|
||||
background-image: url("../asset/border14-icon.svg");
|
||||
background-size: 35px 22px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
||||
&.left {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.slot {
|
||||
height: calc(100% - 68px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
34
ui/dv/layout/AiDvPanel/borders/border15.vue
Normal file
34
ui/dv/layout/AiDvPanel/borders/border15.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<section class="border15">
|
||||
<h2>{{ title }}</h2>
|
||||
<div class="slot">
|
||||
<slot/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'border15',
|
||||
props: ['title', 'theme']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border15 {
|
||||
height: 100%;
|
||||
|
||||
h2 {
|
||||
font-size: 14px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
padding: 0 10px;
|
||||
background-image: linear-gradient(270deg, rgba(31, 67, 102, 0), rgba(31, 78, 102, 0.4));
|
||||
margin-bottom: 12px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.slot {
|
||||
height: calc(100% - 30px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
115
ui/dv/layout/AiDvPanel/borders/border2.vue
Normal file
115
ui/dv/layout/AiDvPanel/borders/border2.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<section class="border2">
|
||||
<div class="corner left-bottom"></div>
|
||||
<div class="corner right-bottom"></div>
|
||||
<div class="bg">
|
||||
<div class="header">
|
||||
<img src="https://cdn.cunwuyun.cn/dvcp/dv/img/sanjiaoxing.svg" />
|
||||
<h2>{{ title }}</h2>
|
||||
<img class="header-right" src="https://cdn.cunwuyun.cn/dvcp/dv/img/sanjiaoxing.svg" />
|
||||
</div>
|
||||
<div class="slot">
|
||||
<slot/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'border2',
|
||||
props: {title: String},
|
||||
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border2 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, rgba(7, 29, 62, 0.2) 0%, rgba(15, 69, 124, 0.2) 100%);
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.corner {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
position: absolute;
|
||||
display: block;
|
||||
background-image: url(./../asset/corner.svg);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.corner.left-top {
|
||||
left: -6px;
|
||||
top: -6px;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
.corner.right-top {
|
||||
right: -6px;
|
||||
top: -6px;
|
||||
}
|
||||
.corner.left-bottom {
|
||||
left: -6px;
|
||||
bottom: -6px;
|
||||
transform: rotateX(180deg) rotateY(180deg);
|
||||
}
|
||||
.corner.right-bottom {
|
||||
right: -6px;
|
||||
bottom: -6px;
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
.bg {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
background-size: 100% 100%;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
background: url(./../asset/border2Title.svg) no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
.header-right {
|
||||
position: relative;
|
||||
transform-origin: center;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.slot {
|
||||
height: calc(100% - 40px);
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
140
ui/dv/layout/AiDvPanel/borders/border3.vue
Normal file
140
ui/dv/layout/AiDvPanel/borders/border3.vue
Normal file
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<section class="border3">
|
||||
<div class="bg">
|
||||
<div class="bg-wrapper"></div>
|
||||
<div class="header">
|
||||
<div class="header-border">
|
||||
<div class="point"></div>
|
||||
<div class="point"></div>
|
||||
<div class="point"></div>
|
||||
</div>
|
||||
<h2>{{ title }}</h2>
|
||||
<div class="header-border">
|
||||
<div class="point"></div>
|
||||
<div class="point"></div>
|
||||
<div class="point"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="bottom-left">
|
||||
<div class="point"></div>
|
||||
<div class="point"></div>
|
||||
<div class="point"></div>
|
||||
</div>
|
||||
<div class="bottom-right">
|
||||
<div class="point"></div>
|
||||
<div class="point"></div>
|
||||
<div class="point"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slot">
|
||||
<slot/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'border3',
|
||||
props: {title: String}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border3 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bg {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
.bg-wrapper {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
width: 100%;
|
||||
height: calc(100% - 12px);
|
||||
background: rgba(11, 24, 73, 0.3);
|
||||
}
|
||||
|
||||
.bottom-left, .bottom-right, .header-border {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
width: 24%;
|
||||
height: 1px;
|
||||
|
||||
.point {
|
||||
width: 4px;
|
||||
height: 1px;
|
||||
background: #FFCD68;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: rgba(0, 133, 255, 0.5);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
|
||||
.header-border {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 30%;
|
||||
height: 1px;
|
||||
background: rgba(0, 133, 255, 0.5);
|
||||
}
|
||||
|
||||
h2 {
|
||||
position: relative;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
letter-spacing: 2px;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 120px;
|
||||
height: 12px;
|
||||
transform: translate(-50%, -50%);
|
||||
content: ' ';
|
||||
background: url(./../asset/border3Title.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slot {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: calc(100% - 34px);
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
45
ui/dv/layout/AiDvPanel/borders/border4.vue
Normal file
45
ui/dv/layout/AiDvPanel/borders/border4.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<section class="border4">
|
||||
<div class="slot">
|
||||
<slot/>
|
||||
</div>
|
||||
<div class="title">{{ title }}</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'border4',
|
||||
props: {title: String}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border4 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(33, 73, 157, 0.15);
|
||||
border-radius: 6px;
|
||||
border: 1px solid #274A7E;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
|
||||
.slot {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
padding: 0 10px;
|
||||
color: #82C5FF;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
79
ui/dv/layout/AiDvPanel/borders/border5.vue
Normal file
79
ui/dv/layout/AiDvPanel/borders/border5.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<section class="border5">
|
||||
<div class="title">
|
||||
<div class="title-left">
|
||||
<h2>{{ title }}</h2>
|
||||
</div>
|
||||
<img src="https://cdn.cunwuyun.cn/dvcp/dv/img/gz.svg" />
|
||||
</div>
|
||||
<div class="slot">
|
||||
<slot/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'border5',
|
||||
props: {title: String}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border5 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 10px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
|
||||
.slot {
|
||||
width: 100%;
|
||||
height: calc(100% - 0px);
|
||||
padding: 40px 10px 20px;
|
||||
background: rgba(120, 0, 0, 0.2);
|
||||
border: 1px solid rgba(203, 45, 0, 0.5);
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 111;
|
||||
width: 100%;
|
||||
|
||||
.title-left {
|
||||
width: 180px;
|
||||
height: 38px;
|
||||
padding-left: 32px;
|
||||
background: url(./../asset/dq.svg);
|
||||
background-size: 100% 100%;
|
||||
|
||||
h2 {
|
||||
padding-top: 4px;
|
||||
font-size: 18px;
|
||||
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
line-height: 24px;
|
||||
text-shadow: 0px 2px 4px rgba(117, 9, 9, 0.5);
|
||||
background: linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 64px;
|
||||
height: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
79
ui/dv/layout/AiDvPanel/borders/border6.vue
Normal file
79
ui/dv/layout/AiDvPanel/borders/border6.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<section class="border6" :class="'border6-' + theme">
|
||||
<div class="border6-title">
|
||||
<img src="../asset/ic-badge.png" v-if="theme === '1'" />
|
||||
<h2>{{ title }}</h2>
|
||||
</div>
|
||||
<div class="slot">
|
||||
<slot/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'border6',
|
||||
|
||||
props: ['title', 'theme']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border6 {
|
||||
height: 100%;
|
||||
|
||||
.border6-title {
|
||||
display: flex;
|
||||
position: relative;
|
||||
height: 40px;
|
||||
// line-height: 26px;
|
||||
padding: 4px 0 0 22px;
|
||||
box-sizing: border-box;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
background-image: url(../asset/title6.png);
|
||||
background-position: bottom;
|
||||
background-size: 100% 7px;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
h2 {
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #52575aff;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
&.border6-1 .border6-title {
|
||||
background-image: url(../asset/title-6-dj.png);
|
||||
background-position: bottom;
|
||||
|
||||
&:after {
|
||||
background: #FFA086;
|
||||
}
|
||||
}
|
||||
|
||||
.slot {
|
||||
height: calc(100% - 40px);
|
||||
padding-top: 19px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
66
ui/dv/layout/AiDvPanel/borders/border7.vue
Normal file
66
ui/dv/layout/AiDvPanel/borders/border7.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<section class="border7" :class="'border7-' + theme">
|
||||
<div class="border7-title">
|
||||
<!-- <img src="../asset/ic-badge.png" v-if="theme === '1'" /> -->
|
||||
<h2>{{ title }}</h2>
|
||||
</div>
|
||||
<div class="slot">
|
||||
<slot/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'border7',
|
||||
|
||||
props: ['title', 'theme']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border7 {
|
||||
height: 100%;
|
||||
|
||||
.border7-title {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
height: 42px;
|
||||
// line-height: 26px;
|
||||
padding: 0 36px;
|
||||
box-sizing: border-box;
|
||||
background-image: url(../asset/border7.png);
|
||||
background-position: bottom;
|
||||
background-size: 100% 42px;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
h2 {
|
||||
font-weight: 600;
|
||||
font-size: 22px;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0 0 8px #006BFF;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&.border7-1 .border7-title {
|
||||
// background-image: url(../asset/border7.png);
|
||||
// background-position: bottom;
|
||||
|
||||
&:after {
|
||||
background: #FFA086;
|
||||
}
|
||||
}
|
||||
|
||||
.slot {
|
||||
height: calc(100% - 42px);
|
||||
padding-top: 19px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
64
ui/dv/layout/AiDvPanel/borders/border8.vue
Normal file
64
ui/dv/layout/AiDvPanel/borders/border8.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<section class="border8" :class="'border8-' + theme">
|
||||
<div class="border8-title">
|
||||
<!-- <img src="../asset/ic-badge.png" v-if="theme === '1'" /> -->
|
||||
<h2>{{ title }}</h2>
|
||||
</div>
|
||||
<div class="slot">
|
||||
<slot/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'border8',
|
||||
|
||||
props: ['title', 'theme']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border8 {
|
||||
height: 100%;
|
||||
|
||||
.border8-title {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
height: 34px;
|
||||
padding: 0 44px;
|
||||
box-sizing: border-box;
|
||||
background-image: url(../asset/border8.png);
|
||||
background-size: 100% 34px;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
h2 {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&.border8-1 .border8-title {
|
||||
// background-image: url(../asset/border8.png);
|
||||
// background-position: bottom;
|
||||
|
||||
&:after {
|
||||
background: #FFA086;
|
||||
}
|
||||
}
|
||||
|
||||
.slot {
|
||||
height: calc(100% - 34px);
|
||||
padding-top: 19px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
63
ui/dv/layout/AiDvPanel/borders/border9.vue
Normal file
63
ui/dv/layout/AiDvPanel/borders/border9.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<section class="border9" :class="'border9-' + theme">
|
||||
<div class="border9-title">
|
||||
<!-- <img src="../asset/ic-badge.png" v-if="theme === '1'" /> -->
|
||||
<h2>{{ title }}</h2>
|
||||
</div>
|
||||
<div class="slot">
|
||||
<slot/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'border9',
|
||||
|
||||
props: ['title', 'theme']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border9 {
|
||||
height: 100%;
|
||||
|
||||
.border9-title {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
padding: 0 23px;
|
||||
box-sizing: border-box;
|
||||
background-image: url(../asset/border9.png);
|
||||
background-size: 100% 40px;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
color: #E2EBF1;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&.border9-1 .border9-title {
|
||||
// background-image: url(../asset/border8.png);
|
||||
// background-position: bottom;
|
||||
|
||||
&:after {
|
||||
background: #FFA086;
|
||||
}
|
||||
}
|
||||
|
||||
.slot {
|
||||
height: calc(100% - 40px);
|
||||
padding-top: 19px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
126
ui/dv/layout/AiDvPlot/AiDvPlot.vue
Normal file
126
ui/dv/layout/AiDvPlot/AiDvPlot.vue
Normal file
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<section class="AiDvPlot">
|
||||
<ai-select class="plotPicker" v-model="current" :select-list="charts" @change="handleChangeChart"/>
|
||||
<div class="plotChart" ref="DvPlot"/>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
import {DvCompData} from "../../index";
|
||||
|
||||
export default {
|
||||
name: "AiDvPlot",
|
||||
props: {
|
||||
options: {default: () => []},
|
||||
instance: Function
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
current: 0,
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
charts: v => v.options.map((e, id) => ({id, label: e.title})),
|
||||
plot: v => v.options[v.current],
|
||||
tpl: v => v.$echartTpls[v.plot.chart]
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.DvPlot)
|
||||
this.handleChangeChart()
|
||||
},
|
||||
handleChangeChart() {
|
||||
const series = this.tpl.series || Array(this.plot.dimensions.length - 1).fill(this.tpl.daemon)
|
||||
this.chart.clear()
|
||||
this.chart.setOption({
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
type: 'category', nameGap: 20, axisTick: false,
|
||||
axisLabel: {
|
||||
color: '#C3C4C4',
|
||||
interval: 0,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
// 声明一个 Y 轴，数值轴。
|
||||
yAxis: {
|
||||
nameGap: 23, minInterval: 1,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
axisLabel: {color: '#C3C4C4'},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#C3C4C4'
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
bottom: '0%',
|
||||
top: '26px',
|
||||
containLabel: true
|
||||
}, series, ...this.tpl
|
||||
})
|
||||
this.getChartData()
|
||||
},
|
||||
getChartData() {
|
||||
return new DvCompData(this.plot.dataType, this.plot, this.instance).getData().then(source => {
|
||||
if (this.tpl.series?.type == 'pie') {
|
||||
let data
|
||||
if (source?.length == 1) {
|
||||
data = this.plot.dimensions.filter(Boolean).map(name => ({name, value: source[0][name]}))
|
||||
} else {
|
||||
const ds = this.plot.dimensions.filter(Boolean)
|
||||
data = source.map(e => ({name: e[ds[0]], value: e[ds[1]]}))
|
||||
}
|
||||
this.chart.setOption({series: {data}})
|
||||
} else {
|
||||
const dataset = {source}
|
||||
dataset.dimensions = this.plot.dimensions.filter(Boolean) || []
|
||||
this.chart.setOption({dataset})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(this.initChart)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.AiDvPlot {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
:deep(.plotPicker) {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: -10px;
|
||||
z-index: 9;
|
||||
|
||||
.el-select {
|
||||
.el-input__inner {
|
||||
background: #218ffd1a;
|
||||
border: 1px solid #1F66AD;
|
||||
color: #2FC5FF;
|
||||
}
|
||||
|
||||
.el-input__suffix {
|
||||
color: #2FC5FF !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.plotChart {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
96
ui/dv/layout/AiDvSummary/AiDvSummary.vue
Normal file
96
ui/dv/layout/AiDvSummary/AiDvSummary.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<div class="AiSummary">
|
||||
<component :is="type" :theme="theme" :data="data" :keys="keys" :value="value" :summaryTitle="summaryTitle"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Summary0 from './components/Summary0'
|
||||
import Summary1 from './components/Summary1'
|
||||
import Summary2 from './components/Summary2'
|
||||
import Summary3 from './components/Summary3'
|
||||
import Summary4 from './components/Summary4'
|
||||
import Summary5 from './components/Summary5'
|
||||
import Summary6 from './components/Summary6'
|
||||
import Summary7 from './components/Summary7'
|
||||
import Summary8 from './components/Summary8'
|
||||
import Summary9 from './components/Summary9'
|
||||
import Summary10 from './components/Summary10'
|
||||
import Summary11 from './components/Summary11'
|
||||
import Summary12 from './components/Summary12'
|
||||
import Summary13 from './components/Summary13'
|
||||
import Summary14 from './components/Summary14'
|
||||
import Summary15 from './components/Summary15'
|
||||
import Summary16 from './components/Summary16'
|
||||
import Summary17 from './components/Summary17'
|
||||
import Summary18 from './components/Summary18'
|
||||
import Summary19 from "./components/Summary19";
|
||||
import Summary20 from "./components/Summary20";
|
||||
import ProcessPie from "./components/processPie.vue";
|
||||
|
||||
export default {
|
||||
name: 'AiDvSummary',
|
||||
|
||||
components: {
|
||||
ProcessPie,
|
||||
Summary20,
|
||||
Summary19,
|
||||
Summary0,
|
||||
Summary1,
|
||||
Summary2,
|
||||
Summary3,
|
||||
Summary4,
|
||||
Summary5,
|
||||
Summary6,
|
||||
Summary7,
|
||||
Summary8,
|
||||
Summary9,
|
||||
Summary10,
|
||||
Summary11,
|
||||
Summary12,
|
||||
Summary13,
|
||||
Summary14,
|
||||
Summary15,
|
||||
Summary16,
|
||||
Summary17,
|
||||
Summary18
|
||||
},
|
||||
|
||||
props: {
|
||||
type: {
|
||||
default: 'Summary0'
|
||||
},
|
||||
|
||||
data: {
|
||||
default: () => []
|
||||
},
|
||||
|
||||
summaryTitle: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
|
||||
keys: {
|
||||
type: String,
|
||||
default: 'key'
|
||||
},
|
||||
|
||||
value: {
|
||||
type: String,
|
||||
default: 'value'
|
||||
},
|
||||
|
||||
theme: {
|
||||
type: String,
|
||||
default: '0'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AiSummary {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
BIN
ui/dv/layout/AiDvSummary/asset/Summary14-1.png
Normal file
BIN
ui/dv/layout/AiDvSummary/asset/Summary14-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
BIN
ui/dv/layout/AiDvSummary/asset/Summary14-2.png
Normal file
BIN
ui/dv/layout/AiDvSummary/asset/Summary14-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
ui/dv/layout/AiDvSummary/asset/Summary14-3.png
Normal file
BIN
ui/dv/layout/AiDvSummary/asset/Summary14-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
BIN
ui/dv/layout/AiDvSummary/asset/Summary16-dj.png
Normal file
BIN
ui/dv/layout/AiDvSummary/asset/Summary16-dj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
ui/dv/layout/AiDvSummary/asset/Summary16.png
Normal file
BIN
ui/dv/layout/AiDvSummary/asset/Summary16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
BIN
ui/dv/layout/AiDvSummary/asset/Summary17-dj.png
Normal file
BIN
ui/dv/layout/AiDvSummary/asset/Summary17-dj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
ui/dv/layout/AiDvSummary/asset/Summary17.png
Normal file
BIN
ui/dv/layout/AiDvSummary/asset/Summary17.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
ui/dv/layout/AiDvSummary/asset/Summary18-dj.png
Normal file
BIN
ui/dv/layout/AiDvSummary/asset/Summary18-dj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
ui/dv/layout/AiDvSummary/asset/Summary18.png
Normal file
BIN
ui/dv/layout/AiDvSummary/asset/Summary18.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
21
ui/dv/layout/AiDvSummary/asset/corner.svg
Normal file
21
ui/dv/layout/AiDvSummary/asset/corner.svg
Normal file
@@ -0,0 +1,21 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>路径备份</title>
|
||||
<defs>
|
||||
<polygon id="path-1" points="1826 14 1826 15 1821 15 1821 20 1820 20 1820 14"></polygon>
|
||||
<filter x="-150.0%" y="-150.0%" width="400.0%" height="400.0%" filterUnits="objectBoundingBox" id="filter-2">
|
||||
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
|
||||
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0.088934077 0 0 0 0 0.269903162 0 0 0 0 0.86962183 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="头部导航备份" transform="translate(-1814.000000, -8.000000)" fill-rule="nonzero">
|
||||
<g id="路径备份" transform="translate(1823.000000, 17.000000) scale(-1, 1) translate(-1823.000000, -17.000000) ">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
|
||||
<use fill="#E8F9FF" xlink:href="#path-1"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
BIN
ui/dv/layout/AiDvSummary/asset/display0-bg.png
Normal file
BIN
ui/dv/layout/AiDvSummary/asset/display0-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 500 KiB |
BIN
ui/dv/layout/AiDvSummary/asset/display0-left.png
Normal file
BIN
ui/dv/layout/AiDvSummary/asset/display0-left.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
ui/dv/layout/AiDvSummary/asset/ic1-15.png
Normal file
BIN
ui/dv/layout/AiDvSummary/asset/ic1-15.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
ui/dv/layout/AiDvSummary/asset/ic2-15.png
Normal file
BIN
ui/dv/layout/AiDvSummary/asset/ic2-15.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
ui/dv/layout/AiDvSummary/asset/ic3-15.png
Normal file
BIN
ui/dv/layout/AiDvSummary/asset/ic3-15.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
27
ui/dv/layout/AiDvSummary/asset/jt.svg
Normal file
27
ui/dv/layout/AiDvSummary/asset/jt.svg
Normal file
@@ -0,0 +1,27 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="35px" height="22px" viewBox="0 0 35 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>形状结合备份 2</title>
|
||||
<defs>
|
||||
<path d="M844,226 L844,234 L840,230 L844,226 Z M836,226 L836,234 L832,230 L836,226 Z M828,226 L828,234 L824,230 L828,226 Z" id="path-1"></path>
|
||||
<filter x="-60.0%" y="-150.0%" width="220.0%" height="400.0%" filterUnits="objectBoundingBox" id="filter-2">
|
||||
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.760001846 0 0 0 0 0.291006098 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
<filter x="-50.0%" y="-125.0%" width="200.0%" height="350.0%" filterUnits="objectBoundingBox" id="filter-3">
|
||||
<feGaussianBlur stdDeviation="2" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
|
||||
<feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
|
||||
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
|
||||
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.97961238 0 0 0 0 0.9078125 0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="政民互动" transform="translate(-816.000000, -219.000000)">
|
||||
<g id="形状结合备份-2" transform="translate(834.000000, 230.000000) scale(-1, 1) translate(-834.000000, -230.000000) ">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
|
||||
<use fill="#FFC143" fill-rule="evenodd" xlink:href="#path-1"></use>
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-1"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
48
ui/dv/layout/AiDvSummary/asset/summary1-bg.svg
Normal file
48
ui/dv/layout/AiDvSummary/asset/summary1-bg.svg
Normal file
@@ -0,0 +1,48 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="1652px" height="316px" viewBox="0 0 1652 316" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>编组 11</title>
|
||||
<defs>
|
||||
<radialGradient cx="50%" cy="100%" fx="50%" fy="100%" r="222.222222%" gradientTransform="translate(0.500000,1.000000),scale(0.225000,1.000000),rotate(180.000000),scale(1.000000,0.217020),translate(-0.500000,-1.000000)" id="radialGradient-1">
|
||||
<stop stop-color="#5A8DFF" stop-opacity="0.503091879" offset="0%"></stop>
|
||||
<stop stop-color="#5A86FF" stop-opacity="0" offset="100%"></stop>
|
||||
</radialGradient>
|
||||
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-2">
|
||||
<stop stop-color="#5A86FF" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#5AACFF" offset="36.7624563%"></stop>
|
||||
<stop stop-color="#7EEFFF" offset="50.0376124%"></stop>
|
||||
<stop stop-color="#5AACFF" offset="62.9709649%"></stop>
|
||||
<stop stop-color="#5A86FF" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<path d="M487,140.25 C496.749607,140.25 505.858022,144.763809 511.818048,152.456132 L512.118303,152.85 C517.460114,159.972414 525.628339,164.414823 534.493503,165.038944 L534.977736,165.069194 L800,179.997774 L534.814342,167.814741 C525.045723,167.281907 516.001062,162.526681 510.024678,154.802184 L509.718303,154.4 C504.430381,147.349436 496.184331,143.149103 487.389942,143.003893 L487,143 C463.876874,143 434.876874,143 400,143 C365.099096,143 336.099096,143 313,143 C304.186796,143 295.797203,147.076639 290.404401,154.025025 L290.118303,154.4 C284.248419,162.226512 275.269839,167.10536 265.52688,167.783422 L265.022264,167.814741 L0,179.997774 L264.858871,165.069194 C273.748674,164.584296 281.980256,160.260414 287.424142,153.235831 L287.718303,152.85 C293.568068,145.050314 302.693181,140.406511 312.423056,140.253884 L313,140.25 C336.068383,140.083333 365.068383,140 400,140 C434.846161,140 463.846161,140.083333 487,140.25 Z" id="path-3"></path>
|
||||
<filter x="-56.3%" y="-147.5%" width="212.6%" height="479.3%" filterUnits="objectBoundingBox" id="filter-4">
|
||||
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
|
||||
<feOffset dx="0" dy="8" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="20" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0.254665854 0 0 0 0 0.715268342 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
<path d="M487,0.25 C496.749607,0.25 505.858022,4.76380868 511.818048,12.456132 L512.118303,12.85 C517.460114,19.9724141 525.628339,24.4148226 534.493503,25.038944 L534.977736,25.069194 L800,39.9977736 L534.814342,27.814741 C525.045723,27.2819072 516.001062,22.5266807 510.024678,14.8021845 L509.718303,14.4 C504.430381,7.34943641 496.184331,3.14910303 487.389942,3.00389299 L487,3 C463.876874,3 434.876874,3 400,3 C365.099096,3 336.099096,3 313,3 C304.186796,3 295.797203,7.07663928 290.404401,14.0250247 L290.118303,14.4 C284.248419,22.2265123 275.269839,27.1053605 265.52688,27.7834215 L265.022264,27.814741 L0,39.9977736 L264.858871,25.069194 C273.748674,24.5842957 281.980256,20.260414 287.424142,13.235831 L287.718303,12.85 C293.568068,5.05031402 302.693181,0.406510872 312.423056,0.253884 L313,0.25 C336.068383,0.0833333333 365.068383,5.68434189e-14 400,5.68434189e-14 C434.846161,5.68434189e-14 463.846161,0.0833333333 487,0.25 Z" id="path-5"></path>
|
||||
<filter x="-56.3%" y="-147.5%" width="212.6%" height="479.3%" filterUnits="objectBoundingBox" id="filter-6">
|
||||
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
|
||||
<feOffset dx="0" dy="8" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="20" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0.254665854 0 0 0 0 0.715268342 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="政民互动" transform="translate(-134.000000, -72.000000)">
|
||||
<g id="编组-11" transform="translate(560.000000, 140.000000)">
|
||||
<path d="M487,140.252226 C496.749607,140.252226 505.858022,144.766035 511.818048,152.458358 L512.118303,152.852226 C517.460114,159.974641 525.628339,164.417049 534.493503,165.04117 L534.977736,165.07142 L800,180 L800,1.13686838e-13 L0,1.13686838e-13 L0,180 L264.858871,165.07142 C273.748674,164.586522 281.980256,160.26264 287.424142,153.238057 L287.718303,152.852226 C293.568068,145.05254 302.693181,140.408737 312.423056,140.25611 L313,140.252226 C336.068383,140.08556 365.068383,140.002226 400,140.002226 C434.846161,140.002226 463.846161,140.08556 487,140.252226 Z" id="路径" fill="url(#radialGradient-1)" fill-rule="nonzero"></path>
|
||||
<g id="编组-3" transform="translate(0.000000, 34.000000)"></g>
|
||||
<g id="编组-3" transform="translate(784.000000, 89.998000) scale(-1, 1) translate(-784.000000, -89.998000) translate(768.000000, 34.000000)"></g>
|
||||
<g id="路径" fill-rule="nonzero">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
|
||||
<use fill="url(#linearGradient-2)" xlink:href="#path-3"></use>
|
||||
</g>
|
||||
<g id="路径" opacity="0.100000001" fill-rule="nonzero" transform="translate(400.000000, 19.998887) scale(1, -1) translate(-400.000000, -19.998887) ">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
|
||||
<use fill="url(#linearGradient-2)" xlink:href="#path-5"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.0 KiB |
58
ui/dv/layout/AiDvSummary/asset/summary3-big.svg
Normal file
58
ui/dv/layout/AiDvSummary/asset/summary3-big.svg
Normal file
@@ -0,0 +1,58 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="280px" height="218px" viewBox="0 0 280 218" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>编组备份 3</title>
|
||||
<defs>
|
||||
<linearGradient x1="100%" y1="37.8854658%" x2="1.48868591%" y2="37.8854658%" id="linearGradient-1">
|
||||
<stop stop-color="#14243B" offset="0%"></stop>
|
||||
<stop stop-color="#47AFFF" offset="49.217955%"></stop>
|
||||
<stop stop-color="#14243B" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<filter x="-1.7%" y="-7.5%" width="103.3%" height="115.0%" filterUnits="objectBoundingBox" id="filter-2">
|
||||
<feGaussianBlur stdDeviation="1" in="SourceGraphic"></feGaussianBlur>
|
||||
</filter>
|
||||
<linearGradient x1="49.9857746%" y1="48.7901235%" x2="50%" y2="51.2098765%" id="linearGradient-3">
|
||||
<stop stop-color="#0F181C" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#418DAB" stop-opacity="0.598912806" offset="58.034917%"></stop>
|
||||
<stop stop-color="#417FAA" stop-opacity="0.797612544" offset="87.0457779%"></stop>
|
||||
<stop stop-color="#6FC5FB" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-4">
|
||||
<stop stop-color="#0D1419" stop-opacity="0.1" offset="0%"></stop>
|
||||
<stop stop-color="#3586A4" stop-opacity="0.3" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="49.9857746%" y1="48.875%" x2="50%" y2="51.125%" id="linearGradient-5">
|
||||
<stop stop-color="#233967" offset="0%"></stop>
|
||||
<stop stop-color="#3F8ED5" stop-opacity="0.598912806" offset="58.5107763%"></stop>
|
||||
<stop stop-color="#4793D9" stop-opacity="0.797612544" offset="86.3050768%"></stop>
|
||||
<stop stop-color="#75D1FF" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-6">
|
||||
<stop stop-color="#0D1119" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#0172B1" stop-opacity="0.6" offset="79.4821317%"></stop>
|
||||
<stop stop-color="#C1D4F5" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="100%" y1="20.864466%" x2="0%" y2="20.864466%" id="linearGradient-7">
|
||||
<stop stop-color="#3F85D8" offset="0.00990220717%"></stop>
|
||||
<stop stop-color="#FFFFFF" stop-opacity="0.606943837" offset="50.1065341%"></stop>
|
||||
<stop stop-color="#3F85D8" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="政民互动" transform="translate(-820.000000, -362.000000)">
|
||||
<g id="bg" transform="translate(820.000000, 362.000000)">
|
||||
<ellipse id="椭圆形备份" fill="#47AFFF" opacity="0.100000001" cx="140" cy="176" rx="140" ry="42"></ellipse>
|
||||
<ellipse id="椭圆形备份-8" fill="#47AFFF" opacity="0.100000001" cx="140" cy="173" rx="120" ry="31"></ellipse>
|
||||
<path d="M139.992432,146 C189.499775,146 229.633407,152.06582 229.633407,159.548387 C229.633407,161.874102 230.464643,169.226142 229.623749,172.652197 C228.919579,180.041478 189.059956,186 139.992432,186 C91.475235,186 51.9605512,180.174387 50.3993707,172.89883 L50.3514565,172.795043 C49.5606794,170.705636 50.3514565,161.752656 50.3514565,159.548387 C50.3514565,152.06582 90.4850881,146 139.992432,146 Z" id="形状结合" fill="url(#linearGradient-1)" filter="url(#filter-2)"></path>
|
||||
<ellipse id="椭圆形备份-4" stroke="url(#linearGradient-3)" fill="#4389DF" cx="140" cy="160" rx="89.5" ry="13.5"></ellipse>
|
||||
<g id="编组-2" transform="translate(140.000000, 97.000000) scale(1, -1) translate(-140.000000, -97.000000) translate(90.000000, 52.000000)">
|
||||
<path d="M1.05870868e-12,0 L100,0 L100,82.7759197 C100,86.7656691 77.6142375,90 50,90 C22.3857625,90 0,86.7656691 0,82.7759197 L0,82.7759197 L1.05870868e-12,0 Z" id="形状结合备份" fill="url(#linearGradient-4)"></path>
|
||||
<ellipse id="椭圆形备份-7" stroke="url(#linearGradient-5)" opacity="0.699999988" cx="50" cy="82.5" rx="49.5" ry="7"></ellipse>
|
||||
</g>
|
||||
<g id="编组-2备份" transform="translate(140.000000, 81.000000) scale(1, -1) translate(-140.000000, -81.000000) translate(50.000000, 0.000000)" fill="url(#linearGradient-6)">
|
||||
<path d="M180,0 L180,85.217128 L179.939854,85.2176647 C178.192518,127.885249 138.593711,162 90,162 C41.4062889,162 1.80748225,127.885249 0.0601464025,85.2176647 L0,85.217128 L0,0 L180,0 Z" id="形状结合备份"></path>
|
||||
</g>
|
||||
<path d="M199.817754,169 L200,170.237255 C199.401975,170.333411 198.796774,170.427737 198.1845,170.520231 L196.326564,170.792217 C194.134458,171.103118 191.85697,171.391561 189.49851,171.657483 L187.457244,171.8799 L185.376936,172.091279 L183.2582,172.291609 L181.101655,172.480884 L178.907917,172.659094 L176.677603,172.82623 L174.411329,172.982285 C174.030654,173.00737 173.648507,173.031993 173.2649,173.056153 L170.945844,173.195568 L168.592372,173.32388 L166.205098,173.441079 L163.784642,173.547158 L161.331619,173.642107 L158.846646,173.725917 L156.33034,173.798581 L153.783319,173.86009 L151.206198,173.910435 C150.774204,173.917895 150.340981,173.924889 149.906543,173.931418 L147.28543,173.965 C146.846181,173.969665 146.405742,173.973864 145.964127,173.977597 L143.30041,173.994398 L140.609061,174 L137.993817,173.995285 L134.126656,173.970503 C133.70073,173.966567 133.276066,173.962236 132.852673,173.957511 L130.327637,173.924413 L127.833533,173.881816 L125.370795,173.829702 C124.962976,173.820222 124.556482,173.810344 124.151322,173.800069 L121.736441,173.733643 L119.354004,173.657651 L117.004443,173.572075 L114.688191,173.476896 L112.405679,173.372095 L110.157339,173.257654 C109.785487,173.237776 109.415077,173.217495 109.046118,173.196812 L106.849846,173.067873 L104.688826,172.929247 L102.56349,172.780913 L100.474269,172.622853 L98.4215965,172.455049 L96.4059029,172.27748 C96.0730596,172.247071 95.7417751,172.216253 95.4120584,172.185028 L93.4526439,171.992778 L91.5312885,171.790717 C91.2142582,171.756222 90.8988317,171.721317 90.585018,171.686002 L88.7215613,171.469188 L86.8972436,171.242516 L85.1124967,171.005967 L83.3677525,170.759521 L81.663443,170.50316 C81.3827849,170.459606 81.1038297,170.415638 80.8265862,170.371255 L80,170.236865 L80.1870353,169.00039 L81.8427931,169.26544 C83.5191112,169.525551 85.2568922,169.770857 87.0541748,170.001436 L88.8712186,170.227108 C89.4834627,170.300698 90.1022454,170.372655 90.7274942,170.442981 L92.6225659,170.64907 L94.5559977,170.845395 L96.5273538,171.031971 L98.5361985,171.208818 C98.8741057,171.237482 99.2135568,171.265742 99.5545427,171.293598 L101.618803,171.455882 L103.719462,171.608479 L105.856084,171.751408 L108.028233,171.884685 L110.235473,172.008329 L112.477369,172.122357 L114.753484,172.226786 L117.063384,172.321633 L119.406631,172.406917 L121.78279,172.482655 C122.181535,172.494484 122.581633,172.505915 122.983075,172.51695 L125.407785,172.578402 C125.814567,172.587851 126.222676,172.596905 126.632101,172.605563 L129.104381,172.652768 L131.60783,172.690497 C132.027644,172.695997 132.448739,172.701102 132.871106,172.705814 L136.70649,172.737598 L139.300829,172.747004 C139.735683,172.747788 140.171764,172.748179 140.609061,172.748179 L143.293926,172.742593 L145.951141,172.725842 C146.391672,172.72212 146.831024,172.717933 147.269186,172.713282 L149.883766,172.679801 L152.469146,172.635179 L155.024707,172.579426 L157.549829,172.512553 L160.043892,172.434569 C160.456946,172.420646 160.868681,172.406261 161.279083,172.391413 L163.725395,172.296782 C164.130414,172.280085 164.534074,172.262927 164.936362,172.245308 L167.33353,172.134051 L169.697159,172.011723 L172.026629,171.878334 L174.321321,171.733893 L176.580616,171.578412 C176.95418,171.551579 177.326244,171.524286 177.696795,171.496534 L179.901829,171.324509 L182.069916,171.141468 C182.42815,171.110043 182.784819,171.07816 183.13991,171.045819 L185.251412,170.846272 L187.324417,170.635733 C189.377966,170.419702 191.372839,170.187199 193.306246,169.938267 L195.219061,169.683862 C195.849767,169.597236 196.473541,169.508787 197.090278,169.418515 L198.919279,169.142236 L199.817754,169 Z" id="路径" fill="url(#linearGradient-7)" fill-rule="nonzero"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.3 KiB |
58
ui/dv/layout/AiDvSummary/asset/summary3-small.svg
Normal file
58
ui/dv/layout/AiDvSummary/asset/summary3-small.svg
Normal file
@@ -0,0 +1,58 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="214px" height="164px" viewBox="0 0 214 164" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>编组备份 4</title>
|
||||
<defs>
|
||||
<linearGradient x1="100%" y1="37.8854658%" x2="1.48868591%" y2="37.8854658%" id="linearGradient-1">
|
||||
<stop stop-color="#14243B" offset="0%"></stop>
|
||||
<stop stop-color="#47AFFF" offset="49.217955%"></stop>
|
||||
<stop stop-color="#14243B" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<filter x="-2.1%" y="-9.7%" width="104.2%" height="119.4%" filterUnits="objectBoundingBox" id="filter-2">
|
||||
<feGaussianBlur stdDeviation="1" in="SourceGraphic"></feGaussianBlur>
|
||||
</filter>
|
||||
<linearGradient x1="49.9857746%" y1="48.7998413%" x2="50%" y2="51.2001587%" id="linearGradient-3">
|
||||
<stop stop-color="#0F181C" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#418DAB" stop-opacity="0.598912806" offset="58.034917%"></stop>
|
||||
<stop stop-color="#417FAA" stop-opacity="0.797612544" offset="87.0457779%"></stop>
|
||||
<stop stop-color="#6FC5FB" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-4">
|
||||
<stop stop-color="#0D1419" stop-opacity="0.1" offset="0%"></stop>
|
||||
<stop stop-color="#3586A4" stop-opacity="0.3" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="49.9857746%" y1="48.8574905%" x2="50%" y2="51.1425095%" id="linearGradient-5">
|
||||
<stop stop-color="#233967" offset="0%"></stop>
|
||||
<stop stop-color="#3F8ED5" stop-opacity="0.598912806" offset="58.5107763%"></stop>
|
||||
<stop stop-color="#4793D9" stop-opacity="0.797612544" offset="86.3050768%"></stop>
|
||||
<stop stop-color="#75D1FF" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-6">
|
||||
<stop stop-color="#0D1119" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#0172B1" stop-opacity="0.6" offset="79.4821317%"></stop>
|
||||
<stop stop-color="#C1D4F5" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="100%" y1="20.864466%" x2="0%" y2="20.864466%" id="linearGradient-7">
|
||||
<stop stop-color="#3F85D8" offset="0.00990220717%"></stop>
|
||||
<stop stop-color="#FFFFFF" stop-opacity="0.606943837" offset="50.1065341%"></stop>
|
||||
<stop stop-color="#3F85D8" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="大屏" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="政民互动" transform="translate(-1146.000000, -406.000000)">
|
||||
<g id="bg" transform="translate(1146.000000, 406.000000)">
|
||||
<ellipse id="椭圆形备份" fill="#47AFFF" opacity="0.100000001" cx="107" cy="132" rx="107" ry="32"></ellipse>
|
||||
<ellipse id="椭圆形备份-8" fill="#47AFFF" opacity="0.100000001" cx="107" cy="130" rx="90" ry="23"></ellipse>
|
||||
<path d="M106.994029,112 C146.049823,112 177.710799,116.70101 177.710799,122.5 C177.710799,124.302058 178.366282,129.997915 177.703589,132.653813 C177.157541,138.380696 145.708931,143 106.994029,143 C68.7193521,143 37.5466571,138.48515 36.3150591,132.846593 L36.2772601,132.766158 C35.6534249,131.146868 36.2772601,124.208308 36.2772601,122.5 C36.2772601,116.70101 67.9382362,112 106.994029,112 Z" id="形状结合" fill="url(#linearGradient-1)" filter="url(#filter-2)"></path>
|
||||
<ellipse id="椭圆形备份-4" stroke="url(#linearGradient-3)" fill="#4389DF" cx="106" cy="123" rx="70.5" ry="10.5"></ellipse>
|
||||
<g id="编组-2" transform="translate(106.000000, 68.500000) scale(1, -1) translate(-106.000000, -68.500000) translate(62.902439, 29.000000)">
|
||||
<path d="M9.09494702e-13,0 L86.195122,0 L86.195122,71.7391304 C86.195122,75.1969132 66.8996867,78 43.097561,78 L42.384864,77.9991612 C18.9114561,77.9438728 0,75.1623354 0,71.7391304 L0,71.7391304 L9.09494702e-13,0 Z" id="形状结合备份" fill="url(#linearGradient-4)"></path>
|
||||
<ellipse id="椭圆形备份-7" stroke="url(#linearGradient-5)" opacity="0.699999988" cx="43.097561" cy="72.5" rx="42.5" ry="6"></ellipse>
|
||||
</g>
|
||||
<g id="编组-2备份" transform="translate(107.000000, 64.000000) scale(1, -1) translate(-107.000000, -64.000000) translate(36.000000, 0.000000)" fill="url(#linearGradient-6)">
|
||||
<path d="M142,0 L142,67.3320517 L141.952544,67.3326519 C140.573989,101.045229 109.334972,128 71,128 C32.665028,128 1.42601145,101.045229 0.0474560294,67.3326519 L0,67.3320517 L0,0 L142,0 Z" id="形状结合备份"></path>
|
||||
</g>
|
||||
<path d="M155.848128,130 L156,130.989804 C155.501646,131.066729 154.997312,131.14219 154.487084,131.216185 L152.938804,131.433773 C151.112048,131.682494 149.214142,131.913248 147.248758,132.125987 L145.547704,132.30392 L143.814113,132.473023 L142.0485,132.633287 L140.251379,132.784707 L138.423264,132.927275 L136.564669,133.060984 L134.676107,133.185828 C134.358879,133.205896 134.040423,133.225594 133.72075,133.244923 L131.788204,133.356455 L129.826976,133.459104 L127.837582,133.552863 L125.820535,133.637726 L123.776349,133.713685 L121.705538,133.780734 L119.608617,133.838865 L117.486099,133.888072 L115.338498,133.928348 C114.978503,133.934316 114.617484,133.939911 114.255453,133.945134 L112.071192,133.972 C111.705151,133.975732 111.338119,133.979091 110.970105,133.982078 L108.750341,133.995518 L106.507551,134 L104.328181,133.996228 L101.105547,133.976403 C100.750609,133.973254 100.396722,133.969789 100.043894,133.966008 L97.9396975,133.93953 L95.8612779,133.905453 L93.8089957,133.863761 C93.4691468,133.856177 93.1304019,133.848276 92.7927686,133.840055 L90.7803672,133.786914 L88.795003,133.726121 L86.8370358,133.65766 L84.9068256,133.581517 L83.0047322,133.497676 L81.1311156,133.406123 C80.8212392,133.39022 80.5125644,133.373996 80.2050986,133.357449 L78.374872,133.254299 L76.5740219,133.143397 L74.8029084,133.02473 L73.0618912,132.898283 L71.3513304,132.764039 L69.6715858,132.621984 C69.3942163,132.597656 69.1181459,132.573003 68.843382,132.548023 L67.2105366,132.394223 L65.6094071,132.232574 C65.3452152,132.204978 65.0823598,132.177053 64.8208484,132.148801 L63.2679678,131.975351 L61.747703,131.794013 L60.2604139,131.604774 L58.8064604,131.407617 L57.3862025,131.202528 C57.1523208,131.167685 56.9198581,131.13251 56.6888218,131.097004 L56,130.989492 L56.1558628,130.000312 L57.535661,130.212352 C58.9325927,130.420441 60.3807435,130.616685 61.878479,130.801148 L63.3926821,130.981687 C63.9028856,131.040559 64.4185379,131.098124 64.9395785,131.154385 L66.5188049,131.319256 L68.1299981,131.476316 L69.7727949,131.625577 L71.4468321,131.767054 C71.7284214,131.789986 72.0112974,131.812594 72.2954523,131.834878 L74.015669,131.964705 L75.7662182,132.086783 L77.5467364,132.201126 L79.3568607,132.307748 L81.1962276,132.406663 L83.0644742,132.497885 L84.961237,132.581428 L86.886153,132.657307 L88.8388588,132.725534 L90.8189914,132.786124 C91.1512789,132.795587 91.484694,132.804732 91.8192292,132.81356 L93.8398209,132.862721 C94.1788061,132.870281 94.5188963,132.877524 94.8600839,132.884451 L96.9203173,132.922215 L99.0065246,132.952398 C99.3563702,132.956797 99.7072828,132.960882 100.059255,132.964651 L103.255408,132.990078 L105.417358,132.997603 C105.779736,132.99823 106.143136,132.998543 106.507551,132.998543 L108.744938,132.994075 L110.959284,132.980673 C111.326393,132.977696 111.69252,132.974347 112.057655,132.970625 L114.236471,132.943841 L116.390955,132.908143 L118.520589,132.863541 L120.624857,132.810042 L122.703243,132.747655 C123.047455,132.736517 123.390567,132.725009 123.732569,132.713131 L125.771163,132.637425 C126.108678,132.624068 126.445062,132.610342 126.780302,132.596246 L128.777941,132.507241 L130.747632,132.409378 L132.688858,132.302667 L134.601101,132.187115 L136.483846,132.062729 C136.79515,132.041263 137.105204,132.019429 137.413995,131.997227 L139.251524,131.859607 L141.058263,131.713174 C141.356792,131.688035 141.654016,131.662528 141.949925,131.636655 L143.70951,131.477017 L145.437014,131.308587 C147.148305,131.135762 148.810699,130.949759 150.421871,130.750614 L152.015884,130.54709 C152.541473,130.477789 153.061284,130.407029 153.575232,130.334812 L155.099399,130.113789 L155.848128,130 Z" id="路径" fill="url(#linearGradient-7)" fill-rule="nonzero"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.4 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user