按钮置灰，仪表盘

dcf9f544 · 刘殿昕 · 08d07980 · dcf9f544 · dcf9f544 · dcf9f544
Commit dcf9f544 authored Jun 23, 2020 by 刘殿昕
6 changed files
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
    "svg-sprite-loader": "^4.2.6",
    "vue": "^2.6.10",
    "vue-cropper": "^0.5.2",
+    "vue-echarts": "^5.0.0-beta.0",
    "vue-i18n": "^8.17.7",
    "vue-resource": "^1.5.1",
    "vue-router": "^3.0.2",

--- a/src/components/e-charts/dashboard.vue
+++ b/src/components/e-charts/dashboard.vue
+<template>
+  <chart :options="dashboard()" class="dashboard" />
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data: () => ({
+    navList: []
+  }),
+  mounted() {},
+  methods: {
+    dashboard() {
+      let self = this;
+      return {
+        title: {
+          text: "20%",
+          subtext: "sssss",
+          x: "center",
+          y: "center",
+          textStyle: {
+            fontSize: 26,
+            fontWeight: "normal",
+            color: ["#67828c"]
+          },
+          subtextStyle: {
+            color: "#67828c",
+            fontSize: 16,
+            align: "center"
+          }
+        },
+        angleAxis: {
+          axisLine: {
+            show: false
+          },
+          axisLabel: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          min: 0,
+          max: 138,
+          boundaryGap: ["0", "100"],
+          startAngle: 220,
+          endAngle: -40,
+        },
+        radiusAxis: {
+          type: "category",
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            show: false
+          }
+        },
+        polar: {
+          radius: "100%"
+        },
+        series: [
+          {
+            type: "bar",
+            data: [,40],
+            coordinateSystem: "polar",
+            barMaxWidth: 10,
+            z: 1,
+            name: "抢修项目",
+            roundCap: true,
+            color: "#1779ee",
+            barGap: "-100%"
+          },
+          {
+            type: "bar",
+            data: [,100],
+            z: 0,
+            silent: true,
+            coordinateSystem: "polar",
+            barMaxWidth: 10,
+            name: "C",
+            roundCap: true,
+            color: "#ddd",
+            barGap: "-100%"
+          },
+          {
+            type: "gauge",
+            radius: "55%",
+            min: 0, //最小刻度
+            max: 100, //最大刻度
+            splitNumber: 10, //刻度数量
+            startAngle: 220,
+            endAngle: -40,
+            axisLabel: {
+              show: false
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                width: 1,
+                color: [[1, "rgba(0,0,0,0)"]]
+              }
+            }, //仪表盘轴线
+            axisLabel: {
+              show: false
+            }, //刻度标签。
+            axisTick: {
+              show: true,
+              splitNumber: 5,
+              lineStyle: {
+                color: "#468EFD", //用颜色渐变函数不起作用
+                width: 1
+              },
+              length: -8
+            }, //刻度样式
+            splitLine: {
+              show: true,
+              length: -10,
+              lineStyle: {
+                color: "#468EFD" //用颜色渐变函数不起作用
+              }
+            }, //分隔线样式
+            detail: {
+              show: false
+            },
+            pointer: {
+              show: false
+            }
+          },
+          {
+            name: "point",
+            type: "scatter",
+            coordinateSystem: "polar",
+            barGap: "-100%",
+            zlevel: 0,
+            symbol: "circle",
+            symbolSize: 6,
+            itemStyle: {
+              normal: {
+                show: true,
+                color: "#fff"
+              }
+            },
+
+            data: [,40]
+          }
+        ]
+      };
+    }
+  }
+};
+</script>
+<style scoped>
+.dashboard {
+}
+</style>
\ No newline at end of file
--- a/src/main.js
+++ b/src/main.js
@@ -22,8 +22,21 @@ import "@/icons"

 import "./assets/css/index.css";

-import echarts from 'echarts'
-Vue.prototype.$echarts = echarts;
+
+import ECharts from "vue-echarts/components/ECharts";
+Vue.component("chart", ECharts);
+// vue-echarts按需引入
+import "echarts/lib/chart/line"; // 折线
+import "echarts/lib/chart/pie"; // 饼状图
+import "echarts/lib/chart/bar"; // 柱状图
+import "echarts/lib/chart/pie"; // 柱状图
+import "echarts/lib/chart/gauge"; // 仪表盘
+import "echarts/lib/chart/radar"; // 雷达图
+import "echarts/lib/component/tooltip"; // 提示
+import "echarts/lib/component/legend"; // 图例
+import "echarts/lib/component/title"; // 标题
+import 'echarts/lib/component/polar'; // 极坐标系
+import 'echarts/lib/chart/scatter'; // 散点图

 import VueI18n from 'vue-i18n'
 Vue.use(VueI18n)

