18 changed files with 9226 additions and 4846 deletions
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,3 @@ |
|||||||
|
import RequestDataSourceConfig from './index.vue' |
||||||
|
|
||||||
|
export { RequestDataSourceConfig } |
||||||
@ -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 @@ |
|||||||
|
<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 @@ |
|||||||
|
import ChartDataSource from './index.vue' |
||||||
|
|
||||||
|
export { |
||||||
|
ChartDataSource |
||||||
|
} |
||||||
@ -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