From 41dabb0db9619b8dbb8a311966e0b9920f67f7c8 Mon Sep 17 00:00:00 2001
From: “dzb” <2632970487@qq.com>
Date: 星期四, 03 十一月 2022 16:10:40 +0800
Subject: [PATCH] 门前三包和趋势分析
---
src/views/intelligentPatrol/trendAnalysis/index.vue | 141 ++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 138 insertions(+), 3 deletions(-)
diff --git a/src/views/intelligentPatrol/trendAnalysis/index.vue b/src/views/intelligentPatrol/trendAnalysis/index.vue
index da3bee6..0c2d5a0 100644
--- a/src/views/intelligentPatrol/trendAnalysis/index.vue
+++ b/src/views/intelligentPatrol/trendAnalysis/index.vue
@@ -1,13 +1,148 @@
<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">楂樺彂鐐逛綅</el-button>
+ <el-button type="text">棣栨杩濊鐐逛綅</el-button>
+ </div>
+ <!-- 瀵瑰簲鏁版嵁 -->
+ <div class="trend-data-main">
+ <div class="high-point">
+ <div class="point-item" v-for="item in highList" :key="item.id">
+ <span>{{ item.pointName }}</span>
+ <span>{{ item.count }}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="trend-main"></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>
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娆�',
+ },
+ ]
+ }
+ }
}
</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 {
+ .point-item {
+ display: flex;
+ padding: 0 2vw;
+ justify-content: space-between;
+ }
+ }
+ }
+ }
+ }
+ .trend-main{
+ flex: 1;
+ border: 1px solid #09152f;
+ }
+ .trend-footer {
+ ::v-deep .el-range-input {
+ background-color: #09152f;
+ }
+ }
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0