铝交易,微信公众号
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.

372 lines
7.5 KiB

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