mirror of https://github.com/dtm-labs/dtm.git
yedf2
4 years ago
committed by
GitHub
GitHub
9 changed files with 183 additions and 10 deletions
@ -0,0 +1,40 @@ |
|||
<template> |
|||
<div class="hidden-xs-only px-2"> |
|||
<svg-icon v-if="!isFulScreen" class-name="cursor-pointer" icon-class="svg-fullscreen" @click="changeScreenfull(identity)" /> |
|||
<svg-icon v-else class-name="cursor-pointer" icon-class="svg-exit-fullscreen" @click="changeScreenfull(identity)" /> |
|||
</div> |
|||
</template> |
|||
<script setup lang='ts'> |
|||
import { notification } from 'ant-design-vue'; |
|||
import { onMounted, onUnmounted, ref } from 'vue' |
|||
import screenfull from 'screenfull' |
|||
|
|||
const isFulScreen = ref(false) |
|||
const changeScreenfull = (identity: string) => { |
|||
if (!screenfull.isEnabled) { |
|||
notification.open({ |
|||
message: '浏览器不支持全屏', |
|||
type: 'warning' |
|||
}) |
|||
} else if (identity) { |
|||
const element = document.getElementById(identity) |
|||
screenfull.toggle(element as HTMLElement) |
|||
} else { |
|||
screenfull.toggle() |
|||
} |
|||
} |
|||
const change = () => { |
|||
if (screenfull.isEnabled) isFulScreen.value = screenfull.isFullscreen |
|||
} |
|||
|
|||
defineProps({ |
|||
identity: { |
|||
type: String, |
|||
default: null |
|||
} |
|||
}) |
|||
|
|||
const emits = defineEmits(['screen']) |
|||
onMounted(() => screenfull.isEnabled && screenfull.on('change', change) && emits('screen')) |
|||
onUnmounted(() => screenfull.isEnabled && screenfull.off('change', change)) |
|||
</script> |
|||
|
After Width: | Height: | Size: 422 B |
@ -0,0 +1,106 @@ |
|||
<template> |
|||
<div> |
|||
<a-modal v-model:visible="visible" title="Transaction Detail" width="80%"> |
|||
<a-table :columns="columns" :data-source="dataSource" :pagination="false"> |
|||
<template #bodyCell="{column, record}"> |
|||
<template v-if="column.key === 'op'"> |
|||
<span class="font-medium">{{ record.op.toUpperCase()}}</span> |
|||
</template> |
|||
<template v-if="column.key === 'status'"> |
|||
<span class="font-medium">{{ record.status.toUpperCase()}}</span> |
|||
</template> |
|||
</template> |
|||
</a-table> |
|||
<div class="mt-10 relative"> |
|||
<a-textarea id="qs" v-model:value="textVal" :auto-size="{ minRows: 10, maxRows: 10 }" /> |
|||
<screenfull class="absolute right-2 top-3 z-50" identity="qs" /> |
|||
</div> |
|||
</a-modal> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref } from 'vue'; |
|||
import { getTransaction } from '/@/api/api_dtm'; |
|||
import screenfull from '/@/components/Screenfull/index.vue'; |
|||
// import VueJsonPretty from 'vue-json-pretty'; |
|||
// import 'vue-json-pretty/lib/styles.css' |
|||
|
|||
const dataSource = ref<Branches[]>([]) |
|||
const visible = ref(false) |
|||
const textVal = ref('') |
|||
|
|||
const open = async(gid: string) => { |
|||
const d = await getTransaction<Data>({gid: gid}) |
|||
dataSource.value = d.data.branches |
|||
textVal.value = JSON.stringify(d.data, null, 2) |
|||
visible.value = true |
|||
} |
|||
|
|||
const columns = [ |
|||
{ |
|||
title: 'GID', |
|||
dataIndex: 'gid', |
|||
key: 'gid' |
|||
}, { |
|||
title: 'BranchID', |
|||
dataIndex: 'branch_id', |
|||
key: 'branch_id' |
|||
}, { |
|||
title: 'Op', |
|||
dataIndex: 'op', |
|||
key: 'op' |
|||
}, { |
|||
title: 'Status', |
|||
dataIndex: 'status', |
|||
key: 'status' |
|||
}, { |
|||
title: 'CreateTime', |
|||
dataIndex: 'create_time', |
|||
key: 'create_time' |
|||
}, { |
|||
title: 'UpdateTime', |
|||
dataIndex: 'update_time', |
|||
key: 'update_time' |
|||
} |
|||
] |
|||
|
|||
type Data = { |
|||
branches: { |
|||
gid: string |
|||
branch_id: string |
|||
op: string |
|||
status: string |
|||
create_time: string |
|||
update_time: string |
|||
}[] |
|||
transactions: { |
|||
ID: number |
|||
create_time: string |
|||
update_time: string |
|||
gid: string |
|||
trans_type: string |
|||
status: string |
|||
protocol: string |
|||
finish_time: string |
|||
options: string |
|||
next_cron_interval: number |
|||
next_cron_time: string |
|||
concurrent: boolean |
|||
} |
|||
} |
|||
|
|||
interface Branches { |
|||
gid: string |
|||
branch_id: string |
|||
op: string |
|||
status: string |
|||
create_time: string |
|||
update_time: string |
|||
} |
|||
|
|||
defineExpose({ |
|||
open |
|||
}) |
|||
|
|||
</script> |
|||
Loading…
Reference in new issue