增加部分功能和优化

刘远
Showing 5 changed files with 86 additions and 42 deletions
public/index.html
src/components/rightFunc.vue
src/components/visualField.vue
src/components/yyAnslysis.vue
src/views/Home.vue
--- a/public/index.html
View file @11d516a
+++ b/public/index.html
View file @11d516a
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-        <script src="https://cesium.com/downloads/cesiumjs/releases/1.71/Build/Cesium/Cesium.js"></script>
-        <link href="https://cesium.com/downloads/cesiumjs/releases/1.71/Build/Cesium/Widgets/widgets.css"
-          rel="stylesheet">
-          <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
+<head>
-  </head>
+  <meta charset="utf-8">
-  <body>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <noscript>
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    </noscript>
+  <title><%= htmlWebpackPlugin.options.title %></title>
-    <div id="app"></div>
+  <script src="https://cesium.com/downloads/cesiumjs/releases/1.71/Build/Cesium/Cesium.js"></script>
-    <!-- built files will be auto injected -->
+  <link href="https://cesium.com/downloads/cesiumjs/releases/1.71/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
-  </body>
-</html>
+  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
+</head>
+<body>
+  <noscript>
+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+      Please enable it to continue.</strong>
+  </noscript>
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+</body>
+</html>
\ No newline at end of file
--- a/src/components/rightFunc.vue
View file @11d516a
+++ b/src/components/rightFunc.vue
View file @11d516a
@@ -123,7 +123,7 @@
        components: {},
        props: ['isReturn', 'enlarge', 'narrow', 'coordinate', 'distance',
            'area', 'marker', 'rollerShutter', 'splitScreen', 'toNorth',
-            'topSee', 'roundSee', 'horizon', 'allSee','ymAnslysis', 
+            'topSee', 'roundSee', 'horizon', 'allSee', 'ymAnslysis',
            'tjxAnslysis', 'yyAnslysis', 'kgAnalusis', 'visualField'
        ],
        data() {
@@ -189,7 +189,6 @@
                this.$emit('kgAnalusis', val, this.kgAnalusis);
            },
            handlevisualField(val) {
-                debugger
                this.$emit('visualField', val, this.visualField);
            }
        }
--- a/src/components/visualField.vue
View file @11d516a
+++ b/src/components/visualField.vue
View file @11d516a
@@ -10,7 +10,6 @@
                <span>可视域分析</span>
                <span @click="closePop" class="close">×</span>
            </div>
            <div class="func-input">
                <span class="width-class">方向</span>
                <el-input-number v-model="direction" controls-position="right"
@@ -18,7 +17,6 @@
                </el-input-number>
                <span style="margin-left: 12px;">度</span>
            </div>
            <div class="func-input">
                <span class="width-class">翻转</span>
                <el-input-number v-model="flip" controls-position="right"
@@ -33,7 +31,6 @@
                </el-input-number>
                <span style="margin-left: 12px;">米</span>
            </div>
            <div class="func-input">
                <span class="width-class">水平视场角</span>
                <el-input-number v-model="level" controls-position="right"
@@ -48,13 +45,16 @@
                </el-input-number>
                <span style="margin-left: 12px;">度</span>
            </div>
+            <div class="select-color">
+                <div class="block">
-            <!-- <div>
+                    <div class="demonstration">可见区域颜色</div>
-                <div></div>
+                    <el-color-picker v-model="yesColor"></el-color-picker>
-            </div> -->
+                </div>
+                <div class="block">
+                    <div class="demonstration">不可见区域颜色</div>
+                    <el-color-picker v-model="noColor"></el-color-picker>
+                </div>
+            </div>
        </div>
    </div>
 </template>
