选煤厂生产管理平台前端代码
dongyukun
2024-12-10 5cc1d92af645c2f8f4f6d1d3777283b70df78ccd
提交 | 用户 | 时间
5cc1d9 1 <template>
D 2   <el-card shadow="never" class="aui-card--fill">
3     <div class="mod-index-full">
4       <el-form :inline="true" :model="dataForm" label-width="100px">
5         <el-form-item :label="$t('datePicker.date')">
6           <el-date-picker
7             v-model="dataForm.dateRange"
8             type="datetimerange"
9             format="yyyy-MM-dd HH:mm"
10             value-format="yyyy-MM-dd HH:mm"
11             range-separator="至"
12             start-placeholder="开始日期"
13             end-placeholder="结束日期"
14           >
15           </el-date-picker>
16         </el-form-item>
17         <el-form-item label="系统">
18           <dict-select-tag
19             style="width: 100%"
20             v-model="dataForm.index"
21             placeholder="系统"
22             dictCode="scxt"
23             :clearable="false"
24           />
25         </el-form-item>
26         <el-form-item>
27           <el-button @click="queryChart()">{{ $t("query") }}</el-button>
28         </el-form-item>
29       </el-form>
30     </div>
31     <div id="chartLineBox" style="width: 90%; height: 70vh"></div>
32   </el-card>
33 </template>
34 <script>
35 import DictSelectTag from "@/components/dict/dict-select-tag";
36 import BarLine from "@/components/chart/bar-line";
37 import { getYMD } from "@/utils/dateUtils";
38 import * as echarts from "echarts";
39
40 export default {
41   components: { DictSelectTag, BarLine },
42   data() {
43     return {
44       loading: false,
45       chartOption: {},
46       dataForm: {
47         groupType: "day",
48         dateRange: [],
49         index: "",
50       },
51     };
52   },
53   mounted() {
54     this.chartLine = echarts.init(document.getElementById("chartLineBox"));
55
56     // 指定图表的配置项和数据
57     var option = {
58       tooltip: {
59         //设置tip提示
60         trigger: "axis",
61       },
62       color: ["#869ad7"], //设置区分(每条线是什么颜色,和 legend 一一对应)
63       xAxis: {
64         //设置x轴
65         boundaryGap: false,
66         type: "category",
67         boundaryGap: false, //坐标轴两边不留白
68         data: [
69           "2023-5-31 00:00:00",
70           "2023-5-31 01:00:00",
71           "2023-5-31 02:00:00",
72           "2023-5-31 03:00:00",
73           "2023-5-31 04:00:00",
74           "2023-5-31 05:00:00",
75           "2023-5-31 06:00:00",
76         ],
77         name: "时间", //X轴 name
78         nameTextStyle: {
79           //坐标轴名称的文字样式
80           color: "black",
81           fontSize: 16,
82           padding: [0, 0, 0, 20],
83         },
84         axisLine: {
85           //坐标轴轴线相关设置。
86           lineStyle: {
87             color: "black",
88           },
89         },
90       },
91       yAxis: {
92         nameTextStyle: {
93           color: "black",
94           fontSize: 16,
95           padding: [0, 0, 10, 0],
96         },
97         axisLine: {
98           lineStyle: {
99             color: "black",
100           },
101         },
102         type: "value",
103         min: 0,
104         max: 1,
105         splitNumber: 1,
106         axisLabel: {
107           formatter: function (value, index) {
108             return value === 0 ? "未运行" : "运行";
109           },
110         },
111       },
112       series: [
113         {
114           areaStyle: {},
115           name: "是否运行",
116           data: [0, 1, 0, 0, 1, 1, 1],
117           type: "line",
118           step: "end",
119           lineStyle: {
120             normal: {
121               color: "#869ad7",
122             },
123           },
124         },
125       ],
126     };
127
128     // 使用刚指定的配置项和数据显示图表。
129     this.chartLine.setOption(option);
130   },
131   methods: {
132     init() {
133       this.dataForm.dateRange = [];
134       this.dataForm.dateRange.push(
135         getYMD(new Date().getTime() - 3600 * 1000 * 24 * 30) + " 00:00"
136       );
137       this.dataForm.dateRange.push(getYMD(new Date()) + " 23:59");
138     },
139
140     queryChart() {
141       let params = {
142         groupType: this.dataForm.groupType,
143         startDate: this.dataForm.dateRange[0] + ":00",
144         endDate: this.dataForm.dateRange[1] + ":59",
145         index: this.dataForm.index,
146       };
147       this.loading = true;
148       this.$http
149         .post(`/iailab-iems-coal-proddisp/analysis/index/chart`, params)
150         .then(({ data: res }) => {
151           this.loading = false;
152           if (res.code !== 0) {
153             return this.$message.error(res.msg);
154           }
155           let series = [];
156           if (res.data.series) {
157             res.data.series.forEach(function (item) {
158               series.push({
159                 name: item.name,
160                 data: item.data,
161                 type: "line",
162                 smooth: false,
163               });
164             });
165           }
166
167           this.chartOption = {
168             grid: {
169               top: "8%",
170               right: "10%",
171               bottom: "12%",
172               left: "10%",
173             },
174             legend: {
175               type: "scroll",
176               orient: "vertical",
177               right: 5,
178               top: 20,
179               bottom: 20,
180               data: res.data.legend,
181             },
182             toolbox: {
183               show: true,
184               top: 0,
185               right: "10%",
186               feature: {
187                 dataView: { readOnly: false },
188                 magicType: { type: ["line", "bar"] },
189                 saveAsImage: {},
190               },
191             },
192             xAxis: {
193               type: "category",
194               data: res.data.categories,
195             },
196             yAxis: {
197               type: "value",
198               name: res.data.valueName,
199               nameTextStyle: {
200                 fontWeight: "bold",
201               },
202               axisLine: {
203                 show: true,
204               },
205             },
206             series: series,
207           };
208         })
209         .catch(() => {
210           this.loading = false;
211         });
212     },
213   },
214 };
215 </script>