Newer
Older
KaiFengPC / src / views / sponeScreen / longYW / SewageBOD.vue
@zhangdeliang zhangdeliang on 7 Nov 3 KB update
  1. <template>
  2. <div class="longYW">
  3. <div class="partTitleHM">
  4. 污水厂进口BOD
  5. <div class="head-right" style="">
  6. <el-form-item prop="sewageCode" style="width: 55%">
  7. <el-select :clearable="false" v-model="queryParams.sewageCode" size="small" @change="changeSewage">
  8. <el-option v-for="item in ListBod" :key="item.sewageCode" :label="item.sewageName" :value="item.sewageCode" />
  9. </el-select>
  10. </el-form-item>
  11. <el-form-item style="width: 41%; margin-left: 10px">
  12. <el-date-picker
  13. type="year"
  14. v-model="queryParams.dataTime"
  15. value-format="YYYY"
  16. placeholder="请选择年"
  17. style="width: 100%"
  18. size="small"
  19. @change="changeDataTime"
  20. :clearable="false"
  21. ></el-date-picker>
  22. </el-form-item>
  23. </div>
  24. </div>
  25. <div class="ConstrucClass">
  26. <SewageBODEchaer :data="chartData3" :key="refresh1"></SewageBODEchaer>
  27. </div>
  28. </div>
  29. </template>
  30.  
  31. <script setup>
  32. import SewageBODEchaer from '@/views/sponeScreen/Echarts/SewageBODEchaer.vue';
  33. import { sewageBodPage, facilitySewagelist } from '@/api/publicService/index';
  34.  
  35. const { proxy } = getCurrentInstance();
  36. const ListBod = ref([]);
  37.  
  38. const refresh1 = ref(1);
  39. const chartData3 = ref({
  40. XName: [],
  41. data1: [],
  42. controlMarkLine: [],
  43. controlGraphic: '',
  44. });
  45. const AllData = reactive({
  46. queryParams: {
  47. pageNum: 1,
  48. pageSize: 10000,
  49. sewageCode: undefined,
  50. dataTime: undefined,
  51. },
  52. });
  53. const { queryParams } = toRefs(AllData);
  54.  
  55. //下拉框列表
  56. function getUserList() {
  57. facilitySewagelist().then(res => {
  58. ListBod.value = res.data || [];
  59. queryParams.value.sewageCode = res.data[2].sewageCode;
  60. });
  61. }
  62. /** 获取搜索数据列表 */
  63. function getDataList() {
  64. sewageBodPage(queryParams.value).then(response => {
  65. if (queryParams.value.dataTime == '2022') {
  66. chartData3.value.controlMarkLine = [{ typeName: '考核达标', value: '130', Opacity: 1, color: '#e15a6b' }];
  67. } else if (queryParams.value.dataTime == '2023') {
  68. chartData3.value.controlMarkLine = [{ typeName: '考核达标', value: '132', Opacity: 1, color: '#e15a6b' }];
  69. } else {
  70. chartData3.value.controlMarkLine = [{ typeName: '考核达标', value: '135', Opacity: 1, color: '#e15a6b' }];
  71. }
  72. let SewageList = [];
  73. let SewageTime = [];
  74. response.data.forEach(element => {
  75. SewageList.push(Number(element.bod));
  76. SewageTime.push(element.dataTime);
  77. });
  78. chartData3.value.data1 = SewageList;
  79. chartData3.value.XName = SewageTime;
  80. refresh1.value++;
  81. });
  82. }
  83. // 下拉框事件
  84. function changeSewage(val) {
  85. queryParams.value.sewageCode = val;
  86. getDataList();
  87. }
  88.  
  89. // 年份事件
  90. function changeDataTime(val) {
  91. queryParams.value.dataTime = val;
  92. getDataList();
  93. }
  94.  
  95. onMounted(() => {
  96. queryParams.value.dataTime = '2023';
  97. getUserList();
  98. setTimeout(() => {
  99. getDataList();
  100. }, 350);
  101. });
  102. </script>
  103.  
  104. <style lang="scss" scoped>
  105. .longYW {
  106. margin-top: 10px;
  107. width: 100%;
  108. height: 30%;
  109.  
  110. opacity: 0.8;
  111. .head-right {
  112. cursor: pointer;
  113. position: relative;
  114. left: 180px;
  115. top: -33px;
  116. width: 210px;
  117. height: 32px;
  118. display: flex;
  119. // background: red;
  120. }
  121. }
  122. .ConstrucClass {
  123. height: calc(100% - 15%);
  124. background: #004565;
  125. margin-top: -3px;
  126. // background: red;
  127. }
  128. </style>