@@ -67,11 +67,13 @@
            return {
                step: 1,
                num: 1,
-                direction: '',
+                direction: '', // 方向
-                flip: '',
+                flip: '', // 翻转
-                distance: '',
+                distance: '', // 距离
-                level: '',
+                level: '', // 水平视场角
-                vertical: '',
+                vertical: '', // 垂直视场角
+                yesColor: 'red', // 可见区域颜色
+                noColor: 'rgba(255, 69, 0, 0.68)', // 不可见区域颜色
                isXmbj: true,
                // isAnalysis: true
@@ -223,6 +225,19 @@
    .width-class {
        width: 90px;
+        font-size: 16px;
+    }
+    .select-color {
+        display: flex;
+        justify-content: space-around;
+        text-align: center;
+        padding: 30px 0px;
+    }
+    .demonstration {
+        margin-bottom: 10px;
+        font-size: 16px;
    }
    >>>input::-webkit-input-placeholder {
@@ -236,6 +251,10 @@
        color: #fff;
    }
+    >>>.el-input-number.is-controls-right .el-input__inner {
+        text-align: left;
+    }
    >>>.el-input__suffix {
        color: #fff;
        font-size: 17px;
--- a/src/components/yyAnslysis.vue
View file @11d516a
+++ b/src/components/yyAnslysis.vue
View file @11d516a
@@ -19,6 +19,19 @@
            </div>
            <div class="func-input">
+                <span>开始时间</span>
+                <el-time-picker  style="margin:0 12px; width: 245px;" v-model="staTime" 
+                    :picker-options="pickerOptions" placeholder="选择开始时间">
+                </el-time-picker>
+            </div>
+            <div class="func-input">
+                <span>结束时间</span>
+                <el-time-picker  style="margin:0 12px; width: 245px;" v-model="endTime" 
+                    :picker-options="pickerOptions" placeholder="选择结束时间">
+                </el-time-picker>
+            </div>
+            <!-- <div class="func-input">
                <div class="btn-wrapper2" :class="[isCF?'add-bg2': '']" @click="handleIsXmbj('isCF')">
                    <span class="center">春分</span>
                </div>
@@ -34,7 +47,7 @@
                <div class="btn-wrapper2" :class="[isDZ?'add-bg2': '']" @click="handleIsXmbj('isDZ')">
                    <span class="center">冬至</span>
                </div>
-            </div>
+            </div> -->
            <div class="func-input">
                <span>时间间隔 </span>
@@ -79,7 +92,7 @@
                anslysisTime: '',
                timeS: 30, // 时间间隔
                time: 0 * 60 * 60 * 1000, // 滑块时间
-                max: (24 * 60 * 60 * 1000 - 1* 60 * 1000),
+                max: (24 * 60 * 60 * 1000 - 1 * 60 * 1000),
                marks: {
                    0: '0:00',
                    [maxW]: '23:59',
@@ -89,9 +102,17 @@
                    //     },
                    //     label: this.$createElement('strong', '50%')
                    // }
-                }
+                },
+                pickerOptions: {  // 时间选择器 时间范围限制
+                    selectableRange: '00:00:00 - 23:59:59'
+                },
+                staTime: '', // 开始时间
+                endTime: '', // 结束时间
            }
        },
+        watch: {
+        },
        mounted() {},
        methods: {
            closePop() {
@@ -127,7 +148,7 @@
            formatTooltip(val) {
                let nowTime = this.commons.dateZhuan('yyyy-MM-dd 00:00:00', new Date());
                let nowSjc = new Date(nowTime).getTime();
-                nowSjc+=val;
+                nowSjc += val;
                let sfd = this.commons.dateZhuan('hh:mm', new Date(nowSjc));
                return sfd;
            }
@@ -298,6 +319,7 @@
    >>>.el-icon-arrow-up:before,
    >>>.el-icon-arrow-down:before {
        color: #fff;
+        cursor: pointer;
    }
    >>>.el-input-number.is-controls-right .el-input-number__increase {
@@ -310,7 +332,7 @@
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.20);
    }
-    >>> .el-slider__marks-text {
+    >>>.el-slider__marks-text {
        color: #fff;
    }
 </style>
\ No newline at end of file
--- a/src/views/Home.vue
View file @11d516a
+++ b/src/views/Home.vue
View file @11d516a
@@ -47,6 +47,7 @@
                :allSee='allSee'
                :ymAnslysis='ymAnslysis'
                :tjxAnslysis='tjxAnslysis'
+                :visualField='visualField'
                :yyAnslysis='yyAnslysis'
                :kgAnalusis='kgAnalusis'></rightFunc>
        </div>
@@ -291,7 +292,7 @@
                })).screen({
                    slider: this.$refs.slider,
                    viewer: this.viewer
-                })
+                });
                this.$refs.slider.className = (this.roll.b = !this.roll.b) ? 'slider' : '';
                this.viewer.scene.imagerySplitPosition = this.roll.b && this.$refs.slider.offsetLeft / this.$refs.slider.parentElement.offsetWidth
            }