From 1a6bf39a0746398c12df9788be90d177aef646bd Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期一, 11 九月 2023 16:15:00 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.20.92:8888/r/PM20230220027_Web
---
src/components/BarGraph.vue | 116 ++++++++++++++++++++++++++++++++++++++
src/views/plotting/plottingInquire.vue | 15 ++++-
src/views/login.vue | 18 +++++
package.json | 1
4 files changed, 145 insertions(+), 5 deletions(-)
diff --git a/package.json b/package.json
index f305ff7..7fdb052 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
"amfe-flexible": "^2.2.1",
"axios": "^1.3.4",
"default-passive-events": "^2.0.0",
+ "echarts": "^5.4.3",
"element-plus": "^2.3.0",
"jquery": "^3.7.1",
"js-base64": "^3.7.5",
diff --git a/src/components/BarGraph.vue b/src/components/BarGraph.vue
new file mode 100644
index 0000000..65fb06a
--- /dev/null
+++ b/src/components/BarGraph.vue
@@ -0,0 +1,116 @@
+<template>
+ <div id="myEcharts" :style="{ width: width, height: height }"></div>
+</template>
+<script lang="ts" setup>
+import {
+ ref,
+ onMounted,
+ onBeforeUnmount,
+ reactive,
+ defineProps,
+ defineEmits,
+ watch,
+ onUnmounted,
+} from "vue";
+import * as echarts from "echarts";
+
+//defineProps 鏉ユ帴鏀剁粍浠剁殑浼犲��
+const props = defineProps({
+ width: String,
+ height: String,
+});
+let myEcharts = echarts;
+onMounted(() => {
+ initChart();
+});
+
+onUnmounted(() => {
+ myEcharts.dispose;
+});
+
+function initChart() {
+ let chart = myEcharts.init(
+ document.getElementById("myEcharts"),
+ "purple-passion"
+ );
+ chart.setOption({
+ title: {
+ text: "",
+ left: "center",
+ },
+ legend: {
+ data: [],
+ },
+ xAxis: {
+ type: "category",
+ data: [
+ "涓�鏈�",
+ "浜屾湀",
+ "涓夋湀",
+ "鍥涙湀",
+ "浜旀湀",
+ "鍏湀",
+ "涓冩湀",
+ "鍏湀",
+ "涔濇湀",
+ "鍗佹湀",
+ "鍗佷竴鏈�",
+ "鍗佷簩鏈�",
+ ],
+ show: false, // 涓嶆樉绀哄潗鏍囪酱绾裤�佸潗鏍囪酱鍒诲害绾垮拰鍧愭爣杞翠笂鐨勬枃瀛�
+ axisTick: {
+ show: false, // 涓嶆樉绀哄潗鏍囪酱鍒诲害绾�
+ },
+ axisLine: {
+ show: false, // 涓嶆樉绀哄潗鏍囪酱绾�
+ },
+ axisLabel: {
+ show: false, // 涓嶆樉绀哄潗鏍囪酱涓婄殑鏂囧瓧
+ },
+ splitLine: {
+ show: false, // 涓嶆樉绀虹綉鏍肩嚎
+ },
+ },
+ tooltip: {
+ trigger: "axis",
+ },
+ yAxis: {
+ type: "value",
+ show: false, // 涓嶆樉绀哄潗鏍囪酱绾裤�佸潗鏍囪酱鍒诲害绾垮拰鍧愭爣杞翠笂鐨勬枃瀛�
+ axisTick: {
+ show: false, // 涓嶆樉绀哄潗鏍囪酱鍒诲害绾�
+ },
+ axisLine: {
+ show: false, // 涓嶆樉绀哄潗鏍囪酱绾�
+ },
+ axisLabel: {
+ show: false, // 涓嶆樉绀哄潗鏍囪酱涓婄殑鏂囧瓧
+ },
+ splitLine: {
+ show: false, // 涓嶆樉绀虹綉鏍肩嚎
+ },
+ },
+ series: [
+ {
+ data: [606, 542, 985, 687, 501, 787, 339, 706, 383, 684, 669, 737],
+ type: "line",
+ smooth: true,
+ symbol: "none", //鍙栨秷鎶樼偣鍦嗗湀
+ itemStyle: {
+ normal: {
+ label: {
+ show: false,
+ position: "top",
+ formatter: "{c}",
+ },
+ },
+ },
+ },
+ ],
+ });
+ window.onresize = function () {
+ chart.resize();
+ };
+}
+</script>
+<style lang="less" scoped></style>
diff --git a/src/views/login.vue b/src/views/login.vue
index 5c6a4df..866a0d2 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -64,7 +64,9 @@
/>
</el-form-item>
<el-form-item prop="verify">
- <div style="display: flex; justify-content: space-between; width: 100%">
+ <div
+ style="display: flex; justify-content: space-between; width: 100%"
+ >
<el-input
placeholder="璇疯緭鍏ラ獙璇佺爜锛堝拷鐣ュぇ灏忓啓锛�"
v-model="ruleForm.verify"
@@ -78,7 +80,8 @@
type="primary"
class="nobr loginbtn btnbox"
@click="submitForm(ruleFormRef)"
- >鐧诲綍</el-button>
+ >鐧诲綍</el-button
+ >
</el-form-item>
</el-form>
</div>
@@ -93,6 +96,7 @@
reactive,
defineProps,
defineEmits,
+ onUnmounted,
} from "vue";
// import config from "../../public/config/config.js";
//Router
@@ -184,12 +188,22 @@
}
});
};
+const keyDown = (e) => {
+ //濡傛灉鏄洖杞﹀垯鎵ц鐧诲綍鏂规硶
+ if (e.keyCode == 13) {
+ submitForm(ruleFormRef.value);
+ }
+};
onMounted(() => {
removeToken();
//鏄剧ず鏈堢悆椤甸潰
startURL();
//
getPublicKey();
+ window.addEventListener("keydown", keyDown);
+});
+onUnmounted(() => {
+ window.removeEventListener("keydown", keyDown, false);
});
</script>
<style lang="less" scoped>
diff --git a/src/views/plotting/plottingInquire.vue b/src/views/plotting/plottingInquire.vue
index ad1d9ad..29c3f85 100644
--- a/src/views/plotting/plottingInquire.vue
+++ b/src/views/plotting/plottingInquire.vue
@@ -24,7 +24,10 @@
>
<!-- <el-tab-pane label="鍥惧眰灞炴��" name="first">User</el-tab-pane> -->
<el-tab-pane label="鏌ヨ缁撴灉" name="second">
- <div class="inquireContent_input">
+ <div class="chart_box" v-if="chartIsshow">
+ <Bar-graph :width="'100%'" :height="'260px'"></Bar-graph>
+ </div>
+ <div class="inquireContent_input" v-if="!chartIsshow">
<div class="inquireContent_input_left">
<div class="label">鑼冨洿妗�</div>
<el-input
@@ -52,7 +55,7 @@
</el-select>
</div>
</div>
- <div class="inquireContent_msg">
+ <div class="inquireContent_msg" v-if="!chartIsshow">
<div class="inquireContent_msg_k">
<span>鎻愬彇鐨勮竟鐣屾</span>
<span>{{ ScopeBox.pixel }}</span>
@@ -65,7 +68,7 @@
>
</div>
</div>
- <div class="inquireContent_table">
+ <div class="inquireContent_table" v-if="!chartIsshow">
<div class="table">
<div class="table_head">
<div class="table_head_td">搴忓彿</div>
@@ -111,6 +114,8 @@
watch,
} from "vue";
import { useStore } from "vuex"; // 寮曞叆useStore 鏂规硶
+//echarts
+import BarGraph from "@/components/BarGraph.vue";
const store = useStore(); // 璇ユ柟娉曠敤浜庤繑鍥瀞tore 瀹炰緥
const emits = defineEmits(["setCloseplotting"]);
let isShow = ref(false);
@@ -198,11 +203,15 @@
// const setCloseplotting = () => {
// emits("setCloseplotting", false);
// };
+let chartIsshow = ref(false);
watch(
() => store.state.plottingInquireData,
(nVal, oVal) => {
isShow.value = nVal.isshow;
inquireData.value = nVal.entitiesData;
+ if (nVal.entitiesData.icon == "x.png") {
+ chartIsshow.value = true;
+ }
},
{ deep: true }
);
--
Gitblit v1.9.3