From eda46bf83619297600436e5015fd8977e9974219 Mon Sep 17 00:00:00 2001
From: luobisheng <727299681@qq.com>
Date: 星期五, 04 十一月 2022 15:50:31 +0800
Subject: [PATCH] Merge branch 'master' of http://42.193.1.25:9521/r/sccg_ui
---
src/views/intelligentPatrol/trendAnalysis/index.vue | 224 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 221 insertions(+), 3 deletions(-)
diff --git a/src/views/intelligentPatrol/trendAnalysis/index.vue b/src/views/intelligentPatrol/trendAnalysis/index.vue
index da3bee6..8321844 100644
--- a/src/views/intelligentPatrol/trendAnalysis/index.vue
+++ b/src/views/intelligentPatrol/trendAnalysis/index.vue
@@ -1,13 +1,231 @@
<template>
- <div>瓒嬪娍鍒嗘瀽</div>
+ <div class="trend-analysis">
+ <!-- 渚ц竟鏍� -->
+ <div class="trend-side">
+ <!-- 杈撳叆鍖哄煙 -->
+ <div class="trend-input-area">
+ <span class="trend-title">瓒嬪娍鍒嗘瀽</span>
+ <el-form ref="form" :model="search" label-width="6vw">
+ <el-form-item label="绫诲瀷鏌ヨ">
+ <el-input v-model="search.type" placeholder="鍐呭淇℃伅"></el-input>
+ </el-form-item>
+ <el-form-item label="鏃堕棿鑼冨洿">
+ <el-input v-model="search.timeRange" suffix-icon="el-icon-date" placeholder="閫夋嫨鏃堕棿鑼冨洿"></el-input>
+ </el-form-item>
+ </el-form>
+ </div>
+ <!-- 鏁版嵁灞曠ず -->
+ <div class="trend-data-show">
+ <!-- 鐐逛綅鍒囨崲 -->
+ <div class="trend-data-header">
+ <el-button type="text" @click="highFlag = true">楂樺彂鐐逛綅</el-button>
+ <el-button type="text" @click="highFlag = false">棣栨杩濊鐐逛綅</el-button>
+ </div>
+ <!-- 瀵瑰簲鏁版嵁 -->
+ <div class="trend-data-main">
+ <!-- -->
+ <div class="high-point" v-if="highFlag">
+ <div class="point-item" v-for="item in highList" :key="item.id">
+ <span>{{ item.pointName }}</span>
+ <span>{{ item.count }}</span>
+ </div>
+ </div>
+ <!-- 棣栨杩濊 -->
+ <div class="first-point" v-else>
+ <div class="point-item" v-for="item in fisrtList" :key="item.id">
+ <span>{{ item.pointName }}</span>
+ <span>{{ item.count }}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="trend-main">
+ <div class="trend-main-echarts" id="myRef">
+
+ </div>
+ </div>
+ <div class="trend-footer" v-if="timeRangeFlag">
+ <!-- 閫夋嫨鏃堕棿鑼冨洿 -->
+ <div class="time-area">
+ <el-date-picker v-model="search.timeRange" type="datetimerange" range-separator="鑷�" start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡">
+ </el-date-picker>
+ </div>
+ </div>
+ </div>
</template>
<script>
+import * as echarts from 'echarts'
+import { transform } from 'echarts-stat';
export default {
-
+ data() {
+ return {
+ search: {
+ type: '',
+ timeRange: ''
+ },
+ timeRangeFlag: false,
+ highList: [
+ {
+ id: 1,
+ pointName: '鍚庡簡璺�200鍙�-鐞�',
+ count: '100娆�',
+ },
+ {
+ id: 2,
+ pointName: '鍚庡簡璺�200鍙�-鐞�',
+ count: '100娆�',
+ },
+ {
+ id: 3,
+ pointName: '鍚庡簡璺�200鍙�-鐞�',
+ count: '100娆�',
+ },
+ {
+ id: 4,
+ pointName: '鍚庡簡璺�200鍙�-鐞�',
+ count: '100娆�',
+ },
+ {
+ id: 5,
+ pointName: '鍚庡簡璺�200鍙�-鐞�',
+ count: '100娆�',
+ },
+ ],
+ fisrtList: [
+ {
+ id: 1,
+ pointName: '鍚庡簡璺�205鍙�-鐞�',
+ count: '1娆�',
+ },
+ {
+ id: 2,
+ pointName: '鍚庡簡璺�204鍙�-鐞�',
+ count: '1娆�',
+ },
+ {
+ id: 3,
+ pointName: '鍚庡簡璺�203鍙�-鐞�',
+ count: '1娆�',
+ },
+ {
+ id: 4,
+ pointName: '鍚庡簡璺�202鍙�-鐞�',
+ count: '1娆�',
+ },
+ {
+ id: 5,
+ pointName: '鍚庡簡璺�201鍙�-鐞�',
+ count: '1娆�',
+ },
+ ],
+ highFlag: true,
+ }
+ },
+ methods: {
+ renderEchart() {
+ // echarts.registerTransform(transform.regression);
+ const myChart = echarts.init(document.getElementById('myRef'));
+ // 缁樺埗鍥捐〃
+ myChart.setOption({
+ xAxis: {
+ name: '鏃�/鍛�',
+ },
+ yAxis: {
+ name: '鎶ヨ閲�(娆�)',
+ },
+ series: [
+ {
+ data: [10, 22, 28, 23, 19],
+ type: 'line',
+ smooth: true
+ }
+ ]
+ });
+ }
+ },
+ mounted() {
+ this.renderEchart()
+ }
}
</script>
-<style>
+<style lang="scss" scoped>
+.trend-analysis {
+ height: 100%;
+ padding: 10vh 10vw;
+ color: #4b9bb7;
+ display: flex;
+ .trend-side {
+ width: 20vw;
+ text-align: left;
+ height: 100%;
+ border: 1px solid #09152f;
+
+ .trend-input-area {
+ display: flex;
+ flex-direction: column;
+ padding: 0 2vw;
+
+ &>span {
+ line-height: 40px;
+ }
+
+ ::v-deep .el-form {
+ .el-form-item__label {
+ color: #4b9bb7;
+ }
+ }
+ }
+
+ .trend-data-show {
+ width: 100%;
+ line-height: 40px;
+
+ .trend-data-header {
+ display: flex;
+
+ .el-button {
+ flex: 1;
+ border: 2px solid #09152f;
+ }
+
+ .el-button+.el-button {
+ margin: 0;
+ }
+ }
+
+ .trend-data-main {
+
+ .high-point,
+ .first-point {
+ .point-item {
+ display: flex;
+ padding: 0 2vw;
+ justify-content: space-between;
+ }
+ }
+ }
+ }
+ }
+
+ .trend-main {
+ flex: 1;
+ border: 1px solid #09152f;
+
+ .trend-main-echarts {
+ width: 500px;
+ height: 400px;
+ }
+ }
+
+ .trend-footer {
+ ::v-deep .el-range-input {
+ background-color: #09152f;
+ }
+ }
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0