index.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. <template>
  2. <a-card title="料塔余量" style="margin-bottom: 10px">
  3. <template v-if="starkList.length > 0">
  4. <splide :options="swiperOption">
  5. <splide-slide v-for="item in starkList" :key="item.unitId">
  6. <div class="swiper_item">
  7. <a-row :gutter="10" align="middle" style="height: 100%">
  8. <a-col :span="14">
  9. <div class="swiper_title">{{item.unitName}}</div>
  10. <div class="swiper_sub_title">余量</div>
  11. <div class="swiper_num"><strong>{{item.value}}</strong>吨</div>
  12. </a-col>
  13. <a-col :span="10">
  14. <a-progress type="circle" :percent="item.value" :show-info="false" />
  15. </a-col>
  16. </a-row>
  17. </div>
  18. </splide-slide>
  19. </splide>
  20. </template>
  21. <template v-else>
  22. <a-empty description="暂无数据" />
  23. </template>
  24. </a-card>
  25. <a-card title="料塔余量曲线">
  26. <a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
  27. <a-row :gutter="16">
  28. <a-col :span="4">
  29. <a-form-item name="unitId">
  30. <a-select v-model:value="searchFormState.unitId">
  31. <a-select-option v-for="item in deviceList" :key="item.unitId" :value="item.unitId">{{item.unitName}}</a-select-option>
  32. </a-select>
  33. </a-form-item>
  34. </a-col>
  35. <a-col :span="1">
  36. <a-form-item>
  37. <div :class="['cursor', active === 1 ? 'isActive' : '']" @click="cut(1)">今日</div>
  38. </a-form-item>
  39. </a-col>
  40. <a-col :span="1">
  41. <a-form-item>
  42. <div :class="['cursor', active === 2 ? 'isActive' : '']" @click="cut(2)">本周</div>
  43. </a-form-item>
  44. </a-col>
  45. <a-col :span="1">
  46. <a-form-item>
  47. <div :class="['cursor', active === 3 ? 'isActive' : '']" @click="cut(3)">本月</div>
  48. </a-form-item>
  49. </a-col>
  50. <a-col :span="4">
  51. <a-form-item name="date">
  52. <a-range-picker v-model:value="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
  53. </a-form-item>
  54. </a-col>
  55. <a-col :span="2">
  56. <a-space>
  57. <a-button type="primary" @click="search">
  58. <template #icon><SearchOutlined /></template>
  59. 查询
  60. </a-button>
  61. <a-button @click="reset">重置</a-button>
  62. </a-space>
  63. </a-col>
  64. </a-row>
  65. </a-form>
  66. <div class="chart_content">
  67. <chart-stark v-if="list.length > 0" :id="0" :data="{ unit: '吨', list: list }"></chart-stark>
  68. <a-empty v-else style="padding-top: 100px"/>
  69. </div>
  70. </a-card>
  71. </template>
  72. <script setup name="stark">
  73. import bizFeedStarkApi from "@/api/biz/feed/bizFeedStarkApi"
  74. import bizFeedDeviceApi from "@/api/biz/feed/bizFeedDeviceApi"
  75. import { Splide, SplideSlide } from '@splidejs/vue-splide'
  76. import '@splidejs/splide/dist/css/themes/splide-sea-green.min.css'
  77. import chartStark from '../chart/chartStark.vue'
  78. import dayjs from "dayjs";
  79. const searchFormRef = ref()
  80. const searchFormState = ref({})
  81. const active = ref(1)
  82. const swiperOption = ref({
  83. rewind: true,
  84. perPage: 4,
  85. height: 200,
  86. autoplay: true,
  87. gap: 20
  88. })
  89. const starkList = ref([])
  90. const initData = () => {
  91. bizFeedStarkApi.getStarkData().then((res) => {
  92. starkList.value = res
  93. })
  94. }
  95. const cut = (val) => {
  96. if (active.value === val) {
  97. return
  98. } else {
  99. active.value = val
  100. if(active.value < 4) {
  101. date.value = []
  102. }
  103. }
  104. }
  105. const deviceList = ref([])
  106. const list = ref([])
  107. const initDevice = async () => {
  108. await bizFeedDeviceApi.getDeviceData().then((res) => {
  109. deviceList.value = res
  110. searchFormState.value.unitId = res[0].unitId
  111. })
  112. }
  113. const date = ref([])
  114. watch(date, (newVal) => {
  115. if (newVal.length > 0) {
  116. active.value = 4
  117. }
  118. })
  119. const reset = () => {
  120. searchFormRef.value.resetFields()
  121. table.value.refresh(true)
  122. }
  123. const search = async () => {
  124. let params = {
  125. type: active.value,
  126. startTime: date.value.length > 0 ? date.value[0] : '',
  127. endTime: date.value.length > 0 ? date.value[1] : ''
  128. }
  129. await bizFeedStarkApi.getStarkChart(Object.assign(params, searchFormState.value)).then((res) => {
  130. res.forEach(item => {
  131. if(active.value === 1) {
  132. item.time = dayjs(item.uploadTime).format('HH:mm')
  133. } else {
  134. item.time = dayjs(item.uploadTime).format('MM-DD')
  135. }
  136. })
  137. list.value = res
  138. })
  139. }
  140. onMounted(async () => {
  141. initData()
  142. await initDevice()
  143. await search()
  144. })
  145. </script>
  146. <style scoped>
  147. .cursor {
  148. cursor: pointer;
  149. }
  150. .isActive {
  151. color: #1890ff;
  152. }
  153. .chart_content {
  154. width: 100%;
  155. height: 400px;
  156. }
  157. .swiper_item {
  158. width: 100%;
  159. height: 100%;
  160. border: 1px solid #ddd;
  161. border-radius: 5px;
  162. cursor: pointer;
  163. /*text-align: center;*/
  164. box-sizing: border-box;
  165. padding: 20px;
  166. }
  167. .swiper_title {
  168. font-size: 16px;
  169. margin-bottom: 10px;
  170. }
  171. .swiper_sub_title {
  172. color: #A6A6A6;
  173. margin-bottom: 10px;
  174. }
  175. .swiper_num strong {
  176. font-size: 36px;
  177. }
  178. </style>