| 提交 | 用户 | 时间 | ||
| 850106 | 1 | <template> |
| H | 2 | <el-card shadow="never" class="aui-card--fill"> |
| 3 | <el-form | |
| 4 | :inline="true" | |
| 5 | :model="dataForm" | |
| 6 | @keyup.enter.native="getDataList()" | |
| 7 | > | |
| 8 | <el-tabs v-model="activeName" @tab-click="handleClick"> | |
| 9 | <el-tab-pane label="原煤" name="yuanmei"> | |
| 10 | </el-tab-pane> | |
| 11 | <el-tab-pane label="洗选" name="xixuan"> | |
| 12 | </el-tab-pane> | |
| 13 | <el-tab-pane label="仓储" name="cangchu"> | |
| 14 | </el-tab-pane> | |
| 15 | </el-tabs> | |
| 16 | <el-form-item> | |
| 17 | <dict-select-tag | |
| 18 | v-model="dataForm.orderType" | |
| 19 | placeholder="生产指标" | |
| 20 | dictCode="order-type" | |
| 21 | :clearable="true" | |
| 22 | /> | |
| 23 | </el-form-item> | |
| 24 | <el-form-item> | |
| 25 | <el-date-picker | |
| 26 | v-model="dataForm.startTime" | |
| 27 | type="datetime" | |
| 28 | placeholder="选择开始时间" | |
| 29 | value-format="yyyy-MM-dd HH:mm" | |
| 30 | > | |
| 31 | </el-date-picker> | |
| 32 | </el-form-item> | |
| 33 | <el-form-item> | |
| 34 | <el-date-picker | |
| 35 | v-model="dataForm.endTime" | |
| 36 | type="datetime" | |
| 37 | placeholder="选择结束时间" | |
| 38 | value-format="yyyy-MM-dd HH:mm" | |
| 39 | > | |
| 40 | </el-date-picker> | |
| 41 | </el-form-item> | |
| 42 | <el-form-item> | |
| 43 | <el-button @click="getDataList()">{{ $t("query") }}</el-button> | |
| 44 | </el-form-item> | |
| 45 | <el-form-item> | |
| 46 | <el-button @click="exportExcel()">导出</el-button> | |
| 47 | </el-form-item> | |
| 48 | </el-form> | |
| 49 | <el-table | |
| 50 | ref="table" | |
| 51 | v-loading="dataListLoading" | |
| 52 | :data="dataList" | |
| 53 | border | |
| 54 | style="width: 100%" | |
| 55 | >`` | |
| 56 | <el-table-column | |
| 57 | type="index" | |
| 58 | header-align="center" | |
| 59 | align="center" | |
| 60 | width="50" | |
| 61 | label="序号" | |
| 62 | ></el-table-column> | |
| 63 | <el-table-column | |
| 64 | prop="date" | |
| 65 | header-align="center" | |
| 66 | align="center" | |
| 67 | label="日期时间" | |
| 68 | ></el-table-column> | |
| 69 | <el-table-column | |
| 70 | prop="device" | |
| 71 | header-align="center" | |
| 72 | align="center" | |
| 73 | label="生产指标" | |
| 74 | ></el-table-column> | |
| 75 | <el-table-column | |
| 76 | prop="evaluate" | |
| 77 | header-align="center" | |
| 78 | align="center" | |
| 79 | label="评价等级" | |
| 80 | ></el-table-column> | |
| 81 | </el-table> | |
| 82 | <el-pagination | |
| 83 | :current-page="page" | |
| 84 | :page-sizes="[10, 20, 50, 100]" | |
| 85 | :page-size="limit" | |
| 86 | :total="total" | |
| 87 | layout="total, sizes, prev, pager, next, jumper" | |
| 88 | @size-change="pageSizeChangeHandle" | |
| 89 | @current-change="pageCurrentChangeHandle" | |
| 90 | > | |
| 91 | </el-pagination> | |
| 92 | <div style="width: 600px;height:400px;margin-left:auto;margin-right:auto "> | |
| 93 | <bar-line :option="chartOption"></bar-line> | |
| 94 | </div> | |
| 95 | </el-card> | |
| 96 | </template> | |
| 97 | ||
| 98 | <script> | |
| 99 | import mixinViewModule from "@/mixins/view-module"; | |
| 100 | import DictSelectTag from "@/components/dict/dict-select-tag.vue"; | |
| 101 | import { exportByDom } from "@/utils/exportUtil"; | |
| 102 | import BarLine from "@/components/chart/bar-line.vue"; | |
| 103 | export default { | |
| 104 | mixins: [mixinViewModule], | |
| 105 | components: { | |
| 106 | BarLine, | |
| 107 | DictSelectTag, | |
| 108 | }, | |
| 109 | data() { | |
| 110 | return { | |
| 111 | loading: false, | |
| 112 | mixinViewModuleOptions: { | |
| 113 | getDataListURL: "", | |
| 114 | getDataListIsPage: true, | |
| 115 | }, | |
| 116 | chartOption: {}, | |
| 117 | dataForm: { | |
| 118 | orderType: "", | |
| 119 | operation: "", | |
| 120 | startTime: "", | |
| 121 | endTime: "", | |
| 122 | }, | |
| 123 | }; | |
| 124 | }, | |
| 125 | mounted() { | |
| 126 | this.getchartOption(); | |
| 127 | }, | |
| 128 | methods: { | |
| 129 | getchartOption(){ | |
| 130 | this.chartOption={ | |
| 131 | tooltip: { | |
| 132 | trigger: "axis" | |
| 133 | }, | |
| 134 | legend: {}, | |
| 135 | grid: { | |
| 136 | left: "3%", | |
| 137 | right: "4%", | |
| 138 | bottom: "3%", | |
| 139 | containLabel: true, | |
| 140 | }, | |
| 141 | xAxis: { | |
| 142 | type: "value", | |
| 143 | boundaryGap: [0, 0.01], | |
| 144 | interval: 10, | |
| 145 | axisLabel: { | |
| 146 | formatter: function (value, index) { | |
| 147 | if (value === 60) { | |
| 148 | return "合格"; | |
| 149 | } else if (value === 70) { | |
| 150 | return "良"; | |
| 151 | } else if (value === 90) { | |
| 152 | return "优"; | |
| 153 | } else { | |
| 154 | return ""; | |
| 155 | } | |
| 156 | }, | |
| 157 | }, | |
| 158 | }, | |
| 159 | yAxis: { | |
| 160 | type: "category", | |
| 161 | data: [ | |
| 162 | "平均灰分", | |
| 163 | "平均热值", | |
| 164 | "平均水分", | |
| 165 | "平均硫分", | |
| 166 | "入洗率", | |
| 167 | "装车率", | |
| 168 | ], | |
| 169 | }, | |
| 170 | series: [ | |
| 171 | { | |
| 172 | type: "bar", | |
| 173 | data: [80, 70, 90, 40, 60, 100], | |
| 174 | }, | |
| 175 | ]} | |
| 176 | }, | |
| 177 | exportExcel() { | |
| 178 | let dom = this.$refs.table; | |
| 179 | exportByDom(dom, undefined, "生产指标评价"); | |
| 180 | }, | |
| 181 | }, | |
| 182 | }; | |
| 183 | </script> | |
