18 changed files with 9226 additions and 4846 deletions
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,3 @@
@@ -0,0 +1,3 @@
|
||||
import RequestDataSourceConfig from './index.vue' |
||||
|
||||
export { RequestDataSourceConfig } |
||||
@ -0,0 +1,116 @@
@@ -0,0 +1,116 @@
|
||||
<template> |
||||
<setting-item-box |
||||
:itemRightStyle="{ |
||||
gridTemplateColumns: '3fr 3fr' |
||||
}" |
||||
style="padding-right: 25px" |
||||
> |
||||
<template #name> |
||||
数据源 |
||||
</template> |
||||
<setting-item name="站点选择"> |
||||
<n-input-group> |
||||
<n-select |
||||
v-model:value="targetDataSourceRequest.station" |
||||
placeholder="请选择站点" |
||||
:options="options" |
||||
/> |
||||
</n-input-group> |
||||
</setting-item> |
||||
|
||||
<setting-item name="设备选择"> |
||||
<n-cascader |
||||
v-model:value="targetDataSourceRequest.devices" |
||||
:cascade="false" |
||||
multiple |
||||
:show-path="false" |
||||
placeholder="请选择设备" |
||||
max-tag-count="responsive" |
||||
expand-trigger="click" |
||||
:options="deviceData" |
||||
label-field="name" |
||||
value-field="id" |
||||
@update:value="handleUpdateValue" |
||||
/> |
||||
</setting-item> |
||||
</setting-item-box> |
||||
<setting-item-box |
||||
style="padding-right: 25px" |
||||
:itemRightStyle="{ gridTemplateColumns: '1fr' }" |
||||
> |
||||
<template #name> |
||||
点位: |
||||
</template> |
||||
|
||||
<n-infinite-scroll style="height: 300px" :distance="10"> |
||||
<n-checkbox-group v-model:value="targetDataSourceRequest.points"> |
||||
<n-grid :y-gap="8" :cols="3"> |
||||
<n-gi v-for="point in pointsData"> |
||||
<n-checkbox :value="point.id" :label="point.nameCn"/> |
||||
</n-gi> |
||||
</n-grid> |
||||
</n-checkbox-group> |
||||
</n-infinite-scroll> |
||||
</setting-item-box> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { SettingItem, SettingItemBox } from "@/components/Pages/ChartItemSetting"; |
||||
import { PropType, ref } from "vue"; |
||||
import { |
||||
deviceData, pointsData |
||||
} from "@/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestDataSourceConfig/data"; |
||||
import { NCascader, NInfiniteScroll } from 'naive-ui' |
||||
import type { RequestDataSourceConfig } from "@/store/modules/chartEditStore/chartEditStore.d"; |
||||
|
||||
const props = defineProps<{ |
||||
targetDataSourceRequest: PropType<RequestDataSourceConfig> |
||||
}>() |
||||
|
||||
const value1 = ref(null) |
||||
const options = [ |
||||
{ |
||||
label: 'Everybody\'s Got Something to Hide Except Me and My Monkey', |
||||
value: 'song0', |
||||
disabled: true |
||||
}, |
||||
{ |
||||
label: 'Drive My Car', |
||||
value: 'song1' |
||||
}, |
||||
{ |
||||
label: 'Norwegian Wood', |
||||
value: 'song2' |
||||
}, |
||||
{ |
||||
label: 'You Won\'t See', |
||||
value: 'song3', |
||||
disabled: true |
||||
}, |
||||
{ |
||||
label: 'Nowhere Man', |
||||
value: 'song4' |
||||
}, |
||||
{ |
||||
label: 'Think For Yourself', |
||||
value: 'song5' |
||||
}, |
||||
{ |
||||
label: 'The Word', |
||||
value: 'song6' |
||||
}] |
||||
</script> |
||||
<style scoped lang="scss"> |
||||
.item { |
||||
display: flex; |
||||
align-items: center; |
||||
height: 46px; |
||||
justify-content: center; |
||||
margin-bottom: 10px; |
||||
background-color: rgba(0, 128, 0, 0.16); |
||||
} |
||||
|
||||
.item:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,120 @@
@@ -0,0 +1,120 @@
|
||||
<template> |
||||
<n-modal |
||||
class="chart-data-source-model" |
||||
v-model:show="modelShowRef" |
||||
:mask-closable="false" |
||||
:closeOnEsc="true" |
||||
:onEsc="onEsc" |
||||
> |
||||
<n-card :bordered="false" role="dialog" size="small" aria-modal="true" |
||||
style="width: 1000px; height: 718px"> |
||||
<template #header></template> |
||||
<template #header-extra></template> |
||||
<n-scrollbar style="max-height: 718px"> |
||||
<div class="go-pr-3"> |
||||
<n-space vertical> |
||||
<request-global-config></request-global-config> |
||||
<request-data-source-config |
||||
:target-data-source-request="targetData?.requestSource"></request-data-source-config> |
||||
</n-space> |
||||
</div> |
||||
</n-scrollbar> |
||||
<!-- 底部 --> |
||||
<template #action> |
||||
<n-space justify="space-between"> |
||||
<div> |
||||
<n-text>「 {{ chartConfig.categoryName }} 」</n-text> |
||||
<n-text>——</n-text> |
||||
<n-tag type="primary" :bordered="false" style="border-radius: 5px"> |
||||
{{ requestContentTypeObj[requestContentType] }} |
||||
</n-tag> |
||||
</div> |
||||
<div> |
||||
<n-button class="go-mr-3" @click="closeHandle">取消</n-button> |
||||
<n-button type="primary" @click="closeAndSendHandle"> {{ |
||||
saveBtnText || '保存 & 发送请求' |
||||
}} |
||||
</n-button> |
||||
</div> |
||||
</n-space> |
||||
</template> |
||||
</n-card> |
||||
</n-modal> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { PropType, ref, toRefs, watch } from "vue"; |
||||
import { CreateComponentType } from '@/packages/index.d' |
||||
import { useTargetData } from |
||||
"@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook"; |
||||
|
||||
import { RequestDataSourceConfig } from '../../ChartDataRequest/components/RequestDataSourceConfig' |
||||
import { RequestGlobalConfig } from "../../ChartDataRequest/components/RequestGlobalConfig"; |
||||
import { RequestContentTypeEnum } from "@/enums/httpEnum"; |
||||
|
||||
|
||||
const emit = defineEmits(['update:modelShow', 'sendHandle']) |
||||
const props = defineProps({ |
||||
modelShow: Boolean, |
||||
targetData: Object as PropType<CreateComponentType>, |
||||
saveBtnText: String || null |
||||
}) |
||||
|
||||
const { targetData } = useTargetData() |
||||
|
||||
watch(() => targetData.value, (newVal) => { |
||||
console.log('targetData', newVal) |
||||
}, { deep: true }) |
||||
|
||||
const { chartConfig } = toRefs(props.targetData as CreateComponentType) |
||||
const { requestContentType } = toRefs((props.targetData as CreateComponentType).request) |
||||
const requestContentTypeObj = { |
||||
[RequestContentTypeEnum.DEFAULT]: '普通请求', |
||||
[RequestContentTypeEnum.SQL]: 'SQL 请求' |
||||
} |
||||
|
||||
|
||||
const closeHandle = () => { |
||||
emit('update:modelShow', false) |
||||
} |
||||
|
||||
const closeAndSendHandle = () => { |
||||
emit('update:modelShow', false) |
||||
emit('sendHandle') |
||||
} |
||||
|
||||
const onEsc = () => { |
||||
closeHandle() |
||||
} |
||||
const modelShowRef = ref(false) |
||||
watch( |
||||
() => props.modelShow, |
||||
newValue => { |
||||
modelShowRef.value = newValue |
||||
}, |
||||
{ |
||||
immediate: true |
||||
} |
||||
) |
||||
</script> |
||||
|
||||
|
||||
<style scoped lang="scss"> |
||||
@include go('chart-data-source-model') { |
||||
&.n-card.n-modal, |
||||
.n-card { |
||||
@extend .go-background-filter; |
||||
} |
||||
.n-card-shallow { |
||||
background-color: rgba(0, 0, 0, 0) !important; |
||||
} |
||||
@include deep() { |
||||
& > .n-card__content { |
||||
padding-right: 0; |
||||
} |
||||
.n-card__content { |
||||
padding-bottom: 5px; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,5 @@
@@ -0,0 +1,5 @@
|
||||
import ChartDataSource from './index.vue' |
||||
|
||||
export { |
||||
ChartDataSource |
||||
} |
||||
@ -0,0 +1,125 @@
@@ -0,0 +1,125 @@
|
||||
<template> |
||||
<div class="go-chart-configurations-data-source"> |
||||
<n-card class="n-card-shallow"> |
||||
<setting-item-box name="站点选择" :alone="true"> |
||||
<n-input size="small" :placeholder="targetData.requestSource.station || '暂无'" |
||||
:disabled="true"> |
||||
<template #prefix> |
||||
<n-icon :component="DataCenterIcon"/> |
||||
</template> |
||||
</n-input> |
||||
</setting-item-box> |
||||
|
||||
<setting-item-box name="设备选择" :alone="true"> |
||||
<n-input size="small" :placeholder="!!targetData.requestSource.devices.length || '暂无'" |
||||
:disabled="true"> |
||||
<template #prefix> |
||||
<n-icon :component="DevicesIcon"/> |
||||
</template> |
||||
</n-input> |
||||
</setting-item-box> |
||||
<div class="edit-text" @click="requestSourceModelHandle"> |
||||
<div class="go-absolute-center"> |
||||
<n-button type="primary" secondary>编辑配置</n-button> |
||||
</div> |
||||
</div> |
||||
</n-card> |
||||
|
||||
<setting-item-box :alone="true"> |
||||
<template #name> |
||||
测试 |
||||
<n-tooltip trigger="hover"> |
||||
<template #trigger> |
||||
<n-icon size="21" :depth="3"> |
||||
<help-outline-icon></help-outline-icon> |
||||
</n-icon> |
||||
</template> |
||||
默认赋值给 dataset 字段 |
||||
</n-tooltip> |
||||
</template> |
||||
<n-button type="primary" ghost @click="sendHandle"> |
||||
<template #icon> |
||||
<n-icon> |
||||
<flash-icon/> |
||||
</n-icon> |
||||
</template> |
||||
发送请求 |
||||
</n-button> |
||||
</setting-item-box> |
||||
<chart-data-matching-and-show :show="!loading" :ajax="true"></chart-data-matching-and-show> |
||||
|
||||
<data-source-model |
||||
v-model:modelShow="sourceModelShow" |
||||
:targetData="targetData" |
||||
@sendHandle="sendHandle"> |
||||
</data-source-model> |
||||
|
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { icon } from '@/plugins' |
||||
import { |
||||
ChartDataMatchingAndShow |
||||
} from "@/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index"; |
||||
import { computed, ref } from "vue"; |
||||
import { SettingItemBox } from "@/components/Pages/ChartItemSetting"; |
||||
import { useTargetData } from "../../../hooks/useTargetData.hook"; |
||||
import { request } from "dom-helpers/animationFrame"; |
||||
import DataSourceModel from "./components/data-source-model.vue"; |
||||
import { useDesignStore } from '@/store/modules/designStore/designStore' |
||||
import { |
||||
ChartDataRequest |
||||
} from "@/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/index"; |
||||
|
||||
const { DataCenterIcon, DevicesIcon, ActivityIcon } = icon.carbon |
||||
const { HelpOutlineIcon, FlashIcon } = icon.ionicons5 |
||||
const { targetData, chartEditStore } = useTargetData() |
||||
|
||||
|
||||
const loading = ref(false) |
||||
const sourceModelShow = ref(false) |
||||
|
||||
|
||||
function requestSourceModelHandle() { |
||||
sourceModelShow.value = true |
||||
} |
||||
|
||||
const designStore = useDesignStore() |
||||
const themeColor = computed(() => { |
||||
return designStore.getAppTheme |
||||
}) |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
@include go('chart-configurations-data-source') { |
||||
.n-card-shallow { |
||||
&.n-card { |
||||
@extend .go-background-filter; |
||||
@include deep() { |
||||
.n-card__content { |
||||
padding: 10px; |
||||
} |
||||
} |
||||
} |
||||
.edit-text { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 325px; |
||||
height: 136px; |
||||
cursor: pointer; |
||||
opacity: 0; |
||||
transition: all 0.3s; |
||||
@extend .go-background-filter; |
||||
backdrop-filter: blur(2px) !important; |
||||
} |
||||
&:hover { |
||||
border-color: v-bind('themeColor'); |
||||
.edit-text { |
||||
opacity: 1; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue