init dev-push code ui base design
This commit is contained in:
leonard
@ -3,68 +3,51 @@
|
||||
<v-row ref="searchFilter">
|
||||
<v-col :cols="12">
|
||||
<v-card class="searchFilter">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="3">
|
||||
<v-row align="end" no-gutters>
|
||||
<v-col :cols="4">
|
||||
<!-- 차트목록 -->
|
||||
<component
|
||||
:is="'SelectBox'"
|
||||
ref="SelectBox"
|
||||
:propsValue="selectValue01"
|
||||
:itemList="selectValueList01"
|
||||
:label="'차트'"
|
||||
@update:propsValue="selectValue01 = $event"
|
||||
/>
|
||||
<component :is="'SelectBox'" ref="SelectBox" :propsValue="selectValue01" :itemList="selectValueList01"
|
||||
:label="'차트'" @update:propsValue="selectValue01 = $event" :textCols="12" customClass="select-large" />
|
||||
</v-col>
|
||||
<v-col :cols="4">
|
||||
<!-- 대상일 -->
|
||||
<component
|
||||
:is="'Datepicker'"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:label="'대상일'"
|
||||
:labelCols="3"
|
||||
/>
|
||||
<component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'대상일'" :labelCols="3" />
|
||||
</v-col>
|
||||
<v-col :cols="5" class="text-right">
|
||||
<v-col :cols="4" class="text-right">
|
||||
<BtnSearch @click="search" size="large" />
|
||||
<!-- 조회버튼 -->
|
||||
<BtnSearch @click="search" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row ref="contents">
|
||||
<v-col :cols="12" style="height: 100%">
|
||||
<v-col :cols="12" style="min-height: 50vh">
|
||||
<v-card class="pb-5">
|
||||
<div class="d-flex align-center justify-space-between pa-5">
|
||||
<v-card-title class="pa-0">에너지 현황</v-card-title>
|
||||
</div>
|
||||
<v-row>
|
||||
<!-- <div style="text-align:center;"> -->
|
||||
<v-col class="arrowCols" :cols="3" style="text-align:center;">
|
||||
<div class="arrowText">고압반</div>
|
||||
<v-row align="center" class="mx-2">
|
||||
<v-col class="d-flex align-center">
|
||||
<span class="arrowText">
|
||||
<v-btn class="" outlined fab x-small color="#E6F4FF">
|
||||
<v-icon>check</v-icon>
|
||||
</v-btn>
|
||||
고압반
|
||||
</span>
|
||||
<div class="col arrow-right mx-2 pa-0"></div>
|
||||
<span class="arrowText">
|
||||
분전반
|
||||
<v-btn class="" outlined fab x-small color="#E6F4FF">
|
||||
<v-icon>check</v-icon>
|
||||
</v-btn>
|
||||
</span>
|
||||
</v-col>
|
||||
<!-- <span class="mdi mdi-arrow-right-bold" size="mdi-48px"></span> -->
|
||||
<!-- <i class="mdi mdi-arrow-right-bold"></i> -->
|
||||
<!-- <span style="width:1000px;">⟶</span> -->
|
||||
<v-col class="iconArrowCols" :cols="6">
|
||||
<div class="arrow-right"></div>
|
||||
<!-- <img class="icon_arrow" src="@/assets/images/icon/ico-enrgMap.png"/> -->
|
||||
</v-col>
|
||||
|
||||
<v-col class="arrowCols" :cols="3" style="text-align:center;">
|
||||
<div class="arrowText">분전반</div>
|
||||
</v-col>
|
||||
<!-- </div> -->
|
||||
</v-row>
|
||||
<div class="px-5" style="height:80%">
|
||||
<div class="px-5" style="height: 80%">
|
||||
<div ref="chartParent" class="w100 h100">
|
||||
<component
|
||||
:ref="chartName"
|
||||
class="w100 h100"
|
||||
:is="loadChart ? 'Chart' : null"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:chartName="chartName"
|
||||
/>
|
||||
<component :ref="chartName" class="w100 h100" :is="loadChart ? 'Chart' : null" :parentPrgmId="myPrgmId"
|
||||
:chartName="chartName" />
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
@ -117,7 +100,6 @@ export default {
|
||||
selectValue01: null,
|
||||
loadChart: false,
|
||||
chartName: 'sankeyChart',
|
||||
loadChart: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -174,8 +156,11 @@ export default {
|
||||
defaultData: defaultData,
|
||||
});
|
||||
},
|
||||
async created() {},
|
||||
async created() { },
|
||||
async mounted() {
|
||||
this.initTest();
|
||||
return;
|
||||
|
||||
this.init();
|
||||
// document.querySelector('.icon_arrow').style.width = document.querySelector('.iconArrowCols').clientWidth-20 + "px";
|
||||
},
|
||||
@ -190,6 +175,80 @@ export default {
|
||||
...mapActions({
|
||||
getCodeList: 'modules/search/getCodeList',
|
||||
}),
|
||||
initTest() {
|
||||
|
||||
const randomNumber = n => Math.floor(Math.random() * n) + 1;
|
||||
|
||||
const makeData = [
|
||||
{ name: 'A' },
|
||||
{ name: 'B' },
|
||||
{ name: 'B2' },
|
||||
{ name: 'C1' },
|
||||
{ name: 'C2' },
|
||||
{ name: 'C3' },
|
||||
// { name: 'D' }
|
||||
];
|
||||
const makeLinks = [
|
||||
{ source: 'A', target: 'B', value: 100 },
|
||||
{ source: 'A', target: 'B2', value: 50 },
|
||||
{ source: 'B', target: 'C1', value: 50 },
|
||||
{ source: 'B', target: 'C2', value: 50 },
|
||||
{ source: 'B2', target: 'C3', value: 50 },
|
||||
];
|
||||
for (let index = 0; index < 10; index++) {
|
||||
makeData.push(...[
|
||||
{ name: 'D' + index },
|
||||
]);
|
||||
makeLinks.push(...[
|
||||
{ source: 'C' + randomNumber(3), target: 'D' + index, value: randomNumber(50) },
|
||||
]);
|
||||
}
|
||||
|
||||
const chartOption = {
|
||||
backgroundColor: '#FFFFFF',
|
||||
series: [
|
||||
{
|
||||
layoutIterations: 0,
|
||||
type: 'sankey',
|
||||
left: 25.0,
|
||||
top: 20.0,
|
||||
right: 120,
|
||||
bottom: 50.0,
|
||||
// nodeWidth:10,
|
||||
nodeGap: 10,
|
||||
nodeAlign: 'left',
|
||||
data: makeData,
|
||||
links: makeLinks,
|
||||
lineStyle: {
|
||||
color: 'source',
|
||||
curveness: 0.5,
|
||||
},
|
||||
// triggerEvent: true,
|
||||
itemStyle: {
|
||||
//color: '#1f77b4',
|
||||
//borderColor: '#1f77b4'
|
||||
},
|
||||
label: {
|
||||
color: this.isDarkMode
|
||||
? 'rgba(250,250,250,0.7)'
|
||||
: 'rgba(0,0,0,0.7)',
|
||||
fontFamily: 'Arial',
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
this.setChartOption({ chartKey: this.chartName, value: chartOption });
|
||||
// console.log("----DEBUG chart-options-------", { chartOption });
|
||||
this.$nextTick(() => {
|
||||
this.loadChart = true;
|
||||
});
|
||||
},
|
||||
async init() {
|
||||
await this.getEnrgMapChartList();
|
||||
this.setFromDt();
|
||||
@ -367,7 +426,7 @@ export default {
|
||||
for (var i = 0; i < makeData.length; i++) {
|
||||
makeData[i]['label'] = {
|
||||
show: true,
|
||||
formatter: function(obj) {
|
||||
formatter: function (obj) {
|
||||
var retVal = makeLinks.filter(n => {
|
||||
return n.target == obj.name;
|
||||
});
|
||||
@ -381,7 +440,7 @@ export default {
|
||||
},
|
||||
};
|
||||
makeData[i]['tooltip'] = {
|
||||
formatter: function(obj) {
|
||||
formatter: function (obj) {
|
||||
var retVal = makeLinks.filter(n => {
|
||||
return n.target == obj.name;
|
||||
});
|
||||
@ -465,7 +524,7 @@ export default {
|
||||
// });
|
||||
|
||||
//1차 정렬
|
||||
tempMakeLinks.sort(function(a, b) {
|
||||
tempMakeLinks.sort(function (a, b) {
|
||||
if (a.source == b.source) {
|
||||
return b.value - a.value;
|
||||
}
|
||||
@ -530,45 +589,41 @@ const defaultData = {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
// .icon-arrow {
|
||||
// display:inline-block;
|
||||
// position: relative;
|
||||
// height: 60px;
|
||||
<style lang="scss" scoped>
|
||||
@each $theme in dark, light {
|
||||
.v-application.#{$theme}-mode {
|
||||
.arrowText {
|
||||
.v-btn {
|
||||
background-color: map-deep-get($config, #{$theme}, "arow-line-btn-bg-color"); // #E6F4FF;
|
||||
border: none;
|
||||
|
||||
// // top: 20px;
|
||||
// // left: 0;
|
||||
.v-icon {
|
||||
color: map-deep-get($config, #{$theme}, "arow-line-color"); // #1677FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// }
|
||||
// .arrowText{
|
||||
// // align-items: center;
|
||||
// display: inline-block;
|
||||
// flex-wrap: wrap;
|
||||
// font-size: 1.25rem;
|
||||
// font-weight: 700;
|
||||
// letter-spacing: 0.0125em;
|
||||
// line-height: 1.5;
|
||||
// word-break: break-all;
|
||||
// position: relative;
|
||||
// line-height:60px;
|
||||
// }
|
||||
.arrow-right {
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
display: flex;
|
||||
}
|
||||
.arrow-right:before {
|
||||
content: '';
|
||||
background: #594dff;
|
||||
width: 100%;
|
||||
clip-path: polygon(
|
||||
0 10px,
|
||||
calc(100% - 15px) 10px,
|
||||
calc(100% - 15px) 0,
|
||||
100% 50%,
|
||||
calc(100% - 15px) 100%,
|
||||
calc(100% - 15px) calc(100% - 10px),
|
||||
0 calc(100% - 10px)
|
||||
);
|
||||
.arrow-right {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
display: flex;
|
||||
background-color: map-deep-get($config, #{$theme}, "arow-line-color"); //#1677FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .arrow-right:before {
|
||||
// // content: '';
|
||||
// background: #594dff;
|
||||
// width: 100%;
|
||||
// clip-path: polygon(
|
||||
// 0 10px,
|
||||
// calc(100% - 15px) 10px,
|
||||
// calc(100% - 15px) 0,
|
||||
// 100% 50%,
|
||||
// calc(100% - 15px) 100%,
|
||||
// calc(100% - 15px) calc(100% - 10px),
|
||||
// 0 calc(100% - 10px)
|
||||
// );
|
||||
// }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user