|
@@ -1,7 +1,8 @@
|
|
<template>
|
|
<template>
|
|
<div class="content-chart-row">
|
|
<div class="content-chart-row">
|
|
<div class="column-row-title">
|
|
<div class="column-row-title">
|
|
- <span class="title-text"><img src="@/assets/images/title-icon.png" alt=""/>重点指标运行趋势
|
|
|
|
|
|
+ <span class="title-text" @click="handleTarget" style="cursor: pointer">
|
|
|
|
+ <img src="@/assets/images/title-icon.png" alt=""/>重点指标运行趋势
|
|
<span class="s-span">(周)</span>
|
|
<span class="s-span">(周)</span>
|
|
</span>
|
|
</span>
|
|
<span class="btn-span" @click="visible=true">指标配置</span>
|
|
<span class="btn-span" @click="visible=true">指标配置</span>
|
|
@@ -31,15 +32,22 @@
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
import {msTrend,msTrendDetail} from "@/api/index/hl"
|
|
import {msTrend,msTrendDetail} from "@/api/index/hl"
|
|
import {formatDate} from "@/utils/index.js"
|
|
import {formatDate} from "@/utils/index.js"
|
|
|
|
+import {useRouter} from "vue-router"
|
|
import indexConfig from "./indexConfig.vue"
|
|
import indexConfig from "./indexConfig.vue"
|
|
import * as echarts from "echarts";
|
|
import * as echarts from "echarts";
|
|
import {onUnmounted} from "vue";
|
|
import {onUnmounted} from "vue";
|
|
|
|
+const router = useRouter()
|
|
const props = defineProps(["refreshTime"])
|
|
const props = defineProps(["refreshTime"])
|
|
const trendData = ref([])
|
|
const trendData = ref([])
|
|
const active = ref(0)
|
|
const active = ref(0)
|
|
const chartSort = ref(null)
|
|
const chartSort = ref(null)
|
|
const visible = ref(false)
|
|
const visible = ref(false)
|
|
const interval = ref(null)
|
|
const interval = ref(null)
|
|
|
|
+
|
|
|
|
+const handleTarget=()=>{
|
|
|
|
+ router.push("/obj/obj")
|
|
|
|
+}
|
|
|
|
+
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
getMsTrend()
|
|
getMsTrend()
|
|
interval.value = setInterval(() => {
|
|
interval.value = setInterval(() => {
|
|
@@ -66,17 +74,29 @@ async function clickTrend(index){
|
|
function initChart(res) {
|
|
function initChart(res) {
|
|
const myChart = echarts.init(chartSort.value);
|
|
const myChart = echarts.init(chartSort.value);
|
|
const option = {
|
|
const option = {
|
|
|
|
+ tooltip: {
|
|
|
|
+ trigger: 'axis'
|
|
|
|
+ },
|
|
grid: {
|
|
grid: {
|
|
left: '0%',
|
|
left: '0%',
|
|
right: '0%',
|
|
right: '0%',
|
|
- bottom: '0%',
|
|
|
|
|
|
+ bottom: '20px',
|
|
top: '5%',
|
|
top: '5%',
|
|
},
|
|
},
|
|
xAxis: {
|
|
xAxis: {
|
|
type: 'category',
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
boundaryGap: false,
|
|
data: res.map(p=>formatDate(p.time)),
|
|
data: res.map(p=>formatDate(p.time)),
|
|
-
|
|
|
|
|
|
+ axisLine: {
|
|
|
|
+ show: true,
|
|
|
|
+ lineStyle: {
|
|
|
|
+ color: "#9FB9E7",
|
|
|
|
+ width: 0,
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ axisTick: {
|
|
|
|
+ show: false,
|
|
|
|
+ },
|
|
},
|
|
},
|
|
yAxis: {
|
|
yAxis: {
|
|
type: 'value',
|
|
type: 'value',
|