--- a/src/pages/data-analysis/my-service.vue
+++ b/src/pages/data-analysis/my-service.vue
@@ -10,7 +10,7 @@
        <el-row>
          <el-col :span="24" class="in_block">
            <block-radius class="block left_1">
-              <div ref="left_1_l" class="left_1_l"></div>
+              <dashboard ref="left_1_l" class="left_1_l"></dashboard>
              <div ref="left_1_r" class="left_1_r"></div>
            </block-radius>
          </el-col>
@@ -63,172 +63,19 @@

 <script>
 import BlockRadius from "@/components/block-radius";
+import Dashboard from "@/components/e-charts/dashboard";
 export default {
  components: {
-    BlockRadius
+    BlockRadius,
+    Dashboard
  },
  data: () => ({
    navList: []
  }),
  mounted() {
-    this.drawLine();
+    
  },
-  methods: {
-    drawLine() {
-      // 基于准备好的dom，初始化echarts实例
-      var myChart = this.$echarts.init(this.$refs.left_1_l);
-      // 绘制图表
-      myChart.setOption({
-        title: {
-          text: "20%",
-          subtext: "sssss",
-          x: "center",
-          y: "center",
-          textStyle: {
-            fontSize: 26,
-            fontWeight: "normal",
-            color: ["#67828c"]
-          },
-          subtextStyle: {
-            color: "#67828c",
-            fontSize: 16,
-            align: "center"
-          }
-        },
-        angleAxis: {
-          axisLine: {
-            show: false
-          },
-          axisLabel: {
-            show: false
-          },
-          splitLine: {
-            show: false
-          },
-          axisTick: {
-            show: false
-          },
-          min: 0,
-          max: 160,
-          boundaryGap: ["0", "100"],
-          startAngle: 225
-        },
-        radiusAxis: {
-          type: "category",
-          axisLine: {
-            show: false
-          },
-          axisTick: {
-            show: false
-          },
-          axisLabel: {
-            show: false
-          }
-        },
-        polar: {
-          radius: "100%"
-        },
-        series: [
-          {
-            type: "bar",
-            data: [, 40],
-            coordinateSystem: "polar",
-            barMaxWidth: 10,
-            z: 1,
-            name: "抢修项目",
-            roundCap: true,
-            color: "#1779ee",
-            barGap: "-100%",
-            label: {
-              normal: {
-                show: true,
-                fontSize: 18,
-                fontWeight: "bold",
-                color: "#333",
-                position: "top"
-              }
-            }
-          },
-          {
-            type: "bar",
-            data: [, 20],
-            coordinateSystem: "polar",
-            barMaxWidth: 10,
-            z: 2,
-            name: "抢修项目",
-            roundCap: true,
-            color: "#fff",
-            barGap: "-100%",
-            label: {
-              normal: {
-                show: true,
-                fontSize: 18,
-                fontWeight: "bold",
-                color: "#333",
-                position: "top"
-              }
-            }
-          },
-          {
-            type: "bar",
-            data: [, 120],
-            z: 0,
-            silent: true,
-            coordinateSystem: "polar",
-            barMaxWidth: 10,
-            name: "C",
-            roundCap: true,
-            color: "#ddd",
-            barGap: "-100%"
-          },
-          {
-            type: "gauge",
-            radius: "55%",
-            min: 0, //最小刻度
-            max: 100, //最大刻度
-            splitNumber: 10, //刻度数量
-            startAngle: 225,
-            endAngle: -45,
-            axisLabel: {
-              show: false
-            },
-            axisLine: {
-              show: true,
-              lineStyle: {
-                width: 1,
-                color: [[1, "rgba(0,0,0,0)"]]
-              }
-            }, //仪表盘轴线
-            axisLabel: {
-              show: false
-            }, //刻度标签。
-            axisTick: {
-              show: true,
-              splitNumber: 5,
-              lineStyle: {
-                color: "#468EFD", //用颜色渐变函数不起作用
-                width: 1
-              },
-              length: -8
-            }, //刻度样式
-            splitLine: {
-              show: true,
-              length: -10,
-              lineStyle: {
-                color: "#468EFD" //用颜色渐变函数不起作用
-              }
-            }, //分隔线样式
-            detail: {
-              show: false
-            },
-            pointer: {
-              show: false
-            }
-          }
-        ]
-      });
-    }
-  }
+  methods: {}
 };
 </script>
 <style scoped>

--- a/src/pages/user/user_info.vue
+++ b/src/pages/user/user_info.vue
@@ -52,11 +52,20 @@
            <el-input v-model="user_data.organization" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item
