npmapps 1.0.25 → 1.0.27

package/app/src/views/cssComponents/TableHover.vue

@@ -0,0 +1,140 @@
+<template>
+    <div class="table-hover-page">
+        <PageHeader
+            title="表格悬浮效果"
+            description="单元格鼠标悬浮高亮，支持自定义行/列悬浮样式"
+            usage="在 el-table 中使用，通过 row-class-name、cell-class-name 控制悬浮样式"
+        />
+        <el-table
+            :data="data"
+            style="width: 100%"
+            :span-method="objectSpanMethod"
+            :row-class-name="tableRowClassName"
+            :cell-style="cellStyle"
+            @cell-mouse-enter="handleCellMouseEnter"
+            @cell-mouse-leave="handleCellMouseLeave"
+            border>
+            <el-table-column prop="service" label="服务" width="180">
+            </el-table-column>
+            <el-table-column prop="name" label="实现变量" width="280">
+            </el-table-column>
+            <el-table-column prop="value" label="总配额">
+            </el-table-column>
+        </el-table>
+    </div>
+</template>
+
+<script>
+import PageHeader from '@/components/PageHeader/index.vue'
+
+export default {
+    name: 'TableHover',
+    components: {
+        PageHeader
+    },
+    data() {
+        return {
+            data: [
+                { service: 'ActiveMQ连接数', name: 'ActiveMQ队列数', value: '11' },
+                { service: 'ActiveMQ连接数', name: 'ActiveMQ流控配额', value: '111112' },
+                { service: 'ActiveMQ连接数', name: 'ActiveMQ连接配额', value: '111111' },
+                { service: 'ActiveMQ连接数', name: 'ActiveMQ存储配额', value: '111111' },
+                { service: '服务内类', name: 'westest00005activeMQ', value: '0' },
+                { service: '服务内类', name: '服务内类配额', value: '111111' },
+                { service: '测试公司内网', name: '配额测试配额测试配额测试配额测试配额测试配额测试', value: '0' },
+                { service: '测试公司内网', name: '测试公司内网(个/人)', value: '111111' },
+                { service: '测试公司内网', name: '测试公司内网配额', value: '111111' },
+                { service: '测试公司内网', name: 'test111165', value: '0' },
+                { service: '测试公司内网', name: 'sss', value: '111111' },
+                { service: '测试公司内网', name: 'westest001测试', value: '0' }
+            ],
+            currentIndex: '', // 当前悬浮行的标识
+            currentColumnIndex: '' // 当前悬浮列的标识
+        }
+    },
+    methods: {
+        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+            // 获取表格数据
+            const tableData = this.data;
+
+            // 只处理第一列的合并
+            if (columnIndex === 0) {
+                // 获取当前行的值
+                const currentValue = row.service; // 假设要根据 service 来合并
+
+                // 向上查找相同值的行数
+                let count = 1; // 至少包含当前行
+                for (let i = rowIndex - 1; i >= 0; i--) {
+                    if (tableData[i].service === currentValue) {
+                        count++;
+                    } else {
+                        break;
+                    }
+                }
+
+                // 如果是相同值的第一行，则合并
+                if (rowIndex === 0 || tableData[rowIndex - 1].service !== currentValue) {
+                    // 向下查找相同值的行数
+                    for (let i = rowIndex + 1; i < tableData.length; i++) {
+                        if (tableData[i].service === currentValue) {
+                            count++;
+                        } else {
+                            break;
+                        }
+                    }
+                    return {
+                        rowspan: count,
+                        colspan: 1
+                    };
+                } else {
+                    // 不是第一行则隐藏
+                    return {
+                        rowspan: 0,
+                        colspan: 0
+                    };
+                }
+            }
+
+            // 其他列保持不变
+            return {
+                rowspan: 1,
+                colspan: 1
+            };
+        },
+        handleCellMouseEnter(row, column, cell, event) {
+            this.currentIndex = row.service; // 记录当前悬浮行的 service 值
+            this.currentColumnIndex = column.label;
+        },
+
+        handleCellMouseLeave() {
+            this.currentIndex = '';
+            this.currentColumnIndex = '';
+        },
+
+        // 行的样式类名
+        tableRowClassName({ row }) {
+            let flag = row.service === this.currentIndex &&
+                      this.currentColumnIndex === '服务'; // 根据实际的第一列标题修改
+            return flag ? 'table-hover-row' : '';
+        },
+
+        // 单元格样式
+        cellStyle({ row, column, rowIndex, columnIndex }) {
+            let flag = row.service === this.currentIndex &&
+                      this.currentColumnIndex &&
+                      this.currentColumnIndex !== '服务' &&
+                      columnIndex === 0;
+            return flag ? 'background: #f4f6fa' : '';
+        }
+    }
+}
+</script>
+
+<style>
+.el-table .table-hover-row {
+    background: #f4f6fa !important;
+}
+.el-table td {
+    padding: 8px 0;
+}
+</style>

package/app/src/views/cssComponents/inputSlo.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="input-slo-page">
+    <PageHeader
+      title="el-input slot 对齐"
+      description="解决 el-input 前置/后置 slot 与输入框对齐问题，对比 mini 和 normal 尺寸差异"
+      usage="在 el-form-item 中使用 el-input 配合 prefix/suffix 插槽"
+    />
+    <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>
+import PageHeader from '@/components/PageHeader/index.vue'
+
+export default {
+  components: {
+    PageHeader
+  },
+  data() {
+    return {
+      inputValue: "",
+    };
+  },
+};
+</script>

package/app/src/views/cssComponents/tableFixed.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="table-fixed-page">
+    <PageHeader
+      title="el-table fixed 列问题"
+      description="解决 el-table fixed 列在横向滚动时的同步问题，支持鼠标滚轮横向滚动"
+      usage="在 el-table 上使用 ell-table 组件，支持 fixed=&quot;left/right&quot; 固定列"
+    />
+    <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>
+import PageHeader from '@/components/PageHeader/index.vue'
+
+export default {
+  name: "TableFixed",
+  components: {
+    PageHeader
+  },
+  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/src/views/echarts/echart-dome.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="echart-dome-page">
+    <PageHeader
+      title="基础 ECharts 示例"
+      description="展示 ECharts 基础 2D 饼图用法，包含 option 配置、tooltip、图例等"
+      usage="&lt;echart-dome /&gt; 通过 props 传入 option 数据"
+    />
+    <div id="echart-111" style="height: 300px"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import PageHeader from "@/components/PageHeader/index.vue";
+
+export default {
+  components: {
+    PageHeader,
+  },
+  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/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>