npmapps 1.1.4 → 1.1.5

package/app/wujie-vue2-child/src/views/cssComponents/inputSlo.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="input-slo-page">
+    <div style="width: 400px;">
+      <el-form label-width="100px">
+        <el-form-item label="mini-slot">
+          <el-input v-model="inputValue" placeholder="请输入内容" size="mini">
+            <template #append>
+              <el-button @click="inputValue = ''" size="mini">清空</el-button>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="mini-slot">
+          <el-input v-model="inputValue" placeholder="vertical-align: middle" size="mini" style="vertical-align: middle;">
+            <template #append>
+              <el-button @click="inputValue = ''" size="mini">清空</el-button>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="slot">
+          <el-input v-model="inputValue" placeholder="请输入内容">
+            <template #append>
+              <el-button @click="inputValue = ''" size="mini">清空</el-button>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="mini">
+          <el-input v-model="inputValue" placeholder="请输入内容" size="mini">
+          </el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      inputValue: "",
+    };
+  },
+};
+</script>

package/app/wujie-vue2-child/src/views/cssComponents/tableFixed.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="table-fixed-page">
+    <el-table :data="tableData" @wheel.native="handleWheel">
+      <el-table-column
+        prop="date"
+        label="日期"
+        width="180"
+        fixed="left"
+      ></el-table-column>
+      <el-table-column label="合并列" width="660" >
+        <el-table-column prop="name" label="姓名" width="180" ></el-table-column>
+        <el-table-column
+          prop="nickname"
+          label="昵称"
+          width="180"
+        ></el-table-column>
+        <el-table-column
+          prop="address"
+          label="地址"
+          width="300"
+        ></el-table-column>
+      </el-table-column>
+      <el-table-column prop="phone" label="电话" width="180" ></el-table-column>
+      <el-table-column prop="gender" label="性别" width="180"></el-table-column>
+      <el-table-column prop="age" label="年龄" width="180"></el-table-column>
+      <el-table-column prop="hobby" label="爱好" width="180"></el-table-column>
+      <el-table-column
+        prop="favorite"
+        label="爱好"
+        width="180"
+      ></el-table-column>
+      <el-table-column prop="remark" label="备注" width="180"></el-table-column>
+      <el-table-column prop="price" label="价格" width="180"></el-table-column>
+      <el-table-column
+        prop="quantity"
+        label="数量"
+        width="180"
+      ></el-table-column>
+      <el-table-column prop="total" label="合计" width="180"></el-table-column>
+      <el-table-column prop="status" label="状态" width="180"></el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TableFixed",
+  data() {
+    return {
+      tableData: [
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          nickname: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+          phone: "13800000000",
+          gender: "男",
+          age: 25,
+          hobby: "游泳",
+          favorite: "外套",
+          remark: "无",
+          price: 100,
+          quantity: 1,
+          total: 100,
+          status: "已完成",
+        },
+        {
+          date: "2016-05-041",
+          name: "王小虎1",
+          nickname: "王小虎1",
+          address: "上海市普陀区金沙江路 1517 弄1",
+          phone: "138000000001",
+          gender: "男1",
+          age: 25,
+          hobby: "游泳1",
+          favorite: "外套1",
+          remark: "无1",
+          price: 100,
+          quantity: 1,
+          total: 100,
+          status: "已完成1",
+        },
+        {
+          date: "2016-05-06",
+          name: "王小虎2",
+          nickname: "王小虎2",
+          address: "上海市普陀区金沙江路 1519 弄2",
+          phone: "138000000002",
+          gender: "男2",
+          age: 25,
+          hobby: "游泳2",
+          favorite: "外套2",
+          remark: "无2",
+          price: 100,
+          quantity: 1,
+          total: 100,
+        },
+        {
+          date: "2016-05-08",
+          name: "王小虎3",
+          nickname: "王小虎3",
+          address: "上海市普陀区金沙江路 1519 弄3",
+          phone: "138000000003",
+          gender: "男3",
+          age: 25,
+          hobby: "游泳3",
+          favorite: "外套3",
+          remark: "无3",
+          price: 100,
+          quantity: 1,
+          total: 100,
+          status: "已完成3",
+        },
+      ],
+    };
+  },
+  methods: {
+    handleWheel(event) {
+      console.log(event,'event');
+
+      const tableBody = this.$el.querySelector('.el-table__body-wrapper');
+      if (tableBody.scrollHeight <= tableBody.clientHeight) {
+        event.preventDefault();
+        tableBody.scrollLeft += event.deltaY;
+      }
+    },
+  },
+};
+</script>
+
+<style>
+.el-table {
+  .el-table__body-wrapper {
+    overflow-x: auto !important;
+  }
+  /* .el-table__fixed-right {
+    height: 100% !important;
+    bottom: 0 !important;
+  } */
+  .el-table__fixed {
+    height: 100% !important;
+    bottom: 0 !important;
+  }
+  /* .el-table__fixed-right-patch {
+    background: #fff;
+  } */
+}
+</style>

