Skip to content

D
dexfilter-web-nuxt3
Commit c126913d by lei
Options

1

parent 44423901
Showing with 204 additions and 105 deletions
components/RadioGroup.vue
......@@ -49,7 +49,7 @@ const radioOptions: any = computed(() => {
}
});
const emit = defineEmits(["update:current", "change"]);
const changeDimension = (v) => {
const changeDimension = (v: any) => {
radioCurrent.value = v;
emit("update:current", v);
emit("change", v);
......
package-lock.json
......@@ -21,6 +21,7 @@
},
"devDependencies": {
"@types/md5": "^2.3.2",
"@types/qrcode": "^1.5.0",
"axios": "^0.24.0",
"cross-env": "^7.0.3",
"fontmin": "^0.9.9",
......@@ -2312,8 +2313,7 @@
"node_modules/@types/node": {
"version": "18.11.18",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
"integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==",
"peer": true
"integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA=="
},
"node_modules/@types/normalize-package-data": {
"version": "2.4.1",
......@@ -2326,6 +2326,15 @@
"resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
"integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ=="
},
"node_modules/@types/qrcode": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.0.tgz",
"integrity": "sha512-x5ilHXRxUPIMfjtM+1vf/GPTRWZ81nqscursm5gMznJeK9M0YnZ1c3bEvRLQ0zSSgedLx1J6MGL231ObQGGhaA==",
"dev": true,
"dependencies": {
"@types/node": "*"
}
},
"node_modules/@types/resolve": {
"version": "1.20.2",
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
......@@ -15414,8 +15423,7 @@
"@types/node": {
"version": "18.11.18",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
"integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==",
"peer": true
"integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA=="
},
"@types/normalize-package-data": {
"version": "2.4.1",
......@@ -15428,6 +15436,15 @@
"resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
"integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ=="
},
"@types/qrcode": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.0.tgz",
"integrity": "sha512-x5ilHXRxUPIMfjtM+1vf/GPTRWZ81nqscursm5gMznJeK9M0YnZ1c3bEvRLQ0zSSgedLx1J6MGL231ObQGGhaA==",
"dev": true,
"requires": {
"@types/node": "*"
}
},
"@types/resolve": {
"version": "1.20.2",
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
......
package.json
......@@ -11,6 +11,7 @@
},
"devDependencies": {
"@types/md5": "^2.3.2",
"@types/qrcode": "^1.5.0",
"axios": "^0.24.0",
"cross-env": "^7.0.3",
"fontmin": "^0.9.9",
......
utils/plugin/PopupTool.ts
......@@ -24,7 +24,7 @@ export function isChildOf(child: HTMLElement, parent: HTMLElement) {
* @param parent
* @returns
*/
// 获取popup元素定位的top和left
// 获取popup元素定位
export const getPopupFixedSite = (parent: HTMLElement, add?: Add) => {
let params = {
top: 0,
......@@ -54,3 +54,16 @@ export const getPopupFixedSite = (parent: HTMLElement, add?: Add) => {
}
return params;
};
export const getPopupMaxHeight = (add?: Add, parent: string = "body") => {
if (parent == "body") {
// 元素定位于body
if (add) {
if (add.top) {
let maxheight = document.documentElement.clientHeight - add.top * 2;
return maxheight;
}
}
}
return 0;
};
views/CustomComponent/QrCodeDialog.vue
......@@ -17,21 +17,21 @@
</template>
<script lang="ts" setup>
import QrCode from 'qrcode';
import QrCode from "qrcode";
const props = defineProps({
QrCodevisible: Boolean,
QrCode: String,
width: {
type: String,
default: '300px',
default: "300px",
},
height: {
type: String,
default: '300px',
default: "300px",
},
id: String,
});
const emit = defineEmits(['closeDialog']);
const emit = defineEmits(["closeDialog"]);
const getQrcode = () => {
let canvas = document.querySelector(`#${props.id}`);
QrCode.toCanvas(canvas, props.QrCode);
......@@ -45,12 +45,12 @@ watch(
}
);
const closeDialog = () => {
emit('closeDialog', false);
emit("closeDialog", false);
};
</script>
<style lang="less" scoped>
@import '@/style/flex.less';
@import "@/style/flex.less";
.qr-box {
.dja();
}
......
views/analysis/DealBox.vue
......@@ -17,7 +17,7 @@
<radio-group
type="analysisDate"
v-model:current="date"
@change="getData('')"
@change="getData()"
>
</radio-group>
<TimeFilter @change="onChange"></TimeFilter>
......@@ -48,10 +48,8 @@ import {
greenGradientLight,
lightLineColor,
echartBackground,
echartShowLoaing,
} from "@/utils/echarts/color";
const {
maxNum,
resultList,
getMaxNum,
getMinNum,
......@@ -60,15 +58,19 @@ const {
formatter,
} = useEchartNum();
const { t } = useI18n();
const props = defineProps({
title: String,
options: Array,
tb: String,
token: String,
currentPath: String,
r24h: String,
theme: String,
});
const props = withDefaults(
defineProps<{
title?: string;
tb?: string;
token?: string;
currentPath?: string;
r24h?: string;
theme?: string;
}>(),
{
theme: "light",
}
);
const date = ref("5m");
let myChart: any = null;
// 初始化折线图
......@@ -129,7 +131,7 @@ const changeEchart = () => {
const onInit = () => {
initChart("chart-box-2", props.theme);
};
const getData = (timestamp: number) => {
const getData = (timestamp: number = 0) => {
try {
if (!props.tb) {
return;
......@@ -165,9 +167,10 @@ const getData = (timestamp: number) => {
console.log(e);
}
};
const renderChart = (list) => {
const renderChart = (list: any) => {
let options = {
backgroundColor: echartBackground[props.theme],
backgroundColor:
echartBackground[props.theme as keyof typeof echartBackground],
tooltip: {
trigger: "axis",
axisPointer: {
......@@ -242,7 +245,10 @@ const renderChart = (list) => {
},
],
};
document.querySelector("#chart-box-2").removeAttribute("_echarts_instance_");
let element = document.querySelector("#chart-box-2");
if (element) {
element.removeAttribute("_echarts_instance_");
}
myChart.setOption(options);
};
</script>
......
views/analysis/DiscordBox.vue
......@@ -51,15 +51,19 @@ import useEchartNum from "@/hooks/useEchartNum";
const { maxNum, resultList, getMaxNum, getMinNum, ShowLoading, hideLoading } =
useEchartNum();
const { t } = useI18n();
const props = defineProps({
title: String,
options: Array,
token: String,
tb: String,
currentPath: String,
r24h: String,
theme: String,
});
const props = withDefaults(
defineProps<{
title?: string;
token?: string;
tb?: string;
currentPath?: string;
r24h?: string;
theme?: string;
}>(),
{
theme: "light",
}
);
const route = useRoute();
let myChart: any = null;
// 初始化折线图
......@@ -150,9 +154,10 @@ const getData = (timestamp: number | undefined | string) => {
}
});
};
const renderChart = (list) => {
const renderChart = (list: any) => {
let options = {
backgroundColor: echartBackground[props.theme],
backgroundColor:
echartBackground[props.theme as keyof typeof echartBackground],
tooltip: {
trigger: "axis",
axisPointer: {
......@@ -243,7 +248,10 @@ const renderChart = (list) => {
},
],
};
document.querySelector("#chart-box-8").removeAttribute("_echarts_instance_");
let element = document.querySelector("#chart-box-8");
if (element) {
element.removeAttribute("_echarts_instance_");
}
myChart.setOption(options);
};
</script>
......
views/analysis/HolderBox.vue
......@@ -16,7 +16,7 @@
<radio-group
type="analysisDate"
v-model:current="date"
@change="getData('')"
@change="getData()"
>
</radio-group>
<TimeFilter @change="onChange"></TimeFilter>
......@@ -63,15 +63,19 @@ const {
formatter,
} = useEchartNum();
const { t } = useI18n();
const props = defineProps({
title: String,
options: Array,
tb: String,
token: String,
r24h: String,
currentPath: String,
theme: String,
});
const props = withDefaults(
defineProps<{
title?: string;
token?: string;
tb?: string;
currentPath?: string;
r24h?: string;
theme?: string;
}>(),
{
theme: "light",
}
);
const date = ref("5m");
// 折线图状态
const WatchEcharts = useWatchEcharts();
......@@ -133,7 +137,7 @@ watch(
changeEchart();
}
);
const getData = (timestamp: number) => {
const getData = (timestamp: number = 0) => {
if (!props.tb) {
return;
}
......@@ -164,9 +168,10 @@ const getData = (timestamp: number) => {
}
});
};
const renderChart = (list) => {
const renderChart = (list: any) => {
let options = {
backgroundColor: echartBackground[props.theme],
backgroundColor:
echartBackground[props.theme as keyof typeof echartBackground],
tooltip: {
trigger: "axis",
axisPointer: {
......@@ -250,7 +255,10 @@ const renderChart = (list) => {
},
],
};
document.querySelector("#chart-box-1").removeAttribute("_echarts_instance_");
let element = document.querySelector("#chart-box-1");
if (element) {
element.removeAttribute("_echarts_instance_");
}
myChart.setOption(options);
};
</script>
......
views/analysis/InAndOutBox.vue
......@@ -16,7 +16,7 @@
<radio-group
type="analysisDate"
v-model:current="date"
@change="getData('')"
@change="getData()"
>
</radio-group>
<TimeFilter @change="onChange"></TimeFilter>
......@@ -63,15 +63,19 @@ const { getMaxNum, getMinNum, hideLoading, ShowLoading, formatter } =
useEchartNum();
const { t } = useI18n();
let myChart: any = null;
const props = defineProps({
title: String,
options: Array,
tb: String,
r24h: String,
token: String,
currentPath: String,
theme: String,
});
const props = withDefaults(
defineProps<{
title?: string;
token?: string;
tb?: string;
currentPath?: string;
r24h?: string;
theme?: string;
}>(),
{
theme: "light",
}
);
const date = ref("5m");
const resultList = reactive({
list: [],
......@@ -131,7 +135,7 @@ const initChart = (id: string, theme: string, height: string = "212px") => {
const onInit = () => {
initChart("chart-box-3", props.theme);
};
const getData = (timestamp: number) => {
const getData = (timestamp: number = 0) => {
if (!props.tb) {
return;
}
......@@ -150,12 +154,12 @@ const getData = (timestamp: number) => {
formData.value1 = res?.count?.total;
formData.value2 = res?.count?.buy;
formData.value3 = res?.count?.sell;
res.list.buy = res.list.buy.map((item) => {
res.list.buy = res.list.buy.map((item: any) => {
if (item !== undefined && item !== null) {
return parseFloat(item).toFixed(2);
}
});
res.list.sell = res.list.sell.map((item) => {
res.list.sell = res.list.sell.map((item: any) => {
if (item !== undefined && item !== null) {
return parseFloat(item).toFixed(2);
}
......@@ -171,9 +175,10 @@ const getData = (timestamp: number) => {
}
});
};
const renderChart = (list) => {
const renderChart = (list: any) => {
let options = {
backgroundColor: echartBackground[props.theme],
backgroundColor:
echartBackground[props.theme as keyof typeof echartBackground],
tooltip: {
trigger: "axis",
axisPointer: {
......@@ -248,7 +253,10 @@ const renderChart = (list) => {
},
],
};
document.querySelector("#chart-box-3").removeAttribute("_echarts_instance_");
let element = document.querySelector("#chart-box-3");
if (element) {
element.removeAttribute("_echarts_instance_");
}
myChart.setOption(options);
};
</script>
......
views/analysis/index.vue
......@@ -187,7 +187,9 @@ onMounted(() => {
let echartBox = window.sessionStorage.getItem("echart-box");
if (echartBox !== "null" && echartBox !== "" && echartBox !== null) {
let dom = document.querySelector(`#${echartBox}`);
dom.classList.add("active");
if (dom) {
dom.classList.add("active");
}
}
});
});
......
views/detail/index.vue
......@@ -35,7 +35,7 @@
:token="token"
:tb="tb"
:up="KPirce"
:r24h="r24h"
:r24h="r24h ?? 0"
:currentPath="currentPath"
@update:setPool="getPoll"
></RightDetail>
......@@ -98,7 +98,7 @@ const KPirce = ref();
// mt---是否主流币
const mt = ref("");
const PoolAddress = ref("");
let datafeed = null;
let datafeed: any = null;
let widget: any = null;
watch(
() => PoolAddress.value,
......@@ -126,7 +126,7 @@ watch(
}
}
);
let Interval = null;
let Interval: any = null;
// 轮询获取k线是否加载
const openInterval = () => {
Interval = setInterval(() => {
......@@ -145,27 +145,37 @@ const openInterval = () => {
const drag = () => {
let oBox = document.getElementById("resize-block");
let historyTable = document.getElementById("history-table");
oBox.onmousedown = function (ev) {
var iEvent = ev as MouseEvent;
var startY = iEvent.clientY; //当你第一次单击的时候，储存Y轴的坐标。
var boxH = historyTable.offsetHeight; //存储默认的div的高度。
// 获取表格固钉--当拖动时，隐藏固钉
let Histab: any = document.querySelector(
".t-table__affixed-header-elm-wrap"
);
document.getElementById("tv_chart_container").setAttribute("class", "mask");
document.onmousemove = function (ev) {
if (oBox) {
oBox.onmousedown = function (ev: any) {
var iEvent = ev as MouseEvent;
historyTable.style.height = boxH - (iEvent.clientY - startY) + "px";
Histab.style.display = "none";
};
document.onmouseup = function () {
document.onmousedown = null;
document.onmousemove = null;
document.getElementById("tv_chart_container").setAttribute("class", "");
var startY = iEvent.clientY; //当你第一次单击的时候，储存Y轴的坐标。
var boxH = historyTable ? historyTable.offsetHeight : 0; //存储默认的div的高度。
// 获取表格固钉--当拖动时，隐藏固钉
let Histab: any = document.querySelector(
".t-table__affixed-header-elm-wrap"
);
let table_id = document.getElementById("tv_chart_container");
if (table_id) {
table_id.setAttribute("class", "mask");
}
document.onmousemove = function (ev) {
var iEvent = ev as MouseEvent;
if (historyTable) {
historyTable.style.height = boxH - (iEvent.clientY - startY) + "px";
}
Histab.style.display = "none";
};
document.onmouseup = function () {
document.onmousedown = null;
document.onmousemove = null;
let tv_id = document.getElementById("tv_chart_container");
if (tv_id) {
tv_id.setAttribute("class", "");
}
};
return false;
};
return false;
};
}
};
const tableHeight = ref("100px");
watch(
......@@ -221,7 +231,7 @@ onBeforeUnmount(() => {
widget = null;
}
});
const getKLine = (tb) => {
const getKLine = (tb: any) => {
if (!symbol.value) {
symbol.value = "any";
}
......@@ -241,7 +251,7 @@ const getKLine = (tb) => {
symbol: symbolName,
});
};
const getPoll = (PoolValue) => {
const getPoll = (PoolValue: any) => {
PoolAddress.value = PoolValue;
};
</script>
......
views/layout/Search.vue
......@@ -21,6 +21,7 @@
:zIndex="2000"
attach="body"
class="custom-search-drawer"
id="search-drawer"
v-model:visible="selectDialogVisible"
placement="top"
>
......@@ -48,6 +49,9 @@
<div
id="search-token-list"
class="total-token-info-fa narrow-scrollbar"
:style="{
height: search_list_height + 'px',
}"
>
<div v-show="currentSearchType == 'top'">
<SearchRecords
......@@ -103,6 +107,7 @@ import SearchRecords from "./searchRecords.vue";
import SearchList from "./searchList.vue";
import * as Cache from "@/utils/cache";
import { Drawer as TDrawer } from "tdesign-vue-next";
import { getPopupMaxHeight } from "@/utils/plugin/PopupTool";
const keyword = ref("");
const inputPlaceholder = ref("");
const selectDialogVisible = ref(false);
......@@ -131,6 +136,10 @@ const resultList = ref([]);
const topList = ref([]);
const isLoading = ref(false);
const isFirst = ref(true);
// 弹窗最大高度
const PopupMaxHeight = ref<number>(800);
// 搜索结果box高度
const search_list_height = ref<number>(0);
const darg = () => {
let dom: any = document.getElementById("search-token-list");
if (dom !== null) {
......@@ -155,11 +164,34 @@ const darg = () => {
});
}
};
const getHeight = () => {
try {
// 获取弹窗最大高度
let height = getPopupMaxHeight({
top: 70,
});
if (height < PopupMaxHeight.value) {
PopupMaxHeight.value = height;
}
let search_popup = document.getElementById("search-drawer");
if (search_popup) {
let child = search_popup.children[1];
if (child) {
child.style.maxHeight = PopupMaxHeight.value + "px";
}
}
// 获取搜索结果最大高度
search_list_height.value = PopupMaxHeight.value - 84;
} catch (e) {
console.log(e);
}
};
// 滚动加载
onMounted(() => {
nextTick(() => {
darg();
// 获取弹出层最大高度
getHeight();
});
});
const onChange = (value: string) => {
......@@ -399,8 +431,7 @@ watch(
left: calc(50% - 450px);
top: 70px;
width: 900px;
height: 800px !important;
background: @td--Search-drawer-back-color;
height: auto !important;
border-radius: 4px;
background: var(--new-background-1);
.header-search2 {
......@@ -447,7 +478,6 @@ watch(
width: 100%;
.total-token-info-fa {
overflow: auto;
height: 726px;
position: relative;
.loading-center2 {
text-align: center;
......
views/layout/searchList.vue
......@@ -88,7 +88,7 @@ const chain = useChain();
ChainObj.value = filterChainObj("value", chain.value);
const props = withDefaults(
defineProps<{
options: any[];
options?: any[];
}>(),
{
options: [],
......@@ -102,7 +102,7 @@ const goDetail = (row) => {
path: Obj.name,
};
};
const collectData = (item) => {
const collectData = (item: any) => {
let chain_id = item.chainId;
let obj = filterChainObj("chain_id", chain_id);
if (item.isStar) {
......
views/token/ChoseChain.vue
......@@ -62,10 +62,6 @@ const PopupClient = reactive({
const ScrollElement = ref<HTMLElement | null>(null);
// 最好每次点击都获取一次
const getPopupSeat = () => {
console.log(
"0x40fb0516ac8ff93b48bcf9da7717e523e78c34f70001000000000000000004dc_0x4cc19356f2d37338b9802aa8e8fc58b0373296e7_0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2"
.length
);
if (outerlayer.value) {
let client = getPopupFixedSite(outerlayer.value, {
top: 4,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment