铝交易,微信公众号
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

314 lines
6.1 KiB

7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
  1. <template>
  2. <view class="trading-platform">
  3. <topbar showRight="0"></topbar>
  4. <view class="frame">
  5. <!--顶部栏-->
  6. <!--折线图-->
  7. <div ref="chartContainer" class="chart" style="width: 100%; height: 300px;">
  8. </div>
  9. <!-- 供应商 -->
  10. <view v-if="userShop" class="supplier">
  11. <view class="purchaser-title" style="">
  12. <span class="active"> {{ $t('other.orderList') }}</span>
  13. </view>
  14. <view class="supplierList">
  15. <orderList :list="list" />
  16. </view>
  17. </view>
  18. <!-- 采购商 -->
  19. <view v-else class="purchaser">
  20. <!--切换现货/期货-->
  21. <view class="purchaser-title" style="">
  22. <span v-for="(item, index) in type" :class="actionIndex == index ? 'active' : 'noactive'"
  23. @click="actionIndexChange(index)">{{ item.name }}</span>
  24. </view>
  25. <view class="productList">
  26. <productList :list="list" />
  27. </view>
  28. </view>
  29. </view>
  30. <tabber select="1" />
  31. </view>
  32. </template>
  33. <script>
  34. import tabber from '@/components/base/tabbar.vue'
  35. import topbar from "@/components/base/topbar.vue";
  36. import {
  37. mapGetters
  38. } from 'vuex'
  39. import ProductList from "@/components/user/productList.vue";
  40. import OrderList from "@/pages_order/components/order/orderList.vue";
  41. import mixinList from '@/mixins/list.js'
  42. import * as echarts from 'echarts';
  43. export default {
  44. mixins: [mixinList],
  45. components: {
  46. OrderList,
  47. ProductList,
  48. topbar,
  49. tabber,
  50. },
  51. computed: {
  52. ...mapGetters(['userShop']),
  53. },
  54. data() {
  55. return {
  56. actionIndex: 0,
  57. mixinsListApi: 'getMyProductlist',
  58. type: [{
  59. name: this.$t('other.spotTrading')
  60. },
  61. {
  62. name: this.$t('other.futuresTrading')
  63. },
  64. ],
  65. chartData: [
  66. // {date: "08/16", value: 10},
  67. // {date: "08/17", value: 15},
  68. // {date: "08/18", value: 45},
  69. // {date: "08/19", value: 20},
  70. // {date: "08/20", value: 18},
  71. // {date: "08/21", value: 10},
  72. // {date: "08/22", value: 15},
  73. // {date: "08/23", value: 25},
  74. // {date: "08/24", value: 35},
  75. // {date: "08/25", value: 30},
  76. // {date: "08/26", value: 25},
  77. // {date: "08/27", value: 25},
  78. ],
  79. unit: '元/吨',
  80. }
  81. },
  82. onLoad() {
  83. if (this.userShop) {
  84. // 现货/期货列表
  85. this.mixinsListApi = 'productList'
  86. } else {
  87. // 交易平台挂单列表
  88. this.mixinsListApi = 'productlist'
  89. this.queryParams.productType = this.actionIndex
  90. }
  91. },
  92. mounted() {
  93. // this.getAlPrice()
  94. // setTimeout(() => {
  95. // this.initChart();
  96. // })
  97. },
  98. onShow() {
  99. this.getAlPrice()
  100. },
  101. methods: {
  102. getAlPrice() {
  103. this.$api('getAlPrice', res => {
  104. this.unit = res.result.unit
  105. this.chartData = res.result.data
  106. this.initChart(res.result.data)
  107. })
  108. },
  109. initChart(data) {
  110. var that = this;
  111. const chartContainer = this.$refs.chartContainer;
  112. if (!chartContainer) {
  113. console.error("Chart container not found");
  114. return;
  115. }
  116. const myChart = echarts.init(chartContainer);
  117. // 提取日期和数值
  118. const dates = data.map(item => item.date).splice(0, 48);
  119. const values = data.map(item => item.value).splice(0, 48);
  120. // 计算铝均价
  121. let sum = 0
  122. values.forEach(n => {
  123. sum += parseFloat(n)
  124. })
  125. console.log(sum);
  126. // 配置 ECharts
  127. const option = {
  128. backgroundColor: '#1B263B',
  129. title: {
  130. text: `${'铝均价' + (sum / values.length).toFixed(4)}`,
  131. right: '10%',
  132. top: '10%',
  133. textStyle: {
  134. color: '#fff',
  135. fontSize: 14
  136. }
  137. },
  138. tooltip: {
  139. trigger: 'axis',
  140. formatter: '{c0}',
  141. backgroundColor: '#3A506B',
  142. textStyle: {
  143. color: '#fff'
  144. }
  145. },
  146. grid: {
  147. left: '10%',
  148. right: '10%',
  149. bottom: '20%'
  150. },
  151. xAxis: {
  152. type: 'category',
  153. data: dates,
  154. axisLine: {
  155. lineStyle: {
  156. color: '#fff'
  157. }
  158. },
  159. axisLabel: {
  160. color: '#fff'
  161. }
  162. },
  163. yAxis: {
  164. type: 'value',
  165. axisLine: {
  166. lineStyle: {
  167. color: '#fff'
  168. }
  169. },
  170. axisLabel: {
  171. color: '#fff',
  172. formatter: function(value) {
  173. return value;
  174. }
  175. }
  176. },
  177. series: [{
  178. name: '长江',
  179. type: 'line',
  180. data: values,
  181. smooth: true,
  182. symbol: 'circle',
  183. symbolSize: 8,
  184. itemStyle: {
  185. color: '#4ECDC4'
  186. },
  187. lineStyle: {
  188. color: '#4ECDC4',
  189. width: 2
  190. },
  191. areaStyle: {
  192. color: 'rgba(78, 205, 196, 0.2)'
  193. },
  194. }]
  195. };
  196. myChart.setOption(option);
  197. },
  198. // 切换tab
  199. actionIndexChange(index) {
  200. // index为0时切换到现货交易,index为1时切换到期货交易
  201. this.actionIndex = index;
  202. this.queryParams.productType = this.actionIndex
  203. this.getData()
  204. },
  205. }
  206. }
  207. </script>
  208. <style scoped lang="scss">
  209. .trading-platform {
  210. background-image: url('../../static/image/index/1.png');
  211. .frame {
  212. display: flex;
  213. flex-direction: column;
  214. justify-content: center;
  215. height: calc(100vh - 120rpx - 120rpx);
  216. .chart {
  217. height: 300px !important;
  218. background-color: #1B263B;
  219. /* 背景颜色 */
  220. }
  221. .supplier {
  222. height: 70%;
  223. padding: 20rpx 20rpx;
  224. background-image: url('../../static/image/index/1.png');
  225. color: #FFF;
  226. font-size: 32rpx;
  227. .supplierList {
  228. margin-top: 20rpx;
  229. height: 92%;
  230. overflow: auto;
  231. }
  232. .purchaser-title {
  233. height: 8%;
  234. .active {
  235. text-decoration: underline;
  236. width: 80rpx;
  237. margin: 20rpx 20rpx 20rpx 20rpx;
  238. padding: 10rpx 20rpx;
  239. }
  240. .noactive {
  241. width: 80rpx;
  242. margin: 20rpx 20rpx 20rpx 20rpx;
  243. padding: 10rpx 20rpx;
  244. }
  245. }
  246. }
  247. .purchaser {
  248. height: 60%;
  249. padding: 20rpx 0;
  250. color: #FFF;
  251. font-size: 32rpx;
  252. .purchaser-title {
  253. .active {
  254. text-decoration: underline;
  255. width: 80rpx;
  256. margin: 20rpx 20rpx 20rpx 20rpx;
  257. padding: 10rpx 20rpx;
  258. }
  259. .noactive {
  260. width: 80rpx;
  261. margin: 20rpx 20rpx 20rpx 20rpx;
  262. padding: 10rpx 20rpx;
  263. }
  264. }
  265. .productList {
  266. margin-top: 20rpx;
  267. height: 60vh;
  268. overflow: auto;
  269. }
  270. }
  271. }
  272. }
  273. </style>