-            :class="user_data.userType == 3 ? 'info_item info_item_right_btn' : 'info_item'"
+            :class="user_data.userType == 3 || user_data.userType == 4 ? 'info_item info_item_right_btn' : 'info_item'"
          >
            <p>当前用户类型：</p>
            <el-input v-model="user_data.userTypeName" :disabled="true"></el-input>
-            <el-button v-if="user_data.userType == 3" :disabled="!couldUp" :class="couldUp ? 'option_btn':'option_btn_gray'" @click="upLevel">升级为开发者</el-button>
+            <el-button
+              v-if="(user_data.userType == 3 || user_data.userType == 4) && couldUp"
+              :class="option_btn"
+              @click="upLevel"
+            >升级为开发者</el-button>
+            <el-button
+              v-else-if="(user_data.userType == 3 || user_data.userType == 4) && !couldUp"
+              type="info"
+              disabled
+            >升级为开发者</el-button>
          </el-form-item>
        </el-form>
      </div>
@@ -104,7 +113,7 @@
          </el-form-item>
          <el-form-item class="info_item info_item_right_btn_2">
            <p>密钥：</p>
-            <el-input ref="keys" v-model="formBusiness.private_token" :disabled="true"></el-input>
+            <el-input id="keys" v-model="formBusiness.private_token" :disabled="true"></el-input>
            <el-button class="option_btn" @click="copyKey">复制</el-button>
            <el-button class="option_btn_gray" @click="resetKey">重置</el-button>
          </el-form-item>
@@ -366,12 +375,15 @@ export default {
      });
    },
    copyKey() {
-      this.$refs.keys.select();
-      document.execCommand("Copy");
-      this.$message({
-        message: "复制成功",
-        type: "success"
-      });
+      const input = document.createElement("input");
+      document.body.appendChild(input);
+      input.setAttribute("value", this.formBusiness.private_token);
+      input.select();
+      if (document.execCommand("copy")) {
+        document.execCommand("copy");
+        console.log("复制成功");
+      }
+      document.body.removeChild(input);
    },
    delIp(ip, type) {
      console.log(ip, type);
@@ -444,6 +456,12 @@ export default {
  border-radius: 8px;
  color: #0f2683;
 }
+.option_btn_gray_dis {
+  width: 124px;
+  background-color: #e3e5ef;
+  border-radius: 8px;
+  color: #0f2683;
+}
 .info_item {
  width: 70%;
  min-width: 600px;

--- a/yarn.lock
+++ b/yarn.lock
@@ -2122,6 +2122,11 @@ core-js@^2.4.0, core-js@^2.5.0:
  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
  integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==

+core-js@^3.4.4:
+  version "3.6.5"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a"
+  integrity sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==
+
 core-util-is@~1.0.0:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -6064,6 +6069,11 @@ requires-port@^1.0.0:
  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
  integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=

+resize-detector@^0.1.10:
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/resize-detector/-/resize-detector-0.1.10.tgz#1da3f961aa5f914ccbcfd3752d52fd45beeb692c"
+  integrity sha512-iLcXC8A6Fb0DfA+TRiywrK/0A22bFqkhntjMJMEzXDA4XkcEkfwpNbv7W8iewUiD0xYIaeiXOfiEehTqGKsUFw==
+
 resize-observer-polyfill@^1.5.0:
  version "1.5.1"
  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
@@ -7155,6 +7165,15 @@ vue-cropper@^0.5.2:
  resolved "https://registry.yarnpkg.com/vue-cropper/-/vue-cropper-0.5.2.tgz#069b2ffe5336b3f800d3049df2b0746263bd8642"
  integrity sha512-51lj/7s3ok6pVvceibc/dM4zFccrx3020CX7i/k6Kl9K3M9ot8NXRvXf813ME2Dwwa3Eb/TeSM87+zu5ZcXAZA==

+vue-echarts@^5.0.0-beta.0:
+  version "5.0.0-beta.0"
+  resolved "https://registry.yarnpkg.com/vue-echarts/-/vue-echarts-5.0.0-beta.0.tgz#438dd4b0fc5ccea281709c1f7c6321b05352bdf4"
+  integrity sha512-QZFKGXDAYFQo+F20REpzcdLx79nsl4kOorJRpN+08aYq4YiIlmtWss1Lxadm7Fo+NYyWm8nnT+h4xHv3uqWIDQ==
+  dependencies:
+    core-js "^3.4.4"
+    lodash "^4.17.15"
+    resize-detector "^0.1.10"
+
 vue-hot-reload-api@^2.3.0:
  version "2.3.4"
  resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"