|
|
@@ -1,16 +1,18 @@
|
|
|
<template>
|
|
|
<!--参考行情-->
|
|
|
<div class="topTableHeight">
|
|
|
- <a-table :columns="columns"
|
|
|
- :class="['srcollYTable', isBottom ? '' : 'srcollYTableNoBottom', goodsList.length ? 'noPlaceHolder' : 'hasPlaceHolder']"
|
|
|
- :scroll="{ x: '100%', y: isBottom ? 'calc(100vh - 378px)' : 'calc(100vh - 138px)' }"
|
|
|
- :pagination="false"
|
|
|
- :loading="loading"
|
|
|
- :expandedRowKeys="expandedRowKeys"
|
|
|
- :customRow="Rowclick"
|
|
|
- rowKey="goodscode"
|
|
|
- ref="tableRef"
|
|
|
- :data-source="goodsList">
|
|
|
+ <a-table
|
|
|
+ :columns="columns"
|
|
|
+ :class="['srcollYTable', isBottom ? '' : 'srcollYTableNoBottom', goodsList.length ? 'noPlaceHolder' : 'hasPlaceHolder']"
|
|
|
+ :scroll="{ x: '100%', y: isBottom ? 'calc(100vh - 378px)' : 'calc(100vh - 138px)' }"
|
|
|
+ :pagination="false"
|
|
|
+ :loading="loading"
|
|
|
+ :expandedRowKeys="expandedRowKeys"
|
|
|
+ :customRow="Rowclick"
|
|
|
+ rowKey="goodscode"
|
|
|
+ ref="tableRef"
|
|
|
+ :data-source="goodsList"
|
|
|
+ >
|
|
|
<template #totalturnover="{ text }">
|
|
|
<span>{{ changeUnit(text) }}</span>
|
|
|
</template>
|
|
|
@@ -23,16 +25,20 @@
|
|
|
<span>{{ handleNoneValue(text) }}</span>
|
|
|
</template>
|
|
|
<!-- 开盘价 -->
|
|
|
- <template #opened="{ text }">
|
|
|
- <span>{{ handleNoneValue(text) }}</span>
|
|
|
+ <template #opened="{ record, text }">
|
|
|
+ <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
|
|
|
</template>
|
|
|
<!-- 涨跌 -->
|
|
|
- <template #change="{ record }">
|
|
|
- <span>{{ quoteChange(record, record.decimalplace) }}</span>
|
|
|
+ <template #change="{ record, text }">
|
|
|
+ <span
|
|
|
+ :class="handleQuotePriceColor(text, record.presettle)"
|
|
|
+ >{{ quoteChange(record, record.decimalplace) }}</span>
|
|
|
</template>
|
|
|
<!-- 幅度 -->
|
|
|
- <template #amplitude="{ record }">
|
|
|
- <span>{{ quoteAmplitude(record, record.decimalplace) }}</span>
|
|
|
+ <template #amplitude="{ record, text }">
|
|
|
+ <span
|
|
|
+ :class="handleQuotePriceColor(text, record.presettle)"
|
|
|
+ >{{ quoteAmplitude(record, record.decimalplace) }}</span>
|
|
|
</template>
|
|
|
<!-- 振幅 -->
|
|
|
<template #vibration="{ record }">
|
|
|
@@ -43,37 +49,34 @@
|
|
|
</template>
|
|
|
<!-- 买价 -->
|
|
|
<template #bid="{ text, record }">
|
|
|
- <span
|
|
|
- :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
|
|
|
+ <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
|
|
|
</template>
|
|
|
<!-- 卖价 -->
|
|
|
<template #ask="{ text, record }">
|
|
|
- <span
|
|
|
- :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
|
|
|
+ <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
|
|
|
</template>
|
|
|
<!-- 最新价 -->
|
|
|
<template #last="{ text, record }">
|
|
|
- <span
|
|
|
- :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
|
|
|
+ <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
|
|
|
</template>
|
|
|
<!-- 最低价 -->
|
|
|
<template #lowest="{ text, record }">
|
|
|
- <span
|
|
|
- :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
|
|
|
+ <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
|
|
|
</template>
|
|
|
<!-- 最高价 -->
|
|
|
<template #highest="{ text, record }">
|
|
|
- <span
|
|
|
- :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
|
|
|
+ <span :class="handleQuotePriceColor(text, record.presettle)">{{ handleNoneValue(text) }}</span>
|
|
|
</template>
|
|
|
</a-table>
|
|
|
<!-- 右键 -->
|
|
|
<!-- <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="firstBtn"></contextMenu> -->
|
|
|
- <component :is="componentId"
|
|
|
- v-if="componentId"
|
|
|
- :enumName="name"
|
|
|
- :selectedRow="selectedRow"
|
|
|
- @cancel="closeComponent"></component>
|
|
|
+ <component
|
|
|
+ :is="componentId"
|
|
|
+ v-if="componentId"
|
|
|
+ :enumName="name"
|
|
|
+ :selectedRow="selectedRow"
|
|
|
+ @cancel="closeComponent"
|
|
|
+ ></component>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -94,81 +97,81 @@ import { changeUnit } from '@/utils/qt/common';
|
|
|
import { getShowBottomValue } from '@/common/config/constrolBottom';
|
|
|
|
|
|
const columnsList = [
|
|
|
- { title: '序号', key: 'index', width: 80 },
|
|
|
- { title: '代码', key: 'goodscode' },
|
|
|
- { title: '名称', key: 'goodsname' },
|
|
|
- { title: '买价', key: 'bid' },
|
|
|
- { title: '买量', key: 'bidvolume' },
|
|
|
- { title: '卖价', key: 'ask' },
|
|
|
- { title: '卖量', key: 'askvolume' },
|
|
|
- { title: '最新价', key: 'last' },
|
|
|
- { title: '涨跌', key: 'change' }, // 最新价 - 昨结价
|
|
|
- { title: '幅度', key: 'amplitude' }, // (最新价 - 昨结价) / 100 %
|
|
|
- { title: '开盘价', key: 'opened' },
|
|
|
- { title: '昨收价', key: 'preclose' },
|
|
|
- { title: '昨结价', key: 'presettle' },
|
|
|
- { title: '最低价', key: 'lowest' },
|
|
|
- { title: '最高价', key: 'highest' },
|
|
|
- { title: '振幅', key: 'vibration' }, // (最高价 - 最低价 ) / 最新价 * 100 %
|
|
|
- { title: '总量', key: 'totalvolume' },
|
|
|
- { title: '现量', key: 'lastvolume' },
|
|
|
- { title: '持仓量', key: 'holdvolume' },
|
|
|
- { title: '日增', key: 'holdincrement' },
|
|
|
- { title: '金额', key: 'totalturnover' },
|
|
|
+ { title: '序号', key: 'index', width: 80 },
|
|
|
+ { title: '代码', key: 'goodscode' },
|
|
|
+ { title: '名称', key: 'goodsname' },
|
|
|
+ { title: '买价', key: 'bid' },
|
|
|
+ { title: '买量', key: 'bidvolume' },
|
|
|
+ { title: '卖价', key: 'ask' },
|
|
|
+ { title: '卖量', key: 'askvolume' },
|
|
|
+ { title: '最新价', key: 'last' },
|
|
|
+ { title: '涨跌', key: 'change' }, // 最新价 - 昨结价
|
|
|
+ { title: '幅度', key: 'amplitude' }, // (最新价 - 昨结价) / 100 %
|
|
|
+ { title: '开盘价', key: 'opened' },
|
|
|
+ { title: '昨收价', key: 'preclose' },
|
|
|
+ { title: '昨结价', key: 'presettle' },
|
|
|
+ { title: '最低价', key: 'lowest' },
|
|
|
+ { title: '最高价', key: 'highest' },
|
|
|
+ { title: '振幅', key: 'vibration' }, // (最高价 - 最低价 ) / 最新价 * 100 %
|
|
|
+ { title: '总量', key: 'totalvolume' },
|
|
|
+ { title: '现量', key: 'lastvolume' },
|
|
|
+ { title: '持仓量', key: 'holdvolume' },
|
|
|
+ { title: '日增', key: 'holdincrement' },
|
|
|
+ { title: '金额', key: 'totalturnover' },
|
|
|
];
|
|
|
|
|
|
export default defineComponent({
|
|
|
- name: EnumRouterName.spot_trade_reference_market,
|
|
|
- components: {
|
|
|
- contextMenu,
|
|
|
- // [ModalEnum.spot_trade_warehouse_detail]: defineAsyncComponent(() => import('../../components/detail/index.vue')),
|
|
|
- // [ModalEnum.spot_trade_warehouse_post_buying]: defineAsyncComponent(() => import('../../components/post_buying/index.vue')),
|
|
|
- buyAndSell: defineAsyncComponent(() => import('../components/goods-chart/index.vue')),
|
|
|
- // postBuying: defineAsyncComponent(() => import('../../components/post_buying/index.vue')),
|
|
|
- },
|
|
|
- setup() {
|
|
|
- const isBottom = getShowBottomValue();
|
|
|
- // 表头
|
|
|
- const { columns } = handleTableColums(columnsList);
|
|
|
- // 表格列表数据
|
|
|
- const { loading, tableList, queryTable } = queryTableList<QueryDeliveryRelationRsp>();
|
|
|
- const tableRef = ref<any>(null);
|
|
|
- // 行情商品
|
|
|
- const goodsList = getQutoGoodsByTradeMode(TradeMode.quote99);
|
|
|
- // 行情按需订阅
|
|
|
- handleSubcriteOnDemandQuote<QueryQuoteDayRsp>(goodsList);
|
|
|
- // 获取列表数据
|
|
|
- const queryTableAction = () => {
|
|
|
- const param: QueryOrderQuoteReq = {
|
|
|
- wrpricetype: 1,
|
|
|
- haswr: 1,
|
|
|
- };
|
|
|
- queryTable(queryOrderQuote, param);
|
|
|
- };
|
|
|
- // 表格通用逻辑
|
|
|
- const param: ComposeTableParam = {
|
|
|
- queryFn: queryTableAction,
|
|
|
- menuType: EnumRouterName.warehouse_receipt_trade_price,
|
|
|
- tableName: 'table_pcweb_spot_trade_warehouse_price',
|
|
|
- tableFilterKey: [],
|
|
|
- isDetail: false,
|
|
|
- };
|
|
|
- return {
|
|
|
- isBottom,
|
|
|
- ...handleComposeTable<QueryDeliveryRelationRsp>(param),
|
|
|
- loading,
|
|
|
- tableList,
|
|
|
- goodsList,
|
|
|
- tableRef,
|
|
|
- columns,
|
|
|
- changeUnit,
|
|
|
- handleQuotePriceColor,
|
|
|
- quoteChange,
|
|
|
- quoteAmplitude,
|
|
|
- quoteAmplituOfVibration,
|
|
|
- handleNoneValue,
|
|
|
- };
|
|
|
- },
|
|
|
+ name: EnumRouterName.spot_trade_reference_market,
|
|
|
+ components: {
|
|
|
+ contextMenu,
|
|
|
+ // [ModalEnum.spot_trade_warehouse_detail]: defineAsyncComponent(() => import('../../components/detail/index.vue')),
|
|
|
+ // [ModalEnum.spot_trade_warehouse_post_buying]: defineAsyncComponent(() => import('../../components/post_buying/index.vue')),
|
|
|
+ buyAndSell: defineAsyncComponent(() => import('../components/goods-chart/index.vue')),
|
|
|
+ // postBuying: defineAsyncComponent(() => import('../../components/post_buying/index.vue')),
|
|
|
+ },
|
|
|
+ setup() {
|
|
|
+ const isBottom = getShowBottomValue();
|
|
|
+ // 表头
|
|
|
+ const { columns } = handleTableColums(columnsList);
|
|
|
+ // 表格列表数据
|
|
|
+ const { loading, tableList, queryTable } = queryTableList<QueryDeliveryRelationRsp>();
|
|
|
+ const tableRef = ref<any>(null);
|
|
|
+ // 行情商品
|
|
|
+ const goodsList = getQutoGoodsByTradeMode(TradeMode.quote99);
|
|
|
+ // 行情按需订阅
|
|
|
+ handleSubcriteOnDemandQuote<QueryQuoteDayRsp>(goodsList);
|
|
|
+ // 获取列表数据
|
|
|
+ const queryTableAction = () => {
|
|
|
+ const param: QueryOrderQuoteReq = {
|
|
|
+ wrpricetype: 1,
|
|
|
+ haswr: 1,
|
|
|
+ };
|
|
|
+ queryTable(queryOrderQuote, param);
|
|
|
+ };
|
|
|
+ // 表格通用逻辑
|
|
|
+ const param: ComposeTableParam = {
|
|
|
+ queryFn: queryTableAction,
|
|
|
+ menuType: EnumRouterName.warehouse_receipt_trade_price,
|
|
|
+ tableName: 'table_pcweb_spot_trade_warehouse_price',
|
|
|
+ tableFilterKey: [],
|
|
|
+ isDetail: false,
|
|
|
+ };
|
|
|
+ return {
|
|
|
+ isBottom,
|
|
|
+ ...handleComposeTable<QueryDeliveryRelationRsp>(param),
|
|
|
+ loading,
|
|
|
+ tableList,
|
|
|
+ goodsList,
|
|
|
+ tableRef,
|
|
|
+ columns,
|
|
|
+ changeUnit,
|
|
|
+ handleQuotePriceColor,
|
|
|
+ quoteChange,
|
|
|
+ quoteAmplitude,
|
|
|
+ quoteAmplituOfVibration,
|
|
|
+ handleNoneValue,
|
|
|
+ };
|
|
|
+ },
|
|
|
});
|
|
|
</script>
|
|
|
<style lang="less">
|