- <template>
- <div class="longYW">
- <div class="partTitleHM">
- 污水厂进口BOD
- <div class="head-right" style="">
- <el-form-item prop="sewageCode" style="width: 55%">
- <el-select :clearable="false" v-model="queryParams.sewageCode" size="small" @change="changeSewage">
- <el-option v-for="item in ListBod" :key="item.sewageCode" :label="item.sewageName" :value="item.sewageCode" />
- </el-select>
- </el-form-item>
- <el-form-item style="width: 41%; margin-left: 10px">
- <el-date-picker
- type="year"
- v-model="queryParams.dataTime"
- value-format="YYYY"
- placeholder="请选择年"
- style="width: 100%"
- size="small"
- @change="changeDataTime"
- :clearable="false"
- ></el-date-picker>
- </el-form-item>
- </div>
- </div>
- <div class="ConstrucClass">
- <SewageBODEchaer :data="chartData3" :key="refresh1"></SewageBODEchaer>
- </div>
- </div>
- </template>
-
- <script setup>
- import SewageBODEchaer from '@/views/sponeScreen/Echarts/SewageBODEchaer.vue';
- import { sewageBodPage, facilitySewagelist } from '@/api/publicService/index';
-
- const { proxy } = getCurrentInstance();
- const ListBod = ref([]);
-
- const refresh1 = ref(1);
- const chartData3 = ref({
- XName: [],
- data1: [],
- controlMarkLine: [],
- controlGraphic: '',
- });
- const AllData = reactive({
- queryParams: {
- pageNum: 1,
- pageSize: 10000,
- sewageCode: undefined,
- dataTime: undefined,
- },
- });
- const { queryParams } = toRefs(AllData);
-
- //下拉框列表
- function getUserList() {
- facilitySewagelist().then(res => {
- ListBod.value = res.data || [];
- queryParams.value.sewageCode = res.data[2].sewageCode;
- });
- }
- /** 获取搜索数据列表 */
- function getDataList() {
- sewageBodPage(queryParams.value).then(response => {
- if (queryParams.value.dataTime == '2022') {
- chartData3.value.controlMarkLine = [{ typeName: '考核达标', value: '130', Opacity: 1, color: '#e15a6b' }];
- } else if (queryParams.value.dataTime == '2023') {
- chartData3.value.controlMarkLine = [{ typeName: '考核达标', value: '132', Opacity: 1, color: '#e15a6b' }];
- } else {
- chartData3.value.controlMarkLine = [{ typeName: '考核达标', value: '135', Opacity: 1, color: '#e15a6b' }];
- }
- let SewageList = [];
- let SewageTime = [];
- response.data.forEach(element => {
- SewageList.push(Number(element.bod));
- SewageTime.push(element.dataTime);
- });
- chartData3.value.data1 = SewageList;
- chartData3.value.XName = SewageTime;
- refresh1.value++;
- });
- }
- // 下拉框事件
- function changeSewage(val) {
- queryParams.value.sewageCode = val;
- getDataList();
- }
-
- // 年份事件
- function changeDataTime(val) {
- queryParams.value.dataTime = val;
- getDataList();
- }
-
- onMounted(() => {
- queryParams.value.dataTime = '2023';
- getUserList();
- setTimeout(() => {
- getDataList();
- }, 350);
- });
- </script>
-
- <style lang="scss" scoped>
- .longYW {
- margin-top: 10px;
- width: 100%;
- height: 30%;
-
- opacity: 0.8;
- .head-right {
- cursor: pointer;
- position: relative;
- left: 180px;
- top: -33px;
- width: 210px;
- height: 32px;
- display: flex;
- // background: red;
- }
- }
- .ConstrucClass {
- height: calc(100% - 15%);
- background: #004565;
- margin-top: -3px;
- // background: red;
- }
- </style>