package/app/wujie-vue2-child/src/views/echarts/echart-dome.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="echart-dome-page">
+    <div id="echart-111" style="height: 300px"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+export default {
+  mounted() {
+    this.initEchart();
+  },
+  methods: {
+    initEchart() {
+      var chartDom = document.getElementById("echart-111");
+      var myChart = echarts.init(chartDom);
+      var option;
+
+      option = {
+        tooltip: {
+          trigger: "item",
+        },
+        label: {
+          formatter: "{a} {b} ({d}%)",
+        },
+        series: [
+          {
+            name: "Access From",
+            type: "pie",
+            radius: "50%",
+            data: [
+              { value: 1048, name: "Search Engine" },
+              { value: 735, name: "Direct" },
+              { value: 580, name: "Email" },
+              { value: 484, name: "Union Ads" },
+              { value: 300, name: "Video Ads" },
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+            itemStyle: {
+              color: 'rgba(0,0,0,0)'
+            },
+            label: {
+              show: true,
+              color: '#000'
+            },
+            labelLine: {
+              show: true,
+              length: 20,
+              length2: 10
+            }
+          },
+        ],
+      };
+
+      option && myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.echart-dome-page {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/app/wujie-vue2-child/src/views/echarts/index.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="echarts-demo-page">
+    <div
+    style="
+      background-color: #000a3b;
+      height: 400px;
+      width: 1200px;
+      display: flex;
+      justify-content: space-around;
+    "
+  >
+    <pie3d v-if="list.length" :optionData="list" id="1" />
+    <pie3d v-if="list1.length" :optionData="list1" id="2" />
+  </div>
+  <div>
+    <!-- <echart-dome/> -->
+  </div>
+  </div>
+</template>
+
+<script>
+import pie3d from "./pei3d.vue";
+import echartDome from "./echart-dome.vue";
+const optionData1 = [
+  {
+    name: "子公司",
+    value: 2675,
+    itemStyle: {
+      color: "#42f59e",
+    },
+  },
+
+  {
+    name: "分行",
+    value: 15897,
+    itemStyle: {
+      color: "#3292e6",
+    },
+  },
+  {
+    name: "宁波地区支行",
+    value: 4910,
+    itemStyle: {
+      color: "#4ceff0",
+    },
+  },
+  {
+    name: "总行",
+    value: 4447,
+    itemStyle: {
+      color: "#fac858",
+    },
+  },
+];
+const optionData2 = [
+  {
+    name: "永赢金租",
+    value: 1251,
+    itemStyle: {
+      color: "#4ceff0",
+    },
+  },
+
+  {
+    name: "宁银理财",
+    value: 203,
+    itemStyle: {
+      color: "#fac858",
+    },
+  },
+  {
+    name: "宁银消金",
+    value: 1221,
+    itemStyle: {
+      color: "#3292e6",
+    },
+  },
+  
+];
+
+const getListApi = (type) => {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      resolve({
+        code: 200,
+        data: type == 1 ? optionData1 : optionData2,
+      });
+    }, 1000);
+  });
+};
+
+export default {
+  components: {
+    pie3d,
+    echartDome,
+  },
+
+  created() {
+    this.getList();
+  },
+
+  data() {
+    return {
+      list: [],
+      list1: [],
+    };
+  },
+
+  methods: {
+    async getList() {
+      const res1 = await getListApi(1);
+      const res2 = await getListApi(2);
+      this.list = res1.data;
+      this.list1 = res2.data;
+    },
+  },
+};
+</script>