|
|
@@ -0,0 +1,270 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="filters-container">
|
|
|
+
|
|
|
+ <el-input placeholder="关键字" size="small" v-model="filter1" clearable class="filter-item"></el-input>
|
|
|
+ <el-button @click="searchData" type="primary" size="small" icon="el-icon-search" class="filter-item">搜索
|
|
|
+ </el-button>
|
|
|
+ <el-button @click="showAdvancedQueryDialog = !showAdvancedQueryDialog" type="primary" size="small" icon="el-icon-search" class="filter-item">高级查询
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <el-dialog title="高级查询" :visible.sync="showAdvancedQueryDialog">
|
|
|
+ <el-button @click="addField" type="text" icon="el-icon-plus">添加</el-button>
|
|
|
+ <el-table :data="advancedQueryFields">
|
|
|
+
|
|
|
+ <el-table-column prop="link" label="链接符" align="center">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <el-select placeholder="链接" size="small" v-model="row.link" class="filter-item">
|
|
|
+ <el-option label="AND" value="AND">
|
|
|
+ </el-option>
|
|
|
+ <el-option label="OR" value="OR">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" label="字段" align="center">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <el-select v-model="row.name">
|
|
|
+
|
|
|
+ <el-option v-for="item in advancedQueryColumns" :label="item.label" :value="item.value" :key="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="searchMethod" label="搜索方式" width="150" align="center">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <el-select v-model="row.searchMethod">
|
|
|
+ <el-option v-for="item in searchMethods" :label="item" :value="item" :key="item"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="value" label="参数" align="center">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <el-input v-model="row.value"></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column width="60" align="center">
|
|
|
+ <template slot-scope="{ row, column, $index }">
|
|
|
+ <el-button @click="removeField($index)" size="small" type="text">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+
|
|
|
+ <el-button @click="advancedQuery" :loading="$store.state.fetchingData">确定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <line-chart ref="line" :height='200' :chartData='lineData' :options='lineOptions' style="max-width:1000px;margin:auto"></line-chart>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { mapState } from 'vuex'
|
|
|
+import { format } from 'date-fns'
|
|
|
+import zh from 'date-fns/locale/zh_cn'
|
|
|
+import lineChart from '../components/Line'
|
|
|
+
|
|
|
+export default {
|
|
|
+ created() {
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ filter1: '',
|
|
|
+ multipleMode: false,
|
|
|
+ showAdvancedQueryDialog: false,
|
|
|
+ advancedQueryFields: [],
|
|
|
+ searchMethods: ['=', '!=', '>', '>=', '<', '<=', 'like'],
|
|
|
+ advancedQueryColumns: [
|
|
|
+ {
|
|
|
+ label: 'id',
|
|
|
+ value: 'id'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '名字',
|
|
|
+ value: 'test_name'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '备注',
|
|
|
+ value: 'remark'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '图片',
|
|
|
+ value: 'image_url'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '时间',
|
|
|
+ value: 'test_time'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '多选',
|
|
|
+ value: 'multi_select'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ advancedQuerySearchKey: '',
|
|
|
+ lineData: null,
|
|
|
+ lineOptions: {
|
|
|
+ responsive: true,
|
|
|
+ title: {
|
|
|
+ display: true,
|
|
|
+ text: '折线图'
|
|
|
+ },
|
|
|
+ tooltips: {
|
|
|
+ mode: 'index',
|
|
|
+ intersect: false,
|
|
|
+ },
|
|
|
+ // hover: {
|
|
|
+ // mode: 'nearest',
|
|
|
+ // intersect: true
|
|
|
+ // },
|
|
|
+ scales: {
|
|
|
+ xAxes: [{
|
|
|
+ display: true,
|
|
|
+ scaleLabel: {
|
|
|
+ display: true,
|
|
|
+ labelString: 'Month'
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ yAxes: [{
|
|
|
+ display: true,
|
|
|
+ scaleLabel: {
|
|
|
+ display: true,
|
|
|
+ labelString: 'Value'
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ chartColors: {
|
|
|
+ red: 'rgb(255, 99, 132)',
|
|
|
+ orange: 'rgb(255, 159, 64)',
|
|
|
+ yellow: 'rgb(255, 205, 86)',
|
|
|
+ green: 'rgb(75, 192, 192)',
|
|
|
+ blue: 'rgb(54, 162, 235)',
|
|
|
+ purple: 'rgb(153, 102, 255)',
|
|
|
+ grey: 'rgb(201, 203, 207)'
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getData() {
|
|
|
+ this.type = this.$route.query.type
|
|
|
+ this.$http.get({
|
|
|
+ url: '/testAaa/all',
|
|
|
+ data: {
|
|
|
+ searchKey: this.filter1,
|
|
|
+ advancedQuery: this.advancedQuerySearchKey,
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ var tempLables = [];
|
|
|
+ var tempDatasetsLabels = [];
|
|
|
+
|
|
|
+ res.data.forEach(item => {
|
|
|
+ tempLables.push(item.testName);
|
|
|
+ tempDatasetsLabels.push(item.remark);
|
|
|
+ })
|
|
|
+
|
|
|
+ tempLables = Array.from(new Set(tempLables));
|
|
|
+
|
|
|
+ tempDatasetsLabels = Array.from(new Set(tempDatasetsLabels))
|
|
|
+
|
|
|
+ var tempDatasets = []
|
|
|
+
|
|
|
+ tempDatasetsLabels.forEach((item, index) => {
|
|
|
+
|
|
|
+ var colorNames = Object.keys(this.chartColors);
|
|
|
+ var colorName = colorNames[(index + 1) % colorNames.length];
|
|
|
+
|
|
|
+ var tempData = [];
|
|
|
+
|
|
|
+ tempLables.forEach(item2 => {
|
|
|
+ var datavalue = null;
|
|
|
+ res.data.forEach(item3 => {
|
|
|
+ if (item2 == item3.testName && item == item3.remark) {
|
|
|
+ datavalue = item3.multiSelect;
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ tempData.push(datavalue)
|
|
|
+ })
|
|
|
+
|
|
|
+ var newDataset = {
|
|
|
+ label: item,
|
|
|
+ backgroundColor: this.chartColors[colorName],
|
|
|
+ borderColor: this.chartColors[colorName],
|
|
|
+ data: tempData,
|
|
|
+ fill: false
|
|
|
+ }
|
|
|
+
|
|
|
+ tempDatasets.push(newDataset);
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ this.lineData = {
|
|
|
+ datasets: tempDatasets,
|
|
|
+ labels: tempLables,
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ this.$refs.line.updateChart()
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ addField() {
|
|
|
+ this.advancedQueryFields.push({
|
|
|
+ link: 'AND',
|
|
|
+ name: '',
|
|
|
+ searchMethod: '=',
|
|
|
+ value: '',
|
|
|
+ });
|
|
|
+ },
|
|
|
+ removeField(i) {
|
|
|
+ if (this.advancedQueryFields.length > 0) {
|
|
|
+ this.advancedQueryFields.splice(i, 1);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ advancedQuery() {
|
|
|
+
|
|
|
+ this.advancedQuerySearchKey = '';
|
|
|
+
|
|
|
+ if (this.advancedQueryFields.length > 0) {
|
|
|
+
|
|
|
+ var templist = [];
|
|
|
+
|
|
|
+ this.advancedQueryFields.forEach(item => {
|
|
|
+ if (item.link && item.name && item.searchMethod && item.value) {
|
|
|
+ var tempItem = item.link + '_,' + item.name + '_,' + item.searchMethod + '_,' + item.value;
|
|
|
+ templist.push(tempItem);
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ if (templist.length > 0) {
|
|
|
+
|
|
|
+ this.advancedQuerySearchKey = templist.join('_;');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ this.getData();
|
|
|
+ this.$refs.line.updateChart()
|
|
|
+ this.showAdvancedQueryDialog = false;
|
|
|
+ },
|
|
|
+ searchData() {
|
|
|
+ this.getData();
|
|
|
+ setTimeout(() => {
|
|
|
+
|
|
|
+ }, 1000)
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ components: { lineChart }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+</style>
|