|
|
@@ -0,0 +1,248 @@
|
|
|
+<template>
|
|
|
+ <div class="box">
|
|
|
+ <h3>架次信息的监控数据和故障监测</h3>
|
|
|
+ <el-form
|
|
|
+ :model="queryParams"
|
|
|
+ ref="queryForm"
|
|
|
+ size="small"
|
|
|
+ :inline="true"
|
|
|
+ v-show="showSearch"
|
|
|
+ label-width="68px"
|
|
|
+ >
|
|
|
+ <el-form-item label="回放速度">
|
|
|
+ <el-select
|
|
|
+ v-model="speed"
|
|
|
+ placeholder="请选择回放速度"
|
|
|
+ @change="changeSpeed"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in speedOption"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="开始时间" prop="startTime">
|
|
|
+ <el-date-picker
|
|
|
+ clearable
|
|
|
+ v-model="queryParams.startTime"
|
|
|
+ type="datetime"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ placeholder="请选择开始时间"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="结束时间" prop="endTime">
|
|
|
+ <el-date-picker
|
|
|
+ clearable
|
|
|
+ v-model="queryParams.endTime"
|
|
|
+ type="datetime"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ placeholder="请选择结束时间"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-search"
|
|
|
+ size="mini"
|
|
|
+ @click="handleQuery"
|
|
|
+ >搜索</el-button
|
|
|
+ >
|
|
|
+ <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
|
|
+ >重置</el-button
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div id="main"></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import * as echarts from "echarts";
|
|
|
+export default {
|
|
|
+ name: "dataPlayBack",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ //eCharts
|
|
|
+ myChart: "",
|
|
|
+ //回放速度
|
|
|
+ speed: 2000,
|
|
|
+ //回放速度的选择器
|
|
|
+ speedOption: [
|
|
|
+ { label: "X0.25", value: 8000 },
|
|
|
+ { label: "X0.5", value: 4000 },
|
|
|
+ { label: "X1.0", value: 2000 },
|
|
|
+ { label: "X1.5", value: 1500 },
|
|
|
+ { label: "X2.0", value: 1000 },
|
|
|
+ ],
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ startTime: '2023-01-02 00:00:00',
|
|
|
+ endTime: '2023-01-02 06:00:00',
|
|
|
+ },
|
|
|
+ // 显示搜索条件
|
|
|
+ showSearch: true,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.creatECharts();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ creatECharts() {
|
|
|
+ if (this.myChart) {
|
|
|
+ this.myChart.dispose();
|
|
|
+ }
|
|
|
+ var dom = document.getElementById("main");
|
|
|
+ this.myChart = echarts.init(dom, null, {
|
|
|
+ renderer: "canvas",
|
|
|
+ useDirtyRect: false,
|
|
|
+ });
|
|
|
+ let option;
|
|
|
+ const a = [
|
|
|
+ ["Income", "Life Expectancy", "Population", "Country", "Year"],
|
|
|
+ [615, 34.05, 251014, "Finland", "2023-01-02 00:00:00"],
|
|
|
+ [315, 34.05, 251014, "Finland", "2023-01-02 01:00:00"],
|
|
|
+ [725, 34.05, 251014, "Finland", "2023-01-02 02:00:00"],
|
|
|
+ [315, 34.05, 251014, "Finland", "2023-01-02 03:00:00"],
|
|
|
+ [515, 34.05, 251014, "Finland", "2023-01-02 04:00:00"],
|
|
|
+ [815, 34.05, 351014, "Finland", "2023-01-02 05:00:00"],
|
|
|
+ [1815, 34.05, 351014, "Finland", "2023-01-02 06:00:00"],
|
|
|
+ [814, 39, 645526, "France", "2023-01-02 00:00:00"],
|
|
|
+ [144, 39, 645526, "France", "2023-01-02 01:00:00"],
|
|
|
+ [454, 39, 645526, "France", "2023-01-02 02:00:00"],
|
|
|
+ [734, 39, 645526, "France", "2023-01-02 03:00:00"],
|
|
|
+ [144, 39, 645526, "France", "2023-01-02 04:00:00"],
|
|
|
+ [999, 39, 645526, "France", "2023-01-02 05:00:00"],
|
|
|
+ [814, 39, 645526, "France", "2023-01-02 06:00:00"],
|
|
|
+ ];
|
|
|
+ let that = this;
|
|
|
+ run(a);
|
|
|
+
|
|
|
+ function run(_rawData) {
|
|
|
+ // var countries = ['Australia', 'Canada', 'China', 'Cuba', 'Finland', 'France', 'Germany', 'Iceland', 'India', 'Japan', 'North Korea', 'South Korea', 'New Zealand', 'Norway', 'Poland', 'Russia', 'Turkey', 'United Kingdom', 'United States'];
|
|
|
+ const countries = ["Finland", "France"];
|
|
|
+ const datasetWithFilters = [];
|
|
|
+ const seriesList = [];
|
|
|
+ echarts.util.each(countries, function (country) {
|
|
|
+ var datasetId = "dataset_" + country;
|
|
|
+ datasetWithFilters.push({
|
|
|
+ id: datasetId,
|
|
|
+ fromDatasetId: "dataset_raw",
|
|
|
+ transform: {
|
|
|
+ type: "filter",
|
|
|
+ config: {
|
|
|
+ and: [
|
|
|
+ {
|
|
|
+ dimension: "Year",
|
|
|
+ gte:that.queryParams.startTime,
|
|
|
+ parser: 'time'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dimension: "Year",
|
|
|
+ lt:that.queryParams.endTime,
|
|
|
+ parser: 'time'
|
|
|
+ },
|
|
|
+ { dimension: "Country", "=": country },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ seriesList.push({
|
|
|
+ type: "line",
|
|
|
+ datasetId: datasetId,
|
|
|
+ showSymbol: false,
|
|
|
+ name: country,
|
|
|
+ endLabel: {
|
|
|
+ show: true,
|
|
|
+ formatter: function (params) {
|
|
|
+ return params.value[3] + ": " + params.value[0];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelLayout: {
|
|
|
+ moveOverlap: "shiftY",
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: "series",
|
|
|
+ },
|
|
|
+ encode: {
|
|
|
+ x: "Year",
|
|
|
+ y: "Income",
|
|
|
+ label: ["Country", "Income"],
|
|
|
+ itemName: "Year",
|
|
|
+ tooltip: ["Income"],
|
|
|
+ },
|
|
|
+ });
|
|
|
+ });
|
|
|
+ option = {
|
|
|
+ animationDuration: that.speed,
|
|
|
+ dataset: [
|
|
|
+ {
|
|
|
+ id: "dataset_raw",
|
|
|
+ source: _rawData,
|
|
|
+ },
|
|
|
+ ...datasetWithFilters,
|
|
|
+ ],
|
|
|
+ title: {
|
|
|
+ text: "",
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ order: "valueDesc",
|
|
|
+ trigger: "axis",
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ nameLocation: "middle",
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ name: "Income",
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ right: 140,
|
|
|
+ },
|
|
|
+ series: seriesList,
|
|
|
+ };
|
|
|
+ that.myChart.setOption(option);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 表单重置
|
|
|
+ reset() {
|
|
|
+ this.form = {
|
|
|
+ startTime: null,
|
|
|
+ endTime: null,
|
|
|
+ };
|
|
|
+ this.resetForm("form");
|
|
|
+ },
|
|
|
+ //选择事件
|
|
|
+ changeSpeed(value) {
|
|
|
+ this.speed = value;
|
|
|
+ this.creatECharts();
|
|
|
+ },
|
|
|
+ /** 搜索按钮操作 */
|
|
|
+ handleQuery() {
|
|
|
+ this.creatECharts();
|
|
|
+ },
|
|
|
+ /** 重置按钮操作 */
|
|
|
+ resetQuery() {
|
|
|
+ this.resetForm("queryForm");
|
|
|
+ this.handleQuery();
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.box {
|
|
|
+ width: 1200px;
|
|
|
+ height: 600px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+#main {
|
|
|
+ width: 1200px;
|
|
|
+ height: 600px;
|
|
|
+}
|
|
|
+</style>
|
