gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增app的部分交互和样式

Browse Source
This commit is contained in:
chenjinsong
2022-07-21 15:06:19 +08:00
parent 556ddfb95e
commit 68539bee94
4 changed files with 603 additions and 515 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/assets/css/components/views/charts2/networkOverviewApps.scss
View File

@@ -72,6 +72,24 @@
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
&.app-card--create {
background-color: #F7F7F7;
justify-content: center;
align-items: center;
.cn-icon {
padding-bottom: 2px;
font-size: 17px;
color: #38ACD2;
cursor: pointer;
}
span {
font-size: 12px;
color: #353636;
cursor: pointer;
}
}
.app-card-title { .app-card-title {
display: flex; display: flex;
padding: 0 12px; padding: 0 12px;
@@ -112,7 +130,6 @@
} }
} }
.app-card__body-content-percent { .app-card__body-content-percent {
font-family: NotoSansHans-Medium;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
height: 20px; height: 20px;
@@ -144,6 +161,94 @@
} }
} }
} }
.add-app-drawer {
height: 526px !important;
.add-app {
display: flex;
flex-direction: column;
height: 100%;
.add-app__header {
display: flex;
justify-content: space-between;
height: 46px;
background-color: white;
.header__title {
padding-left: 20px;
font-size: 16px;
font-weight: bold;
line-height: 46px;
color: #353636;
}
.header__operations {
display: flex;
align-items: center;
.header__operation {
width: 80px;
height: 30px;
margin-right: 20px;
line-height: 30px;
border-radius: 4px;
text-align: center;
cursor: pointer;
&.header__operation--cancel {
border: 1px solid rgba(0,0,0,0.15);
color: #333;
}
&.header__operation--save {
background-color: #38ACD2;
color: white;
}
}
}
}
.add-app__body {
position: relative;
flex: 1;
background-color: #EBF1F4;
.body__searcher {
position: absolute;
right: 20px;
top: 15px;
}
.el-tabs__nav-wrap::after {
height: 0;
}
.el-tabs__header {
padding-left: 20px;
}
.body__apps {
height: 420px;
padding: 0 20px;
overflow: auto;
display: grid;
grid-template-rows: repeat(auto-fill, 120px);
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
grid-gap: 20px;
&::-webkit-scrollbar-thumb {
background-color: #c5c5c5;
border-radius: 5px;
}
&::-webkit-scrollbar-thumb:hover {
background-color: #a0a0a0;
border-radius: 5px;
}
.body__app {
height: 120px;
background: #FFFFFF;
border: 1px solid #E2E5EC;
border-radius: 4px;
}
}
}
}
}
} }
.app-dropdown.el-popper.is-pure { .app-dropdown.el-popper.is-pure {
top: 720px !important; top: 720px !important;

1
src/components/advancedSearch/TagMode.vue
View File

@@ -391,7 +391,6 @@ export default {
deep: true, deep: true,
handler (n) { handler (n) {
if (!_.isEmpty(n)) { if (!_.isEmpty(n)) {
console.info(n)
this.metaList = n this.metaList = n
} }
} }

62
src/views/charts/charts/IpBasicInfo.vue
View File

@@ -16,21 +16,11 @@
<el-descriptions-item :label="$t('overall.dnsServerInfo.protocol') + ':'">{{detectionIpSupporting(detectionsData)}}</el-descriptions-item> <el-descriptions-item :label="$t('overall.dnsServerInfo.protocol') + ':'">{{detectionIpSupporting(detectionsData)}}</el-descriptions-item>
</el-descriptions> </el-descriptions>
</div> </div>
<!-- <div class="chart-location">
<el-descriptions :column="1">
<el-descriptions-item :label="$t('overall.location') + ':'">{{location}}</el-descriptions-item>
</el-descriptions>
<div class="chart-drawing" style="padding: 0 36px 30px 0;" :id="`chart${chartInfo.id}`"></div>
</div>-->
</div> </div>
</template> </template>
<script> <script>
import chartMixin from '@/views/charts/charts/chart-mixin' import chartMixin from '@/views/charts/charts/chart-mixin'
/*import * as L from 'leaflet'
import icon from 'leaflet/dist/images/marker-icon.png'
import iconShadow from 'leaflet/dist/images/marker-shadow.png'
import 'leaflet/dist/leaflet.css'*/
import { get } from '@/utils/http' import { get } from '@/utils/http'
import { api } from '@/utils/api' import { api } from '@/utils/api'
export default { export default {
@@ -91,48 +81,6 @@ export default {
} }
}, },
methods: { methods: {
/*initMap (id) {
L.Marker.prototype.options.icon = L.icon({
iconUrl: icon,
shadowUrl: iconShadow
})
const map = L.map(`chart${this.chartInfo.id}`, {
minZoom: 3,
maxZoom: 7,
zoom: 5,
attributionControl: false,
zoomControl: false,
maxBounds: L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180))
})
L.tileLayer(
this.mapPictureUrl,
{ noWrap: true }
).addTo(map)
const attribution = L.control.attribution({ position: 'bottomright', prefix: '' })
attribution.addAttribution(' © OpenStreetMap contributors')
attribution.addTo(map)
/!* L.control.zoom({
position: 'bottomright',
zoomInText: '<i class="nz-icon nz-icon-enlarge"></i>',
zoomOutText: '<i class="nz-icon nz-icon-narrow"></i>',
zoomInTitle: '',
zoomOutTitle: ''
}).addTo(map) *!/
this.myChart = map
this.loadLeafletMap()
},
loadLeafletMap () {
if (this.chartData.latitude && this.chartData.longitude) {
this.myChart.setView([this.chartData.latitude, this.chartData.longitude], 5)
const myIcon = L.divIcon({
className: 'cn-icon cn-icon-position2 position-icon'
})
L.marker([this.chartData.latitude, this.chartData.longitude], { icon: myIcon }).addTo(this.myChart)
}
},*/
queryDetection () { queryDetection () {
get(this.entityDetectionsIpUrl, this.queryParams).then(response => { get(this.entityDetectionsIpUrl, this.queryParams).then(response => {
if (response.code === 200) { if (response.code === 200) {
@@ -145,14 +93,6 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
this.queryDetection() this.queryDetection()
}) })
}, }
/*watch: {
chartData: {
deep: true,
handler (n) {
this.initMap(`chart${this.chartInfo.id}`)
}
}
}*/
} }
</script> </script>

948
src/views/charts2/charts/NetworkOverviewApps.vue
View File

@@ -58,7 +58,45 @@
<div class="chart__drawing" :id="`chart${app.name}`"></div> <div class="chart__drawing" :id="`chart${app.name}`"></div>
</div> </div>
</div> </div>
<div class="app-card app-card--create">
<i class="cn-icon cn-icon-add1" @click="addApp"></i>
<span @click="addApp">{{$t('overall.add')}}</span>
</div>
</div> </div>
<el-drawer
v-model="showAddApp"
direction="btt"
custom-class="add-app-drawer"
:with-header="false"
:show-close="false"
>
<div class="add-app">
<div class="add-app__header">
<div class="header__title">{{$t('overall.add')}}</div>
<div class="header__operations">
<div class="header__operation header__operation--cancel">{{$t('overall.cancel')}}</div>
<div class="header__operation header__operation--save">{{$t('overall.save')}}</div>
</div>
</div>
<div class="add-app__body">
<el-tabs v-model="appTypeTab">
<el-tab-pane :label="$t('networkOverview.appType.provider')" :name="0">
<div class="body__apps">
<div class="body__app" v-for="app in providerOptions" :key="app.name">{{app.name}},{{app.desc}}</div>
</div>
</el-tab-pane>
<el-tab-pane :label="$t('networkOverview.appType.app')" :name="1">
<div class="body__apps">
<div class="body__app" v-for="app in appOptions" :key="app.name">{{app.name}},{{app.desc}}</div>
</div>
</el-tab-pane>
</el-tabs>
<div class="body__searcher">
<el-input size="mini"></el-input>
</div>
</div>
</div>
</el-drawer>
</div> </div>
</template> </template>
@@ -83,7 +121,9 @@ export default {
metricFilter: '', metricFilter: '',
metricOptions: [], metricOptions: [],
chartOption: [], chartOption: [],
appData: [ appData: [],
// 假数据
appTempData: [
{ value: 1.3912, number: 684600000000, previous: 24, number1: 3675, trend: 'down', icon: 'cn-icon-mining-pool' }, { value: 1.3912, number: 684600000000, previous: 24, number1: 3675, trend: 'down', icon: 'cn-icon-mining-pool' },
{ value: 1.8934, number: 382100000000, previous: 24, number1: 3675, trend: 'up', icon: 'cn-icon-fraudulent-ip' }, { value: 1.8934, number: 382100000000, previous: 24, number1: 3675, trend: 'up', icon: 'cn-icon-fraudulent-ip' },
{ value: 1.2054, number: 184600000000, previous: 24, number1: 3675, trend: 'up', icon: 'cn-icon-debug' }, { value: 1.2054, number: 184600000000, previous: 24, number1: 3675, trend: 'up', icon: 'cn-icon-debug' },
@@ -91,476 +131,480 @@ export default {
{ value: 1.6415, number: 734100000000, previous: 24, number1: 3675, trend: 'down', icon: 'cn-icon-authoritative-domain' } { value: 1.6415, number: 734100000000, previous: 24, number1: 3675, trend: 'down', icon: 'cn-icon-authoritative-domain' }
], ],
unitTypes, unitTypes,
unitConvert,
timer: null, timer: null,
showEdit: '' showAddApp: false,
// add弹框中的可选项
providerOptions: [],
appOptions: [],
appTypeTab: 0
} }
}, },
methods: { methods: {
init (obj) { unitConvert,
init () {
this.appData.forEach((app, i) => {
// 根据app.name和app.type查除接口，获取数据
this.appData[i] = { ...app, ...this.appTempData[i] }
this.appData[i].lineData = [
[
'1658128320',
'0'
],
[
'1658129184',
'0'
],
[
'1658130048',
'0'
],
[
'1658130912',
'0'
],
[
'1658131776',
'0'
],
[
'1658132640',
'0'
],
[
'1658133504',
'0'
],
[
'1658134368',
'0'
],
[
'1658135232',
'0'
],
[
'1658136096',
'0'
],
[
'1658136960',
'0'
],
[
'1658137824',
'0'
],
[
'1658138688',
'0'
],
[
'1658139552',
'0'
],
[
'1658140416',
'0'
],
[
'1658141280',
'0'
],
[
'1658142144',
'0'
],
[
'1658143008',
'0'
],
[
'1658143872',
'0'
],
[
'1658144736',
'1'
],
[
'1658145600',
'0'
],
[
'1658146464',
'0'
],
[
'1658147328',
'0'
],
[
'1658148192',
'0'
],
[
'1658149056',
'0'
],
[
'1658149920',
'0'
],
[
'1658150784',
'0'
],
[
'1658151648',
'0'
],
[
'1658152512',
'0'
],
[
'1658153376',
'0'
],
[
'1658154240',
'1'
],
[
'1658155104',
'0'
],
[
'1658155968',
'0'
],
[
'1658156832',
'0'
],
[
'1658157696',
'0'
],
[
'1658158560',
'0'
],
[
'1658159424',
'0'
],
[
'1658160288',
'0'
],
[
'1658161152',
'0'
],
[
'1658162016',
'0'
],
[
'1658162880',
'0'
],
[
'1658163744',
'0'
],
[
'1658164608',
'0'
],
[
'1658165472',
'0'
],
[
'1658166336',
'0'
],
[
'1658167200',
'0'
],
[
'1658168064',
'0'
],
[
'1658168928',
'0'
],
[
'1658169792',
'0'
],
[
'1658170656',
'0'
],
[
'1658171520',
'0'
],
[
'1658172384',
'0'
],
[
'1658173248',
'0'
],
[
'1658174112',
'0'
],
[
'1658174976',
'0'
],
[
'1658175840',
'0'
],
[
'1658176704',
'0'
],
[
'1658177568',
'0'
],
[
'1658178432',
'0'
],
[
'1658179296',
'0'
],
[
'1658180160',
'0'
],
[
'1658181024',
'0'
],
[
'1658181888',
'0'
],
[
'1658182752',
'0'
],
[
'1658183616',
'0'
],
[
'1658184480',
'0'
],
[
'1658185344',
'0'
],
[
'1658186208',
'0'
],
[
'1658187072',
'0'
],
[
'1658187936',
'0'
],
[
'1658188800',
'0'
],
[
'1658189664',
'0'
],
[
'1658190528',
'0'
],
[
'1658191392',
'0'
],
[
'1658192256',
'0'
],
[
'1658193120',
'0'
],
[
'1658193984',
'0'
],
[
'1658194848',
'0'
],
[
'1658195712',
'0'
],
[
'1658196576',
'0'
],
[
'1658197440',
'0'
],
[
'1658198304',
'0'
],
[
'1658199168',
'0'
],
[
'1658200032',
'0'
],
[
'1658200896',
'0'
],
[
'1658201760',
'0'
],
[
'1658202624',
'0'
],
[
'1658203488',
'0'
],
[
'1658204352',
'0'
],
[
'1658205216',
'0'
],
[
'1658206080',
'0'
],
[
'1658206944',
'0'
],
[
'1658207808',
'0'
],
[
'1658208672',
'0'
],
[
'1658209536',
'0'
],
[
'1658210400',
'0'
],
[
'1658211264',
'0'
],
[
'1658212128',
'0'
],
[
'1658212992',
'0'
],
[
'1658213856',
'0'
],
[
'1658214720',
'0'
]
].map(v => [Number(v[0]) * 1000, Number(v[1]), 'time'])
this.initChart(app)
})
},
initChart (obj) {
const dom = document.getElementById(`chart${obj.name}`) const dom = document.getElementById(`chart${obj.name}`)
this.myChart = echarts.init(dom) this.myChart = echarts.init(dom)
this.chartOption = appListChartOption this.chartOption = appListChartOption
const result = [
{
values: [
[
'1658128320',
'0'
],
[
'1658129184',
'0'
],
[
'1658130048',
'0'
],
[
'1658130912',
'0'
],
[
'1658131776',
'0'
],
[
'1658132640',
'0'
],
[
'1658133504',
'0'
],
[
'1658134368',
'0'
],
[
'1658135232',
'0'
],
[
'1658136096',
'0'
],
[
'1658136960',
'0'
],
[
'1658137824',
'0'
],
[
'1658138688',
'0'
],
[
'1658139552',
'0'
],
[
'1658140416',
'0'
],
[
'1658141280',
'0'
],
[
'1658142144',
'0'
],
[
'1658143008',
'0'
],
[
'1658143872',
'0'
],
[
'1658144736',
'1'
],
[
'1658145600',
'0'
],
[
'1658146464',
'0'
],
[
'1658147328',
'0'
],
[
'1658148192',
'0'
],
[
'1658149056',
'0'
],
[
'1658149920',
'0'
],
[
'1658150784',
'0'
],
[
'1658151648',
'0'
],
[
'1658152512',
'0'
],
[
'1658153376',
'0'
],
[
'1658154240',
'1'
],
[
'1658155104',
'0'
],
[
'1658155968',
'0'
],
[
'1658156832',
'0'
],
[
'1658157696',
'0'
],
[
'1658158560',
'0'
],
[
'1658159424',
'0'
],
[
'1658160288',
'0'
],
[
'1658161152',
'0'
],
[
'1658162016',
'0'
],
[
'1658162880',
'0'
],
[
'1658163744',
'0'
],
[
'1658164608',
'0'
],
[
'1658165472',
'0'
],
[
'1658166336',
'0'
],
[
'1658167200',
'0'
],
[
'1658168064',
'0'
],
[
'1658168928',
'0'
],
[
'1658169792',
'0'
],
[
'1658170656',
'0'
],
[
'1658171520',
'0'
],
[
'1658172384',
'0'
],
[
'1658173248',
'0'
],
[
'1658174112',
'0'
],
[
'1658174976',
'0'
],
[
'1658175840',
'0'
],
[
'1658176704',
'0'
],
[
'1658177568',
'0'
],
[
'1658178432',
'0'
],
[
'1658179296',
'0'
],
[
'1658180160',
'0'
],
[
'1658181024',
'0'
],
[
'1658181888',
'0'
],
[
'1658182752',
'0'
],
[
'1658183616',
'0'
],
[
'1658184480',
'0'
],
[
'1658185344',
'0'
],
[
'1658186208',
'0'
],
[
'1658187072',
'0'
],
[
'1658187936',
'0'
],
[
'1658188800',
'0'
],
[
'1658189664',
'0'
],
[
'1658190528',
'0'
],
[
'1658191392',
'0'
],
[
'1658192256',
'0'
],
[
'1658193120',
'0'
],
[
'1658193984',
'0'
],
[
'1658194848',
'0'
],
[
'1658195712',
'0'
],
[
'1658196576',
'0'
],
[
'1658197440',
'0'
],
[
'1658198304',
'0'
],
[
'1658199168',
'0'
],
[
'1658200032',
'0'
],
[
'1658200896',
'0'
],
[
'1658201760',
'0'
],
[
'1658202624',
'0'
],
[
'1658203488',
'0'
],
[
'1658204352',
'0'
],
[
'1658205216',
'0'
],
[
'1658206080',
'0'
],
[
'1658206944',
'0'
],
[
'1658207808',
'0'
],
[
'1658208672',
'0'
],
[
'1658209536',
'0'
],
[
'1658210400',
'0'
],
[
'1658211264',
'0'
],
[
'1658212128',
'0'
],
[
'1658212992',
'0'
],
[
'1658213856',
'0'
],
[
'1658214720',
'0'
]
]
}
]
const seriesTemplate = this.chartOption.series[0] const seriesTemplate = this.chartOption.series[0]
this.chartOption.series = result.map((r, i) => { this.chartOption.series = [{
return { ...seriesTemplate,
...seriesTemplate, data: obj.lineData,
data: r.values.map((v) => [Number(v[0]) * 1000, Number(v[1]), 'time']), lineStyle: {
lineStyle: { color: obj.trend === 'up' ? '#7FA054' : '#35ADDA'
color: obj.trend === 'up' ? '#7FA054' : '#35ADDA' },
}, areaStyle: {
areaStyle: { opacity: 0.1,
opacity: 0.1, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {
{ offset: 0,
offset: 0, color: obj.trend === 'up' ? '#7FA054' : '#35ADDA'
color: obj.trend === 'up' ? '#7FA054' : '#35ADDA' },
}, {
{ offset: 1,
offset: 1, color: obj.trend === 'up' ? '#7FA054' : '#35ADDA'
color: obj.trend === 'up' ? '#7FA054' : '#35ADDA' }
} ])
])
}
} }
}) }]
this.myChart.setOption(this.chartOption) this.myChart.setOption(this.chartOption)
}, },
addApp () {
this.showAddApp = true
const letter = 'abcdefghijklmnopqrstuvwxyz'
for (let i = 0; i < 100; i++) {
this.appOptions.push({
name: letter[i % 26] + i,
desc: 'this is a really nice app'
})
this.providerOptions.push({
name: letter[i % 26] + i,
desc: 'this is a really nice provider'
})
}
},
resize () { resize () {
this.myChart.resize() this.myChart.resize()
},
editChange () {
this.showEdit = !this.showEdit
} }
}, },
mounted () { mounted () {
if (this.chart.params.app) { if (this.chart.params.app) {
this.appData = this.appData.map((e, i) => { this.appData = this.chart.params.app
return {
name: this.chart.params.app[i],
value: e.value,
number: e.number,
previous: e.previous,
number1: e.number1,
trend: e.trend
}
})
} }
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
this.appData.forEach(t => { this.init()
this.appName = t.name
this.init(t)
})
}, 100) }, 100)
window.addEventListener('resize', this.resize) window.addEventListener('resize', this.resize)
} }