增加透视图

package-lock.json

@@ -1765,7 +1765,6 @@
       "version": "6.12.3",
       "resolved": "https://r.cnpmjs.org/ajv/download/ajv-6.12.3.tgz",
       "integrity": "sha1-GMWvOKER3etPJpe9eNaKvByr1wY=",
-      "dev": true,
       "requires": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -1782,8 +1781,7 @@
     "ajv-keywords": {
       "version": "3.5.1",
       "resolved": "https://r.cnpmjs.org/ajv-keywords/download/ajv-keywords-3.5.1.tgz",
-      "integrity": "sha1-uDyonF1C1pAx9CTK1JqtoCNsaVc=",
-      "dev": true
+      "integrity": "sha1-uDyonF1C1pAx9CTK1JqtoCNsaVc="
     },
     "alphanum-sort": {
       "version": "1.0.2",
@@ -1813,7 +1811,6 @@
       "version": "3.2.1",
       "resolved": "http://r.cnpmjs.org/ansi-styles/download/ansi-styles-3.2.1.tgz",
       "integrity": "sha1-QfuyAkPlCxK+DwS43tvwdSDOhB0=",
-      "dev": true,
       "requires": {
         "color-convert": "^1.9.0"
       }
@@ -2077,6 +2074,58 @@
         }
       }
     },
+    "babel-code-frame": {
+      "version": "6.26.0",
+      "resolved": "http://r.cnpmjs.org/babel-code-frame/download/babel-code-frame-6.26.0.tgz",
+      "integrity": "sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=",
+      "requires": {
+        "chalk": "^1.1.3",
+        "esutils": "^2.0.2",
+        "js-tokens": "^3.0.2"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "http://r.cnpmjs.org/ansi-regex/download/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
+        },
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "http://r.cnpmjs.org/ansi-styles/download/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://r.cnpmjs.org/chalk/download/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "js-tokens": {
+          "version": "3.0.2",
+          "resolved": "http://r.cnpmjs.org/js-tokens/download/js-tokens-3.0.2.tgz",
+          "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "http://r.cnpmjs.org/strip-ansi/download/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "requires": {
+            "ansi-regex": "^2.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "http://r.cnpmjs.org/supports-color/download/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
+        }
+      }
+    },
     "babel-helper-vue-jsx-merge-props": {
       "version": "2.0.3",
       "resolved": "https://r.cnpmjs.org/babel-helper-vue-jsx-merge-props/download/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
@@ -2235,8 +2284,7 @@
     "big.js": {
       "version": "5.2.2",
       "resolved": "http://r.cnpmjs.org/big.js/download/big.js-5.2.2.tgz",
-      "integrity": "sha1-ZfCvOC9Xi83HQr2cKB6cstd2gyg=",
-      "dev": true
+      "integrity": "sha1-ZfCvOC9Xi83HQr2cKB6cstd2gyg="
     },
     "binary-extensions": {
       "version": "1.13.1",
@@ -2737,7 +2785,6 @@
       "version": "2.4.2",
       "resolved": "https://r.cnpmjs.org/chalk/download/chalk-2.4.2.tgz",
       "integrity": "sha1-zUJUFnelQzPPVBpJEIwUMrRMlCQ=",
-      "dev": true,
       "requires": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -2748,7 +2795,6 @@
           "version": "5.5.0",
           "resolved": "http://r.cnpmjs.org/supports-color/download/supports-color-5.5.0.tgz",
           "integrity": "sha1-4uaaRKyHcveKHsCzW2id9lMO/I8=",
-          "dev": true,
           "requires": {
             "has-flag": "^3.0.0"
           }
@@ -3040,7 +3086,6 @@
       "version": "1.9.3",
       "resolved": "http://r.cnpmjs.org/color-convert/download/color-convert-1.9.3.tgz",
       "integrity": "sha1-u3GFBpDh8TZWfeYp0tVHHe2kweg=",
-      "dev": true,
       "requires": {
         "color-name": "1.1.3"
       },
@@ -3048,8 +3093,7 @@
         "color-name": {
           "version": "1.1.3",
           "resolved": "http://r.cnpmjs.org/color-name/download/color-name-1.1.3.tgz",
-          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-          "dev": true
+          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
         }
       }
     },
@@ -3497,6 +3541,15 @@
       "integrity": "sha1-Oy/0lyzDYquIVhUHqVQIoUMhNdc=",
       "dev": true
     },
+    "css-selector-tokenizer": {
+      "version": "0.7.3",
+      "resolved": "https://r.cnpmjs.org/css-selector-tokenizer/download/css-selector-tokenizer-0.7.3.tgz",
+      "integrity": "sha1-c18mGG5nx0mq8nV4NAXPBmH66PE=",
+      "requires": {
+        "cssesc": "^3.0.0",
+        "fastparse": "^1.1.2"
+      }
+    },
     "css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "http://r.cnpmjs.org/css-tree/download/css-tree-1.0.0-alpha.37.tgz",
@@ -3516,8 +3569,7 @@
     "cssesc": {
       "version": "3.0.0",
       "resolved": "http://r.cnpmjs.org/cssesc/download/cssesc-3.0.0.tgz",
-      "integrity": "sha1-N3QZGZA7hoVl4cCep0dEXNGJg+4=",
-      "dev": true
+      "integrity": "sha1-N3QZGZA7hoVl4cCep0dEXNGJg+4="
     },
     "cssnano": {
       "version": "4.1.10",
@@ -4166,8 +4218,7 @@
     "emojis-list": {
       "version": "3.0.0",
       "resolved": "http://r.cnpmjs.org/emojis-list/download/emojis-list-3.0.0.tgz",
-      "integrity": "sha1-VXBmIEatKeLpFucariYKvf9Pang=",
-      "dev": true
+      "integrity": "sha1-VXBmIEatKeLpFucariYKvf9Pang="
     },
     "encodeurl": {
       "version": "1.0.2",
@@ -4285,8 +4336,7 @@
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "http://r.cnpmjs.org/escape-string-regexp/download/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-      "dev": true
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
     },
     "eslint-scope": {
       "version": "4.0.3",
@@ -4322,8 +4372,7 @@
     "esutils": {
       "version": "2.0.3",
       "resolved": "http://r.cnpmjs.org/esutils/download/esutils-2.0.3.tgz",
-      "integrity": "sha1-dNLrTeC42hKTcRkQ1Qd1ubcQ72Q=",
-      "dev": true
+      "integrity": "sha1-dNLrTeC42hKTcRkQ1Qd1ubcQ72Q="
     },
     "etag": {
       "version": "1.8.1",
@@ -4565,8 +4614,7 @@
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://r.cnpmjs.org/fast-deep-equal/download/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha1-On1WtVnWy8PrUSMlJE5hmmXGxSU=",
-      "dev": true
+      "integrity": "sha1-On1WtVnWy8PrUSMlJE5hmmXGxSU="
     },
     "fast-glob": {
       "version": "2.2.7",
@@ -4585,8 +4633,12 @@
     "fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "http://r.cnpmjs.org/fast-json-stable-stringify/download/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha1-h0v2nG9ATCtdmcSBNBOZ/VWJJjM=",
-      "dev": true
+      "integrity": "sha1-h0v2nG9ATCtdmcSBNBOZ/VWJJjM="
+    },
+    "fastparse": {
+      "version": "1.1.2",
+      "resolved": "https://r.cnpmjs.org/fastparse/download/fastparse-1.1.2.tgz",
+      "integrity": "sha1-kXKMWllC7O2FMSg8eUQe5BIsNak="
     },
     "faye-websocket": {
       "version": "0.10.0",
@@ -4982,7 +5034,6 @@
       "version": "2.0.0",
       "resolved": "http://r.cnpmjs.org/has-ansi/download/has-ansi-2.0.0.tgz",
       "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
-      "dev": true,
       "requires": {
         "ansi-regex": "^2.0.0"
       },
@@ -4990,16 +5041,14 @@
         "ansi-regex": {
           "version": "2.1.1",
           "resolved": "http://r.cnpmjs.org/ansi-regex/download/ansi-regex-2.1.1.tgz",
-          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-          "dev": true
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
         }
       }
     },
     "has-flag": {
       "version": "3.0.0",
       "resolved": "http://r.cnpmjs.org/has-flag/download/has-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-      "dev": true
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
     },
     "has-symbols": {
       "version": "1.0.1",
@@ -5357,6 +5406,11 @@
         "safer-buffer": ">= 2.1.2 < 3"
       }
     },
+    "icss-replace-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://r.cnpmjs.org/icss-replace-symbols/download/icss-replace-symbols-1.1.0.tgz",
+      "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0="
+    },
     "icss-utils": {
       "version": "4.1.1",
       "resolved": "http://r.cnpmjs.org/icss-utils/download/icss-utils-4.1.1.tgz",
@@ -5854,6 +5908,16 @@
         }
       }
     },
+    "jquery": {
+      "version": "3.5.1",
+      "resolved": "http://r.cnpmjs.org/jquery/download/jquery-3.5.1.tgz",
+      "integrity": "sha1-17TQjhv9uGrS8aPQOeoXMEcXq7U="
+    },
+    "jquery-ui": {
+      "version": "1.12.1",
+      "resolved": "https://r.cnpmjs.org/jquery-ui/download/jquery-ui-1.12.1.tgz",
+      "integrity": "sha1-vLQEXI3QU5wTS8FIjN0+dop6nlE="
+    },
     "js-cookie": {
       "version": "2.2.1",
       "resolved": "https://r.cnpmjs.org/js-cookie/download/js-cookie-2.2.1.tgz",
@@ -5917,8 +5981,7 @@
     "json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "http://r.cnpmjs.org/json-schema-traverse/download/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha1-afaofZUTq4u4/mO9sJecRI5oRmA=",
-      "dev": true
+      "integrity": "sha1-afaofZUTq4u4/mO9sJecRI5oRmA="
     },
     "json-stringify-safe": {
       "version": "5.0.1",
@@ -5936,7 +5999,6 @@
       "version": "1.0.1",
       "resolved": "http://r.cnpmjs.org/json5/download/json5-1.0.1.tgz",
       "integrity": "sha1-d5+wAYYE+oVOrL9iUhgNg1Q+Pb4=",
-      "dev": true,
       "requires": {
         "minimist": "^1.2.0"
       }
@@ -6051,7 +6113,6 @@
       "version": "1.4.0",
       "resolved": "http://r.cnpmjs.org/loader-utils/download/loader-utils-1.4.0.tgz",
       "integrity": "sha1-xXm140yzSxp07cbB+za/o3HVphM=",
-      "dev": true,
       "requires": {
         "big.js": "^5.2.2",
         "emojis-list": "^3.0.0",
@@ -6071,8 +6132,7 @@
     "lodash": {
       "version": "4.17.19",
       "resolved": "https://r.cnpmjs.org/lodash/download/lodash-4.17.19.tgz",
-      "integrity": "sha1-5I3e2+MLMyF4PFtDAfvTU7weSks=",
-      "dev": true
+      "integrity": "sha1-5I3e2+MLMyF4PFtDAfvTU7weSks="
     },
     "lodash.defaultsdeep": {
       "version": "4.6.1",
@@ -6356,8 +6416,7 @@
     "minimist": {
       "version": "1.2.5",
       "resolved": "http://r.cnpmjs.org/minimist/download/minimist-1.2.5.tgz",
-      "integrity": "sha1-Z9ZgFLZqaoqqDAg8X9WN9OTpdgI=",
-      "dev": true
+      "integrity": "sha1-Z9ZgFLZqaoqqDAg8X9WN9OTpdgI="
     },
     "minipass": {
       "version": "3.1.3",
@@ -7125,6 +7184,14 @@
         "pinkie": "^2.0.0"
       }
     },
+    "pivottable": {
+      "version": "2.23.0",
+      "resolved": "https://r.cnpmjs.org/pivottable/download/pivottable-2.23.0.tgz",
+      "integrity": "sha1-zCzx9oBDjXsKBURxy3ZA8cuZ9zk=",
+      "requires": {
+        "jquery": ">=1.9.0"
+      }
+    },
     "pkg-dir": {
       "version": "3.0.0",
       "resolved": "http://r.cnpmjs.org/pkg-dir/download/pkg-dir-3.0.0.tgz",
@@ -7852,8 +7919,7 @@
     "punycode": {
       "version": "2.1.1",
       "resolved": "http://r.cnpmjs.org/punycode/download/punycode-2.1.1.tgz",
-      "integrity": "sha1-tYsBCsQMIsVldhbI0sLALHv0eew=",
-      "dev": true
+      "integrity": "sha1-tYsBCsQMIsVldhbI0sLALHv0eew="
     },
     "q": {
       "version": "1.5.1",
@@ -8759,14 +8825,12 @@
     "source-list-map": {
       "version": "2.0.1",
       "resolved": "http://r.cnpmjs.org/source-list-map/download/source-list-map-2.0.1.tgz",
-      "integrity": "sha1-OZO9hzv8SEecyp6jpUeDXHwVSzQ=",
-      "dev": true
+      "integrity": "sha1-OZO9hzv8SEecyp6jpUeDXHwVSzQ="
     },
     "source-map": {
       "version": "0.6.1",
       "resolved": "http://r.cnpmjs.org/source-map/download/source-map-0.6.1.tgz",
-      "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
-      "dev": true
+      "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM="
     },
     "source-map-resolve": {
       "version": "0.5.3",
@@ -9092,6 +9156,26 @@
       "integrity": "sha1-ibhS+y/L6Tb29LMYevsKEsGrWK0=",
       "dev": true
     },
+    "style-loader": {
+      "version": "0.21.0",
+      "resolved": "https://r.cnpmjs.org/style-loader/download/style-loader-0.21.0.tgz",
+      "integrity": "sha1-aMUuXrKvycqStidL4nfuWa6jqFI=",
+      "requires": {
+        "loader-utils": "^1.1.0",
+        "schema-utils": "^0.4.5"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "0.4.7",
+          "resolved": "https://r.cnpmjs.org/schema-utils/download/schema-utils-0.4.7.tgz",
+          "integrity": "sha1-unT1l9K+LqiAExdG7hfQoJPGgYc=",
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-keywords": "^3.1.0"
+          }
+        }
+      }
+    },
     "stylehacks": {
       "version": "4.0.3",
       "resolved": "http://r.cnpmjs.org/stylehacks/download/stylehacks-4.0.3.tgz",
@@ -9658,7 +9742,6 @@
       "version": "4.2.2",
       "resolved": "http://r.cnpmjs.org/uri-js/download/uri-js-4.2.2.tgz",
       "integrity": "sha1-lMVA4f93KVbiKZUHwBCupsiDjrA=",
-      "dev": true,
       "requires": {
         "punycode": "^2.1.0"
       }
@@ -10350,6 +10433,123 @@
         }
       }
     },
+    "webpack-jquery-ui": {
+      "version": "2.0.1",
+      "resolved": "https://r.cnpmjs.org/webpack-jquery-ui/download/webpack-jquery-ui-2.0.1.tgz",
+      "integrity": "sha1-ewYb6u2EjaPW9aCs39+d7brAuu0=",
+      "requires": {
+        "css-loader": "^1.0.0",
+        "file-loader": "^1.1.11",
+        "jquery": "^3.3.1",
+        "jquery-ui": "^1.12.1",
+        "style-loader": "^0.21.0"
+      },
+      "dependencies": {
+        "css-loader": {
+          "version": "1.0.1",
+          "resolved": "https://r.cnpmjs.org/css-loader/download/css-loader-1.0.1.tgz",
+          "integrity": "sha1-aIW7UjOzXsR7AGBX2gHMZAtref4=",
+          "requires": {
+            "babel-code-frame": "^6.26.0",
+            "css-selector-tokenizer": "^0.7.0",
+            "icss-utils": "^2.1.0",
+            "loader-utils": "^1.0.2",
+            "lodash": "^4.17.11",
+            "postcss": "^6.0.23",
+            "postcss-modules-extract-imports": "^1.2.0",
+            "postcss-modules-local-by-default": "^1.2.0",
+            "postcss-modules-scope": "^1.1.0",
+            "postcss-modules-values": "^1.3.0",
+            "postcss-value-parser": "^3.3.0",
+            "source-list-map": "^2.0.0"
+          }
+        },
+        "file-loader": {
+          "version": "1.1.11",
+          "resolved": "http://r.cnpmjs.org/file-loader/download/file-loader-1.1.11.tgz",
+          "integrity": "sha1-b+iGRJsPKpNuQ8q6rAzb+zaVBvg=",
+          "requires": {
+            "loader-utils": "^1.0.2",
+            "schema-utils": "^0.4.5"
+          }
+        },
+        "icss-utils": {
+          "version": "2.1.0",
+          "resolved": "http://r.cnpmjs.org/icss-utils/download/icss-utils-2.1.0.tgz",
+          "integrity": "sha1-g/Cg7DeL8yRheLbCrZE28TWxyWI=",
+          "requires": {
+            "postcss": "^6.0.1"
+          }
+        },
+        "postcss": {
+          "version": "6.0.23",
+          "resolved": "https://r.cnpmjs.org/postcss/download/postcss-6.0.23.tgz",
+          "integrity": "sha1-YcgswyisYOZ3ZF+XkFTrmLwOMyQ=",
+          "requires": {
+            "chalk": "^2.4.1",
+            "source-map": "^0.6.1",
+            "supports-color": "^5.4.0"
+          }
+        },
+        "postcss-modules-extract-imports": {
+          "version": "1.2.1",
+          "resolved": "http://r.cnpmjs.org/postcss-modules-extract-imports/download/postcss-modules-extract-imports-1.2.1.tgz",
+          "integrity": "sha1-3IfjQUjsfqtfeR981YSYMzdbdBo=",
+          "requires": {
+            "postcss": "^6.0.1"
+          }
+        },
+        "postcss-modules-local-by-default": {
+          "version": "1.2.0",
+          "resolved": "https://r.cnpmjs.org/postcss-modules-local-by-default/download/postcss-modules-local-by-default-1.2.0.tgz",
+          "integrity": "sha1-99gMOYxaOT+nlkRmvRlQCn1hwGk=",
+          "requires": {
+            "css-selector-tokenizer": "^0.7.0",
+            "postcss": "^6.0.1"
+          }
+        },
+        "postcss-modules-scope": {
+          "version": "1.1.0",
+          "resolved": "http://r.cnpmjs.org/postcss-modules-scope/download/postcss-modules-scope-1.1.0.tgz",
+          "integrity": "sha1-1upkmUx5+XtipytCb75gVqGUu5A=",
+          "requires": {
+            "css-selector-tokenizer": "^0.7.0",
+            "postcss": "^6.0.1"
+          }
+        },
+        "postcss-modules-values": {
+          "version": "1.3.0",
+          "resolved": "http://r.cnpmjs.org/postcss-modules-values/download/postcss-modules-values-1.3.0.tgz",
+          "integrity": "sha1-7P+p1+GSUYOJ9CrQ6D9yrsRW6iA=",
+          "requires": {
+            "icss-replace-symbols": "^1.1.0",
+            "postcss": "^6.0.1"
+          }
+        },
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "http://r.cnpmjs.org/postcss-value-parser/download/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha1-n/giVH4okyE88cMO+lGsX9G6goE="
+        },
+        "schema-utils": {
+          "version": "0.4.7",
+          "resolved": "https://r.cnpmjs.org/schema-utils/download/schema-utils-0.4.7.tgz",
+          "integrity": "sha1-unT1l9K+LqiAExdG7hfQoJPGgYc=",
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-keywords": "^3.1.0"
+          }
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "http://r.cnpmjs.org/supports-color/download/supports-color-5.5.0.tgz",
+          "integrity": "sha1-4uaaRKyHcveKHsCzW2id9lMO/I8=",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "webpack-log": {
       "version": "2.0.0",
       "resolved": "http://r.cnpmjs.org/webpack-log/download/webpack-log-2.0.0.tgz",

package.json

@@ -10,10 +10,14 @@
     "axios": "^0.19.2",
     "core-js": "^3.6.5",
     "element-ui": "^2.13.2",
+    "jquery": "^3.5.1",
+    "jquery-ui": "^1.12.1",
     "js-cookie": "^2.2.1",
+    "pivottable": "^2.23.0",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
-    "vuex": "^3.4.0"
+    "vuex": "^3.4.0",
+    "webpack-jquery-ui": "^2.0.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.4.0",

src/Api/payment.js

@@ -0,0 +1,51 @@
+import axios from '@/axios/http';
+
+const URL = {
+    payment: 'payment/',
+    menu: 'menu/'
+}
+
+/** 查询付款，可以带id查询指定
+ * @param {Object} params 
+ */
+export function getPayment(params = {}) {
+    let id = params.hasOwnProperty('id') ? params.id : ""
+    delete params.id
+    return axios({
+        url: `${URL.payment}${id}`,
+        method: 'get',
+        params
+    })
+}
+
+/** 增加配置
+ * @param {Object} data {name:配置名称,code:类型,config:配置字符串}
+ */
+export function addConfig(data) {
+    return axios({
+        url: URL.menu,
+        method: 'post',
+        data
+    })
+}
+
+/** 获取配置
+ * @param {Object} params {id:配置id(空则全部)}
+ */
+export function getConfig(params = {}) {
+    let id = params.hasOwnProperty('id') ? `${params.id}/` : ""
+    return axios({
+        url: `${URL.menu}${id}`,
+        method: 'get'
+    })
+}
+
+/** 删除配置
+ * @param {Object} params {id:配置id}
+ */
+export function delConfig(params) {
+    return axios({
+        url: `${URL.menu}${params.id}/`,
+        method: 'delete'
+    })
+}

src/Api/user.js

@@ -22,17 +22,6 @@ export function logout() {
     })
 }
 
-/**
- * 得到所有用户
- */
-export function allUser() {
-    return axios({
-        url: URL.user,
-        method: 'get'
-    })
-}
-
-
 export function getReport(id) {
     return axios({
         url: `${URL.report}${id}/`,
@@ -72,4 +61,15 @@ export function delReport(id) {
         url: `${URL.report}${id}/`,
         method: 'delete'
     })
+}
+
+/**
+ * 得到所有用户
+ */
+export function getUsers(params = {}) {
+    return axios({
+        url: URL.user,
+        method: 'get',
+        params
+    })
 }

src/App.vue

@@ -17,7 +17,7 @@
           v-if="!item.hasOwnProperty('children')"
           :key="index"
         >{{item.alias}}</el-menu-item>
-        <el-submenu :index="$route.path" v-else :key="index">
+        <el-submenu :index="item.name" v-else :key="index">
           <template slot="title">{{item.alias}}</template>
           <!-- :index="item.path+'/'+child.path.split(':')[0]" -->
           <el-menu-item
@@ -31,7 +31,7 @@
 
     <router-view />
 
-    <hr />
+    <!-- <hr /> -->
 
     <div class="buttons">
       <!-- :disabled="!isLogin" -->
@@ -69,16 +69,21 @@ export default {
       dialogVisible: false,
       user: {
         username: "",
-        password: ""
-      }
+        password: "",
+      },
     };
   },
   computed: {
-    isLogin() {
-      console.log("csrftoken", this.$Cookie.get("csrftoken"));
-      return this.$Cookie.get("csrftoken") === undefined;
+    isLogin: {
+      get() {
+        console.log("csrftoken", this.$Cookie.get("csrftoken"));
+        return this.$Cookie.get("csrftoken") === undefined;
+      },
+      set() {
+        return this.$Cookie.get("csrftoken") === undefined;
+      },
     },
-    ...mapGetters(["getterPermission"])
+    ...mapGetters(["getterPermission"]),
   },
   created() {
     //加载异步路由
@@ -87,22 +92,23 @@ export default {
         path: "/asyncTest",
         name: "asyncTest",
         alias: "异步菜单",
-        component: () => import("@/views/asyncTest/asyncTest.vue")
-      }
+        component: () => import("@/views/asyncTest/asyncTest.vue"),
+      },
     ];
     this.asyncAddRouters(asyncRouters);
   },
   methods: {
     login() {
       console.log("login");
-      console.log(document.cookie);
+      // console.log(document.cookie);
       login(this.user)
-        .then(res => {
+        .then((res) => {
           console.log(res);
           this.$nextTick(() => {
             if (document.cookie !== "") {
+              // console.log(document.cookie);
               console.log("刷新界面");
-              location.reload();
+              // location.reload();
               this.dialogVisible = false;
               this.isLogin = true;
             } else {
@@ -110,21 +116,23 @@ export default {
             }
           });
         })
-        .catch(e => {
+        .catch((e) => {
           this.$message({
             type: "error",
-            message: e
+            message: e,
           });
+          this.$Cookie.remove("csrftoken");
           console.log(e);
         });
     },
     logout() {
-      logout().then(res => {
-        this.$Cookie.remove("csrftoken");
-        console.log(document.cookie);
+      logout().then((res) => {
         console.log(res);
+        console.log(document.cookie);
+        this.$Cookie.remove("csrftoken");
+        location.reload();
       });
-      this.$Cookie.remove("csrftoken");
+      // this.$Cookie.remove("sessionid");
       console.log("登出");
     },
     //选择菜单
@@ -134,12 +142,12 @@ export default {
       // console.log(this.$route.name, pathName);
       if (this.$route.name !== pathName) {
         this.$router.push({
-          name: indexPath[indexPath.length - 1]
+          name: indexPath[indexPath.length - 1],
         });
       }
     },
-    ...mapActions(["asyncAddRouters"])
-  }
+    ...mapActions(["asyncAddRouters"]),
+  },
 };
 </script>
 

src/axios/http.js

@@ -8,9 +8,18 @@ axios.defaults.timeout = 30000
 axios.interceptors.request.use(
     config => {
         // console.log('发送请求拦截');
-        // console.log('cookie:', document.cookie.split('=')[1]);
-
-        config.headers['X-CSRFToken'] = document.cookie.split('=')[1]
+        // console.log('cookie:', document.cookie);
+        let csrftoken = ""
+        let ArrCookie = document.cookie.split(';')
+        ArrCookie.forEach(cookie => {
+            if (cookie.split('=')[0] == "csrftoken") {
+                csrftoken = cookie.split('=')[1]
+                return
+            }
+        });
+        if (csrftoken !== "") {
+            config.headers['X-CSRFToken'] = csrftoken
+        }
 
         return config;
     },

src/main.js

@@ -5,10 +5,12 @@ import store from './store'
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 import Cookie from 'js-cookie'
+import $ from 'jquery'
 
 Vue.use(ElementUI);
 
 Vue.prototype.$Cookie = Cookie
+Vue.prototype.$ = $
 
 Vue.config.productionTip = false
 

src/router/index.js

@@ -53,6 +53,36 @@ export const constantRoutes = [{
         alias: '动态表单',
         component: () =>
             import ('@/views/dynamicTable/dynamicTable.vue')
+    },
+    {
+        path: '/pivottable',
+        name: 'pivottable',
+        alias: '透视图',
+        redirect: '/pivottable/demo1',
+        component: () =>
+            import ('@/views/pivottable'),
+        children: [{
+                path: 'demo1',
+                name: 'demo1',
+                alias: "简单案例",
+                component: () =>
+                    import ('@/views/pivottable/demo1')
+            },
+            {
+                path: 'c3',
+                name: 'c3',
+                alias: "c3",
+                component: () =>
+                    import ('@/views/pivottable/c3')
+            },
+            {
+                path: 'curd',
+                name: 'curd',
+                alias: "curd",
+                component: () =>
+                    import ('@/views/pivottable/curd')
+            },
+        ]
     }
 ]
 

src/views/dynamicTable/components/transfer.vue

@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <el-transfer
+      class="transfer"
+      v-loading="loading.transfer"
+      v-model="value"
+      :data="data"
+      :titles="['全部 用户', `${jobName} 用户`]"
+      @change="handleChange"
+    ></el-transfer>
+    <div class="footer-handles">
+      <el-button size="small">取消</el-button>
+      <el-button type="primary" size="small" @click="pushUsers">确定</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getUsers } from "@/Api/user";
+export default {
+  name: "transfer",
+  props: {
+    jobName: {
+      type: String,
+      default: "**部门人员"
+    },
+    users: {
+      type: Array,
+      default: (val)=>{
+          console.log(val);
+          return []
+      }
+    },
+    visible:{
+        type:Boolean,
+        default:false
+    }
+  },
+  data() {
+    return {
+      value: ["1"],
+      data: [
+        // { key: 1, label: "选择1", disabled: false },
+        // { key: 2, label: "选择2", disabled: false },
+        // { key: 3, label: "选择3", disabled: false },
+        // { key: 4, label: "选择4", disabled: false },
+        // { key: 5, label: "选择5", disabled: false }
+      ],
+      loading: {
+        transfer: false
+      }
+    };
+  },
+  created() {
+    this.loading.transfer = true;
+    getUsers().then(res => {
+    //   console.log(res);
+      let result = res.data.result;
+      let data = [];
+      result.forEach(e => {
+        data.push({
+          key: e.id,
+          label: e.username
+        });
+      });
+      this.data = data;
+      this.loading.transfer = false;
+    });
+  },
+  watch: {
+      // 打开了则把已经选择的value初始一下
+      visible(val){
+          this.value = this.users
+      }
+  },
+  methods: {
+    handleChange(value, direction, movedKeys) {
+      console.log(this.value);
+      console.log(value, direction, movedKeys);
+    },
+    pushUsers(){
+        console.log(确定);
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.footer-handles {
+  display: flex;
+  justify-content: flex-end;
+  margin: 10px 15px 0px;
+}
+</style>
+<style lang="less" >
+.transfer {
+  display: flex;
+  justify-content: center;
+  .el-transfer__buttons {
+    display: flex;
+    align-items: center;
+    button {
+      margin-bottom: 0px;
+    }
+  }
+}
+</style>

src/views/dynamicTable/dynamicTable.vue

@@ -7,7 +7,7 @@
       <el-container>
         <el-main>
           <el-tabs v-model="active" type="border-card">
-            <div v-if="!active" class="tips">空空哒哟~</div>
+            <div v-if="!active || checkNode.length==0" class="tips">空空哒哟~</div>
             <!-- 部门tabs -->
             <template v-for="node in checkNode">
               <el-tab-pane
@@ -18,14 +18,22 @@
                 v-loading="loading.childrenActive"
               >
                 <!-- 岗位tabs -->
-                <el-tabs v-model="childrenActive" editable @edit="handleTabsEdit">
-                  <div v-if="!childrenActive" class="tips">空空哒哟~</div>
+                <el-tabs
+                  v-model="childrenActive"
+                  editable
+                  @edit="handleTabsEdit"
+                  @tab-click="childrenTabClick"
+                >
+                  <div v-if="!childrenActive || childrenNode.length==0" class="tips">空空哒哟~</div>
                   <el-tab-pane
                     v-for="children in childrenNode"
                     :key="children.id"
                     :label="children.name"
                     :name="children.id.toString()"
                   >
+                    <div class="userTableHandle">
+                      <el-button type="primary" size="small" @click="visible.dialog=true">添加</el-button>
+                    </div>
                     <!-- 用户table -->
                     <el-table
                       :data="userTableData"
@@ -42,6 +50,14 @@
               </el-tab-pane>
             </template>
           </el-tabs>
+          <!-- 用户管理 -->
+          <el-dialog title="用户管理" :visible.sync="visible.dialog" width="650px">
+            <transfer
+              :jobName="jobs.activeTabName"
+              :users="userTableData"
+              :visible="visible.dialog"
+            />
+          </el-dialog>
         </el-main>
         <el-footer>Footer</el-footer>
       </el-container>
@@ -51,11 +67,12 @@
 
 <script>
 import { addJob, getJob, delJob } from "@/Api/jobs";
-import { allUser } from "@/Api/user";
+import { getUsers } from "@/Api/user";
 export default {
   name: "home",
   components: {
-    tree: () => import("./components/tree")
+    tree: () => import("./components/tree"),
+    transfer: () => import("./components/transfer")
   },
   data() {
     return {
@@ -63,6 +80,9 @@ export default {
       active: "",
       childrenNode: [],
       childrenActive: "",
+      jobs: {
+        activeTabName: ""
+      },
       dept: {
         //部门信息
         id: "",
@@ -73,6 +93,9 @@ export default {
         childrenActive: false,
         userTableData: false
       },
+      visible: {
+        dialog: false
+      },
       userTableData: [{ id: 1, username: "张三", email: "111@qq.com" }]
     };
   },
@@ -91,6 +114,7 @@ export default {
     },
     //初始化岗位默认选中
     childrenNode(val) {
+      this.jobs.activeTabName = val.length == 0 ? "" : val[0].name;
       this.childrenActive = val.length == 0 ? "" : val[0].id.toString();
     },
     //选中的部门改变
@@ -102,7 +126,12 @@ export default {
     },
     //选中的岗位改变
     childrenActive(val) {
-      this.initUserDetail();
+      this.initUserDetail(val);
+    },
+    "visible.dialog"(val) {
+      if (val) {
+        console.log();
+      }
     }
   },
   methods: {
@@ -198,35 +227,35 @@ export default {
         });
     },
     //初始化用户详情，岗位空则查询全部
-    initUserDetail(job_id = null) {
-      this.loading.userTableData = true;
-      allUser()
-        .then(res => {
-          this.userTableData = res.data.result;
-          this.$message({
-              type:'success',
-              message:res.data.message,
-              duration:1000
-          })
-          this.loading.userTableData = false;
-        })
-        .catch(e => {
-          this.loading.userTableData = false;
+    async initUserDetail(job_id = undefined) {
+      let params = job_id ? { job_id } : {};
+      await getUsers(params).then(res => {
+        this.userTableData = res.data.result;
+        this.$message({
+          type: "success",
+          message: res.data.message,
+          duration: 1000
         });
+      });
+      this.loading.userTableData = false;
+    },
+    //点击岗位tab
+    childrenTabClick(tab) {
+      this.jobs.activeTabName = tab.label;
     }
   },
-  directives:{
-      /**
-       * todo:权限控制 v-permission
-       */
-      permission:{
-          bind(el,binding){
-              console.log('绑定',el,binding);
-          },
-          inserted(el,binding){
-              console.log('插入父节点',el,binding);
-          }
+  directives: {
+    /**
+     * todo:权限控制 v-permission
+     */
+    permission: {
+      bind(el, binding) {
+        console.log("绑定", el, binding);
+      },
+      inserted(el, binding) {
+        console.log("插入父节点", el, binding);
       }
+    }
   }
 };
 </script>
@@ -254,6 +283,12 @@ export default {
   .el-main {
     background-color: #e9eef3;
     color: #333;
+    .userTableHandle {
+      .el-button {
+        float: right;
+        margin-bottom: 5px;
+      }
+    }
   }
 }
 </style>

src/views/pivottable/c3.vue

@@ -0,0 +1,30 @@
+<template>
+  <div id="output"></div>
+</template>
+
+<script>
+import $ from "jquery";
+export default {
+  data() {
+    return {
+      list: [
+        { name: "A", age: 12, cite: "温州" },
+        { name: "B", age: 12, cite: "广州" },
+        { name: "C", age: 12, cite: "浙江" },
+        { name: "D", age: 13, cite: "北京" },
+        { name: "E", age: 14, cite: "杭州" },
+        { name: "F", age: 12, cite: "上海" },
+      ],
+    };
+  },
+  created() {
+    this.$nextTick(() => {
+
+        $("#output").pivotUI(this.list)
+    });
+  },
+};
+</script>
+
+<style>
+</style>

src/views/pivottable/curd.vue

@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <div class="handles">
+      <el-button type="primary" size="small" @click="saveConfig">新建配置</el-button>
+      <el-tabs v-model="tabActive" @tab-click="tabClick" closable @tab-remove="removeTab">
+        <el-tab-pane
+          v-loading="loading.tab"
+          v-for="(config,index) in configs"
+          :key="index"
+          :label="config.name"
+          :name="config.id.toString()"
+        ></el-tab-pane>
+      </el-tabs>
+    </div>
+    <div id="output"></div>
+  </div>
+</template>
+
+<script>
+import { getPayment, addConfig, getConfig, delConfig } from "@/Api/payment";
+export default {
+  data() {
+    return {
+      data: [],
+      tabActive: "",
+      configs: [],
+      loading: {
+        tab: false,
+      },
+    };
+  },
+  created() {
+    getPayment().then((res) => {
+      this.data = res.data;
+      this.$nextTick(() => {
+        this.$("#output").pivotUI(this.data);
+      });
+    });
+    this.initConfig();
+  },
+  methods: {
+    //保存配置，新建配置，把当前配置发送给服务端
+    saveConfig() {
+      var config = this.$("#output")
+        ? this.$("#output").data("pivotUIOptions")
+        : {};
+      delete config.aggregators;
+      delete config.renderers;
+      this.$prompt("请输入新建配置名称", "配置名称", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+      })
+        .then(({ value }) => {
+          let data = {
+            name: value,
+            code: "payment",
+            config: JSON.stringify(config),
+          };
+          addConfig(data).then((res) => {
+            console.log(res);
+            this.$message({
+              type: "success",
+              message: "保存配置成功",
+              ducation: 1000,
+            });
+            this.initConfig();
+          });
+        })
+        .catch((e) => {
+          this.$message({
+            type: "warning",
+            message: "取消保存配置",
+            ducation: 1000,
+          });
+        });
+
+      // await this.$Cookie.set("pivotConfig", JSON.stringify(config));
+    },
+    //点击tab 使用配置
+    tabClick(tab) {
+      let params = {
+        id: tab.name,
+      };
+      getConfig(params).then((res) => {
+        let config = res.data.config;
+        this.$message({
+          type: "success",
+          message: `${tab.name} 配置获取成功`,
+        });
+        this.$("#output").pivotUI(this.data, JSON.parse(config), true);
+      });
+      console.log(tab);
+    },
+    //初始化配置项
+    initConfig() {
+      this.loading.tab = true;
+      getConfig().then((res) => {
+        this.configs = res.data;
+        console.log(res);
+        this.$message({
+          type: "success",
+          message: "初始化配置选项成功",
+        });
+        this.loading.tab = false;
+      });
+    },
+    //删除tab 删除tab的id
+    removeTab(tab) {
+      console.log("close", tab);
+      let params = { id: tab };
+      delConfig(params).then((res) => {
+        console.log(res);
+        this.$message({
+          type: "success",
+          message: `${tab}删除成功`,
+          ducation: 1000,
+        });
+        this.initConfig();
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.handles {
+  padding: 10px;
+}
+</style>

src/views/pivottable/demo1.vue

@@ -0,0 +1,49 @@
+<template>
+  <div id="output"></div>
+</template>
+
+<script>
+import $ from 'jquery'
+export default {
+  data() {
+    return {};
+  },
+  created() {
+    let data = [
+        {
+          color: "blue",
+          shape: "circle",
+        },
+        {
+          color: "red",
+          shape: "triangle",
+        },
+        {
+          color: "yellow",
+          shape: "circle",
+        },
+      ],
+      config = {
+        rows: ["color"],
+        cols: ["shape"],
+        count(data, rowKey, colKey) {
+          return {
+            count: 0,
+            push: function (record) {
+              console.log(record);
+            },
+            value: function () {
+              return this.count;
+            },
+            format: function (x) {
+              return x;
+            },
+          };
+        },
+      };
+    this.$(() => {
+      this.$("#output").pivot(data, config);
+    });
+  },
+};
+</script>

src/views/pivottable/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <router-view></router-view>
+</template>
+
+<script>
+import $ from 'jquery'
+import 'pivottable'
+import 'pivottable/dist/pivot.min.css'
+import 'jquery-ui'
+import 'webpack-jquery-ui'
+
+export default {
+    name:'pivottable'
+}
+</script>
+
+<style>
+
+</style>

src/views/pivottable/mps.json

@@ -0,0 +1,309 @@
+[
+{"Province": "Quebec", "Party": "NDP", "Age": 22, "Name": "Liu, Laurin", "Gender": "Female"},
+{"Province": "Quebec", "Party": "Bloc Quebecois", "Age": 43, "Name": "Mourani, Maria", "Gender": "Female"},
+{"Province": "Quebec", "Party": "NDP", "Age": "", "Name": "Sellah, Djaouida", "Gender": "Female"},
+{"Province": "Quebec", "Party": "NDP", "Age": 72, "Name": "St-Denis, Lise", "Gender": "Female"},
+{"Province": "British Columbia", "Party": "Liberal", "Age": 71, "Name": "Fry, Hedy", "Gender": "Female"},
+{"Province": "Quebec", "Party": "NDP", "Age": 70, "Name": "Turmel, Nycole", "Gender": "Female"},
+{"Province": "Ontario", "Party": "Liberal", "Age": 68, "Name": "Sgro, Judy", "Gender": "Female"},
+{"Province": "Quebec", "Party": "NDP", "Age": 67, "Name": "Raynault, Francine", "Gender": "Female"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 66, "Name": "Davidson, Patricia", "Gender": "Female"},
+{"Province": "Manitoba", "Party": "Conservative", "Age": 65, "Name": "Smith, Joy", "Gender": "Female"},
+{"Province": "British Columbia", "Party": "Conservative", "Age": 64, "Name": "Wong, Alice", "Gender": "Female"},
+{"Province": "New Brunswick", "Party": "Conservative", "Age": 63, "Name": "O'Neill Gordon, Tilly", "Gender": "Female"},
+{"Province": "Alberta", "Party": "Conservative", "Age": 63, "Name": "Ablonczy, Diane", "Gender": "Female"},
+{"Province": "Alberta", "Party": "NDP", "Age": 63, "Name": "Duncan, Linda Francis", "Gender": "Female"},
+{"Province": "Ontario", "Party": "Liberal", "Age": 62, "Name": "Bennett, Carolyn", "Gender": "Female"},
+{"Province": "Ontario", "Party": "NDP", "Age": 61, "Name": "Nash, Peggy", "Gender": "Female"},
+{"Province": "Ontario", "Party": "NDP", "Age": 61, "Name": "Mathyssen, Irene", "Gender": "Female"},
+{"Province": "British Columbia", "Party": "NDP", "Age": 60, "Name": "Sims, Jinny Jogindera", "Gender": "Female"},
+{"Province": "Newfoundland and Labrador", "Party": "Liberal", "Age": 60, "Name": "Foote, Judy", "Gender": "Female"},
+{"Province": "British Columbia", "Party": "NDP", "Age": 60, "Name": "Crowder, Jean", "Gender": "Female"},
+{"Province": "British Columbia", "Party": "NDP", "Age": 59, "Name": "Davies, Libby", "Gender": "Female"},
+{"Province": "Saskatchewan", "Party": "Conservative", "Age": 59, "Name": "Yelich, Lynne", "Gender": "Female"},
+{"Province": "Quebec", "Party": "NDP", "Age": 58, "Name": "Day, Anne-Marie", "Gender": "Female"},
+{"Province": "British Columbia", "Party": "Green", "Age": 58, "Name": "May, Elizabeth", "Gender": "Female"},
+{"Province": "British Columbia", "Party": "Liberal", "Age": 58, "Name": "Murray, Joyce", "Gender": "Female"},
+{"Province": "British Columbia", "Party": "Conservative", "Age": 57, "Name": "Findlay, Kerry-Lynne D.", "Gender": "Female"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 57, "Name": "Brown, Lois", "Gender": "Female"},
+{"Province": "Quebec", "Party": "NDP", "Age": 57, "Name": "Laverdière, Hélène", "Gender": "Female"},
+{"Province": "Quebec", "Party": "NDP", "Age": 57, "Name": "Boutin-Sweet, Marjolaine", "Gender": "Female"},
+{"Province": "Alberta", "Party": "Conservative", "Age": 56, "Name": "Crockatt, Joan", "Gender": "Female"},
+{"Province": "Ontario", "Party": "NDP", "Age": 55, "Name": "Chow, Olivia", "Gender": "Female"},
+{"Province": "British Columbia", "Party": "Conservative", "Age": 55, "Name": "McLeod, Cathy", "Gender": "Female"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 55, "Name": "Finley, Diane", "Gender": "Female"},
+{"Province": "Quebec", "Party": "NDP", "Age": 54, "Name": "LeBlanc, Hélène", "Gender": "Female"},
+{"Province": "British Columbia", "Party": "Conservative", "Age": 54, "Name": "Grewal, Nina", "Gender": "Female"},
+{"Province": "Ontario", "Party": "NDP", "Age": 54, "Name": "Hughes, Carol", "Gender": "Female"},
+{"Province": "Prince Edward Island", "Party": "Conservative", "Age": 53, "Name": "Shea, Gail", "Gender": "Female"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 53, "Name": "Truppe, Susan", "Gender": "Female"},
+{"Province": "British Columbia", "Party": "Conservative", "Age": 52, "Name": "Young, Wai", "Gender": "Female"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 52, "Name": "Gallant, Cheryl", "Gender": "Female"},
+{"Province": "Quebec", "Party": "NDP", "Age": 52, "Name": "Boivin, Françoise", "Gender": "Female"},
+{"Province": "Saskatchewan", "Party": "Conservative", "Age": 51, "Name": "Block, Kelly", "Gender": "Female"},
+{"Province": "Quebec", "Party": "NDP", "Age": 50, "Name": "Ayala, Paulina", "Gender": "Female"},
+{"Province": "Quebec", "Party": "NDP", "Age": 50, "Name": "Groguhé, Sadia", "Gender": "Female"},
+{"Province": "Ontario", "Party": "NDP", "Age": 49, "Name": "Charlton, Chris", "Gender": "Female"},
+{"Province": "Manitoba", "Party": "Conservative", "Age": 48, "Name": "Bergen, Candice", "Gender": "Female"},
+{"Province": "Quebec", "Party": "NDP", "Age": 46, "Name": "Perreault, Manon", "Gender": "Female"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 46, "Name": "James, Roxanne", "Gender": "Female"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 46, "Name": "Ambler, Stella", "Gender": "Female"},
+{"Province": "Ontario", "Party": "Liberal", "Age": 46, "Name": "Duncan, Kirsty", "Gender": "Female"},
+{"Province": "Manitoba", "Party": "Conservative", "Age": 45, "Name": "Glover, Shelly", "Gender": "Female"},
+{"Province": "Territories", "Party": "Conservative", "Age": 45, "Name": "Aglukkaq, Leona", "Gender": "Female"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 44, "Name": "Raitt, Lisa", "Gender": "Female"},
+{"Province": "Alberta", "Party": "Conservative", "Age": 43, "Name": "Ambrose, Rona", "Gender": "Female"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 42, "Name": "Leitch, Kellie", "Gender": "Female"},
+{"Province": "Nova Scotia", "Party": "NDP", "Age": 39, "Name": "Leslie, Megan", "Gender": "Female"},
+{"Province": "Quebec", "Party": "NDP", "Age": 38, "Name": "Hassainia, Sana", "Gender": "Female"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 38, "Name": "Adams, Eve", "Gender": "Female"},
+{"Province": "Alberta", "Party": "Conservative", "Age": 32, "Name": "Rempel, Michelle", "Gender": "Female"},
+{"Province": "Quebec", "Party": "NDP", "Age": 32, "Name": "Papillon, Annick", "Gender": "Female"},
+{"Province": "Ontario", "Party": "NDP", "Age": 31, "Name": "Sitsabaiesan, Rathika", "Gender": "Female"},
+{"Province": "Quebec", "Party": "NDP", "Age": 30, "Name": "Quach, Anne Minh-Thu", "Gender": "Female"},
+{"Province": "Manitoba", "Party": "NDP", "Age": 30, "Name": "Ashton, Niki", "Gender": "Female"},
+{"Province": "Quebec", "Party": "NDP", "Age": 29, "Name": "Moore, Christine", "Gender": "Female"},
+{"Province": "Quebec", "Party": "NDP", "Age": 28, "Name": "Morin, Isabelle", "Gender": "Female"},
+{"Province": "Quebec", "Party": "NDP", "Age": 28, "Name": "Blanchette-Lamothe, Lysane", "Gender": "Female"},
+{"Province": "Quebec", "Party": "NDP", "Age": 28, "Name": "Brosseau, Ruth Ellen", "Gender": "Female"},
+{"Province": "Quebec", "Party": "NDP", "Age": 28, "Name": "Latendresse, Alexandrine", "Gender": "Female"},
+{"Province": "Quebec", "Party": "NDP", "Age": 28, "Name": "Doré Lefebvre, Rosane", "Gender": "Female"},
+{"Province": "Quebec", "Party": "NDP", "Age": 27, "Name": "Morin, Marie-Claude", "Gender": "Female"},
+{"Province": "Quebec", "Party": "NDP", "Age": 27, "Name": "Michaud, Élaine", "Gender": "Female"},
+{"Province": "Quebec", "Party": "NDP", "Age": 24, "Name": "Péclet, Ève", "Gender": "Female"},
+{"Province": "Quebec", "Party": "NDP", "Age": 23, "Name": "Freeman, Mylène", "Gender": "Female"},
+{"Province": "Quebec", "Party": "NDP", "Age": 22, "Name": "Borg, Charmaine", "Gender": "Female"},
+{"Province": "Manitoba", "Party": "Conservative", "Age": "", "Name": "Bateman, Joyce", "Gender": "Female"},
+{"Province": "British Columbia", "Party": "Conservative", "Age": 43, "Name": "Hiebert, Russ", "Gender": "Male"},
+{"Province": "Quebec", "Party": "NDP", "Age": 59, "Name": "Jacob, Pierre", "Gender": "Male"},
+{"Province": "Saskatchewan", "Party": "Conservative", "Age": 57, "Name": "Vellacott, Maurice", "Gender": "Male"},
+{"Province": "Saskatchewan", "Party": "Conservative", "Age": 75, "Name": "Boughen, Ray", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 73, "Name": "O'Connor, Gordon", "Gender": "Male"},
+{"Province": "Quebec", "Party": "Liberal", "Age": 72, "Name": "Cotler, Irwin", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 72, "Name": "Oliver, Joe", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 71, "Name": "Tilson, David Allan", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 70, "Name": "Fantino, Julian", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 69, "Name": "Kent, Peter", "Gender": "Male"},
+{"Province": "Quebec", "Party": "Bloc Quebecois", "Age": 69, "Name": "Plamondon, Louis", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 69, "Name": "Schellenberger, Gary", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 68, "Name": "Lauzon, Guy", "Gender": "Male"},
+{"Province": "British Columbia", "Party": "Conservative", "Age": 68, "Name": "Harris, Richard M.", "Gender": "Male"},
+{"Province": "Alberta", "Party": "Conservative", "Age": 68, "Name": "Goldring, Peter", "Gender": "Male"},
+{"Province": "British Columbia", "Party": "NDP", "Age": 67, "Name": "Atamanenko, Alex", "Gender": "Male"},
+{"Province": "Alberta", "Party": "Conservative", "Age": 67, "Name": "Payne, LaVar", "Gender": "Male"},
+{"Province": "Saskatchewan", "Party": "Conservative", "Age": 67, "Name": "Breitkreuz, Garry W.", "Gender": "Male"},
+{"Province": "Quebec", "Party": "NDP", "Age": 66, "Name": "Genest, Réjean", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 66, "Name": "MacKenzie, Dave", "Gender": "Male"},
+{"Province": "Ontario", "Party": "NDP", "Age": 66, "Name": "Hyer, Bruce", "Gender": "Male"},
+{"Province": "Prince Edward Island", "Party": "Liberal", "Age": 66, "Name": "MacAulay, Lawrence", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 65, "Name": "Galipeau, Royal", "Gender": "Male"},
+{"Province": "Ontario", "Party": "NDP", "Age": 65, "Name": "Marston, Wayne", "Gender": "Male"},
+{"Province": "Alberta", "Party": "Conservative", "Age": 65, "Name": "Hawn, Laurie", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 65, "Name": "Kramp, Daryl", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 65, "Name": "Shipley, Bev", "Gender": "Male"},
+{"Province": "Nova Scotia", "Party": "Conservative", "Age": 65, "Name": "Kerr, Greg", "Gender": "Male"},
+{"Province": "Ontario", "Party": "NDP", "Age": 65, "Name": "Comartin, Joe", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 64, "Name": "Norlock, Rick", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Liberal", "Age": 64, "Name": "McKay, John", "Gender": "Male"},
+{"Province": "British Columbia", "Party": "Conservative", "Age": 64, "Name": "Mayes, Colin", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Liberal", "Age": 64, "Name": "Rae, Bob", "Gender": "Male"},
+{"Province": "Newfoundland and Labrador", "Party": "NDP", "Age": 64, "Name": "Harris, Jack", "Gender": "Male"},
+{"Province": "British Columbia", "Party": "Conservative", "Age": 64, "Name": "Duncan, John", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 63, "Name": "Chisu, Corneliu", "Gender": "Male"},
+{"Province": "Quebec", "Party": "Liberal", "Age": 63, "Name": "Garneau, Marc", "Gender": "Male"},
+{"Province": "Prince Edward Island", "Party": "Liberal", "Age": 63, "Name": "Easter, Arnold Wayne", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 63, "Name": "Aspin, Jay", "Gender": "Male"},
+{"Province": "Saskatchewan", "Party": "Liberal", "Age": 63, "Name": "Goodale, Ralph", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 63, "Name": "Albrecht, Harold", "Gender": "Male"},
+{"Province": "Ontario", "Party": "NDP", "Age": 63, "Name": "Gravelle, Claude", "Gender": "Male"},
+{"Province": "Saskatchewan", "Party": "Conservative", "Age": 63, "Name": "Komarnicki, Ed", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 62, "Name": "Flaherty, James Michael (Jim)", "Gender": "Male"},
+{"Province": "British Columbia", "Party": "NDP", "Age": 62, "Name": "Rankin, Murray", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Liberal", "Age": 62, "Name": "McCallum, John", "Gender": "Male"},
+{"Province": "British Columbia", "Party": "Conservative", "Age": 62, "Name": "Warawa, Mark", "Gender": "Male"},
+{"Province": "Alberta", "Party": "Conservative", "Age": 62, "Name": "Obhrai, Deepak", "Gender": "Male"},
+{"Province": "Alberta", "Party": "Conservative", "Age": 62, "Name": "Benoit, Leon Earl", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 62, "Name": "Leung, Chungsen", "Gender": "Male"},
+{"Province": "Quebec", "Party": "NDP", "Age": 61, "Name": "Morin, Marc-André", "Gender": "Male"},
+{"Province": "Manitoba", "Party": "Conservative", "Age": 61, "Name": "Sopuck, Robert", "Gender": "Male"},
+{"Province": "Saskatchewan", "Party": "Conservative", "Age": 61, "Name": "Ritz, Gerry", "Gender": "Male"},
+{"Province": "British Columbia", "Party": "NDP", "Age": 61, "Name": "Garrison, Randall", "Gender": "Male"},
+{"Province": "British Columbia", "Party": "Conservative", "Age": 61, "Name": "Lunney, James", "Gender": "Male"},
+{"Province": "Saskatchewan", "Party": "Conservative", "Age": 61, "Name": "Lukiwski, Tom", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 60, "Name": "Carmichael, John", "Gender": "Male"},
+{"Province": "Alberta", "Party": "Conservative", "Age": 60, "Name": "Menzies, Ted", "Gender": "Male"},
+{"Province": "New Brunswick", "Party": "Conservative", "Age": 60, "Name": "Valcourt, Bernard", "Gender": "Male"},
+{"Province": "New Brunswick", "Party": "Conservative", "Age": 60, "Name": "Ashfield, Keith", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 60, "Name": "Nicholson, Rob", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 60, "Name": "Young, Terence H.", "Gender": "Male"},
+{"Province": "Manitoba", "Party": "Conservative", "Age": 60, "Name": "Toews, Vic", "Gender": "Male"},
+{"Province": "Ontario", "Party": "NDP", "Age": 60, "Name": "Sullivan, Mike", "Gender": "Male"},
+{"Province": "Quebec", "Party": "NDP", "Age": 59, "Name": "Patry, Claude", "Gender": "Male"},
+{"Province": "Nova Scotia", "Party": "Conservative", "Age": 59, "Name": "Keddy, Gerald", "Gender": "Male"},
+{"Province": "Territories", "Party": "NDP", "Age": 59, "Name": "Bevington, Dennis Fraser", "Gender": "Male"},
+{"Province": "Ontario", "Party": "NDP", "Age": 59, "Name": "Allen, Malcolm", "Gender": "Male"},
+{"Province": "Ontario", "Party": "NDP", "Age": 59, "Name": "Rafferty, John", "Gender": "Male"},
+{"Province": "Alberta", "Party": "Conservative", "Age": 59, "Name": "Dreeshen, Earl", "Gender": "Male"},
+{"Province": "British Columbia", "Party": "Conservative", "Age": 59, "Name": "Kamp, Randy", "Gender": "Male"},
+{"Province": "Alberta", "Party": "Conservative", "Age": 59, "Name": "Merrifield, Rob", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 58, "Name": "Woodworth, Stephen", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 58, "Name": "McColeman, Phil", "Gender": "Male"},
+{"Province": "Quebec", "Party": "Conservative", "Age": 58, "Name": "Lebel, Denis", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 58, "Name": "Lizon, Wladyslaw", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 58, "Name": "Holder, Ed", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Liberal", "Age": 58, "Name": "Valeriote, Frank", "Gender": "Male"},
+{"Province": "Ontario", "Party": "NDP", "Age": 58, "Name": "Christopherson, David", "Gender": "Male"},
+{"Province": "Quebec", "Party": "NDP", "Age": 58, "Name": "Mulcair, Thomas J.", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 58, "Name": "Daniel, Joe", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Liberal", "Age": 57, "Name": "Karygiannis, Jim", "Gender": "Male"},
+{"Province": "New Brunswick", "Party": "NDP", "Age": 57, "Name": "Godin, Yvon", "Gender": "Male"},
+{"Province": "Quebec", "Party": "NDP", "Age": 57, "Name": "Dionne Labelle, Pierre", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 57, "Name": "Preston, Joe", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Liberal", "Age": 57, "Name": "Bélanger, Mauril", "Gender": "Male"},
+{"Province": "British Columbia", "Party": "Conservative", "Age": 57, "Name": "Fast, Edward", "Gender": "Male"},
+{"Province": "Manitoba", "Party": "Conservative", "Age": 57, "Name": "Tweed, Mervin C.", "Gender": "Male"},
+{"Province": "Quebec", "Party": "Liberal", "Age": 57, "Name": "Dion, Stéphane", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 57, "Name": "Van Kesteren, Dave", "Gender": "Male"},
+{"Province": "Nova Scotia", "Party": "Liberal", "Age": 57, "Name": "Cuzner, Rodger", "Gender": "Male"},
+{"Province": "Manitoba", "Party": "NDP", "Age": 57, "Name": "Martin, Pat", "Gender": "Male"},
+{"Province": "Nova Scotia", "Party": "NDP", "Age": 56, "Name": "Stoffer, Peter", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 56, "Name": "Miller, Larry", "Gender": "Male"},
+{"Province": "Quebec", "Party": "NDP", "Age": 56, "Name": "Blanchette, Denis", "Gender": "Male"},
+{"Province": "Quebec", "Party": "NDP", "Age": 56, "Name": "Nunez-Melo, José", "Gender": "Male"},
+{"Province": "New Brunswick", "Party": "Conservative", "Age": 55, "Name": "Goguen, Robert", "Gender": "Male"},
+{"Province": "Quebec", "Party": "Liberal", "Age": 55, "Name": "Scarpaleggia, Francis", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 55, "Name": "Sweet, David", "Gender": "Male"},
+{"Province": "Saskatchewan", "Party": "Conservative", "Age": 55, "Name": "Anderson, David", "Gender": "Male"},
+{"Province": "Nova Scotia", "Party": "NDP", "Age": 55, "Name": "Chisholm, Robert", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 55, "Name": "Stanton, Bruce", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 54, "Name": "Goodyear, Gary", "Gender": "Male"},
+{"Province": "British Columbia", "Party": "Conservative", "Age": 54, "Name": "Weston, John", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 54, "Name": "Dechert, Bob", "Gender": "Male"},
+{"Province": "Alberta", "Party": "Conservative", "Age": 54, "Name": "Shory, Devinder", "Gender": "Male"},
+{"Province": "Quebec", "Party": "NDP", "Age": 54, "Name": "Pilon, François", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 54, "Name": "Hayes, Bryan", "Gender": "Male"},
+{"Province": "Quebec", "Party": "NDP", "Age": 54, "Name": "Giguère, Alain", "Gender": "Male"},
+{"Province": "Alberta", "Party": "Conservative", "Age": 54, "Name": "Sorenson, Kevin", "Gender": "Male"},
+{"Province": "Quebec", "Party": "NDP", "Age": 53, "Name": "Benskin, Tyrone", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 53, "Name": "Menegakis, Costas", "Gender": "Male"},
+{"Province": "Alberta", "Party": "Conservative", "Age": 53, "Name": "Harper, Stephen", "Gender": "Male"},
+{"Province": "British Columbia", "Party": "Conservative", "Age": 53, "Name": "Wilks, David", "Gender": "Male"},
+{"Province": "Nova Scotia", "Party": "Liberal", "Age": 53, "Name": "Regan, Geoff", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Liberal", "Age": 52, "Name": "McGuinty, David", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 52, "Name": "Gosal, Bal", "Gender": "Male"},
+{"Province": "Quebec", "Party": "NDP", "Age": 52, "Name": "Aubin, Robert", "Gender": "Male"},
+{"Province": "Nova Scotia", "Party": "Liberal", "Age": 52, "Name": "Eyking, Mark", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 52, "Name": "Brown, Gordon", "Gender": "Male"},
+{"Province": "New Brunswick", "Party": "Conservative", "Age": 52, "Name": "Allen, Mike", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 51, "Name": "Clement, Tony", "Gender": "Male"},
+{"Province": "British Columbia", "Party": "Conservative", "Age": 51, "Name": "Cannan, Ronald", "Gender": "Male"},
+{"Province": "Quebec", "Party": "NDP", "Age": 51, "Name": "Rousseau, Jean", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 51, "Name": "Opitz, Ted", "Gender": "Male"},
+{"Province": "Manitoba", "Party": "Conservative", "Age": 50, "Name": "Toet, Lawrence", "Gender": "Male"},
+{"Province": "Ontario", "Party": "NDP", "Age": 50, "Name": "Cash, Andrew", "Gender": "Male"},
+{"Province": "Manitoba", "Party": "Liberal", "Age": 50, "Name": "Lamoureux, Kevin", "Gender": "Male"},
+{"Province": "Ontario", "Party": "NDP", "Age": 50, "Name": "Scott, Craig", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 50, "Name": "Adler, Mark", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 50, "Name": "Carrie, Colin", "Gender": "Male"},
+{"Province": "British Columbia", "Party": "NDP", "Age": 50, "Name": "Julian, Peter", "Gender": "Male"},
+{"Province": "Quebec", "Party": "Liberal", "Age": 50, "Name": "Pacetti, Massimo", "Gender": "Male"},
+{"Province": "Quebec", "Party": "NDP", "Age": 50, "Name": "Saganash, Romeo", "Gender": "Male"},
+{"Province": "Ontario", "Party": "NDP", "Age": 50, "Name": "Angus, Charlie", "Gender": "Male"},
+{"Province": "British Columbia", "Party": "NDP", "Age": 49, "Name": "Davies, Don", "Gender": "Male"},
+{"Province": "Quebec", "Party": "Conservative", "Age": 49, "Name": "Bernier, Maxime", "Gender": "Male"},
+{"Province": "Ontario", "Party": "NDP", "Age": 49, "Name": "Dewar, Paul", "Gender": "Male"},
+{"Province": "Alberta", "Party": "Conservative", "Age": 49, "Name": "Jean, Brian", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 49, "Name": "Devolin, Barry", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 49, "Name": "Lemieux, Pierre", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 49, "Name": "Van Loan, Peter", "Gender": "Male"},
+{"Province": "Prince Edward Island", "Party": "Liberal", "Age": 49, "Name": "Casey, Sean", "Gender": "Male"},
+{"Province": "Quebec", "Party": "NDP", "Age": 49, "Name": "Nantel, Pierre", "Gender": "Male"},
+{"Province": "Quebec", "Party": "Liberal", "Age": 49, "Name": "Coderre, Denis", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 49, "Name": "Wallace, Mike", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 48, "Name": "Braid, Peter", "Gender": "Male"},
+{"Province": "Quebec", "Party": "Conservative", "Age": 48, "Name": "Gourde, Jacques", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 48, "Name": "Reid, Scott", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Liberal", "Age": 48, "Name": "Hsu, Ted", "Gender": "Male"},
+{"Province": "British Columbia", "Party": "Conservative", "Age": 48, "Name": "Saxton, Andrew", "Gender": "Male"},
+{"Province": "New Brunswick", "Party": "Conservative", "Age": 48, "Name": "Weston, Rodney", "Gender": "Male"},
+{"Province": "Newfoundland and Labrador", "Party": "Conservative", "Age": 48, "Name": "Penashue, Peter", "Gender": "Male"},
+{"Province": "Quebec", "Party": "Bloc Quebecois", "Age": 48, "Name": "Bellavance, André", "Gender": "Male"},
+{"Province": "Alberta", "Party": "Conservative", "Age": 48, "Name": "Rathgeber, Brent", "Gender": "Male"},
+{"Province": "Ontario", "Party": "NDP", "Age": 48, "Name": "Kellway, Matthew", "Gender": "Male"},
+{"Province": "Quebec", "Party": "NDP", "Age": 47, "Name": "Toone, Philip", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 47, "Name": "Allison, Dean", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 47, "Name": "Trottier, Bernard", "Gender": "Male"},
+{"Province": "Quebec", "Party": "Conservative", "Age": 47, "Name": "Blaney, Steven", "Gender": "Male"},
+{"Province": "Manitoba", "Party": "Conservative", "Age": 47, "Name": "Bezan, James", "Gender": "Male"},
+{"Province": "Nova Scotia", "Party": "Conservative", "Age": 47, "Name": "MacKay, Peter Gordon", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 46, "Name": "Dykstra, Richard", "Gender": "Male"},
+{"Province": "British Columbia", "Party": "NDP", "Age": 46, "Name": "Sandhu, Jasbir", "Gender": "Male"},
+{"Province": "British Columbia", "Party": "NDP", "Age": 46, "Name": "Donnelly, Fin", "Gender": "Male"},
+{"Province": "Nova Scotia", "Party": "Conservative", "Age": 46, "Name": "Armstrong, Scott", "Gender": "Male"},
+{"Province": "Newfoundland and Labrador", "Party": "Liberal", "Age": 46, "Name": "Byrne, Gerry", "Gender": "Male"},
+{"Province": "British Columbia", "Party": "NDP", "Age": 46, "Name": "Stewart, Kennedy", "Gender": "Male"},
+{"Province": "Newfoundland and Labrador", "Party": "NDP", "Age": 46, "Name": "Cleary, Ryan", "Gender": "Male"},
+{"Province": "Quebec", "Party": "NDP", "Age": 45, "Name": "Côté, Raymond", "Gender": "Male"},
+{"Province": "Saskatchewan", "Party": "Conservative", "Age": 45, "Name": "Clarke, Rob", "Gender": "Male"},
+{"Province": "Nova Scotia", "Party": "Liberal", "Age": 45, "Name": "Brison, Scott", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 45, "Name": "Butt, Brad", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 45, "Name": "Rickford, Greg", "Gender": "Male"},
+{"Province": "New Brunswick", "Party": "Liberal", "Age": 45, "Name": "LeBlanc, Dominic", "Gender": "Male"},
+{"Province": "Saskatchewan", "Party": "Conservative", "Age": 45, "Name": "Hoback, Randy", "Gender": "Male"},
+{"Province": "Quebec", "Party": "NDP", "Age": 44, "Name": "Caron, Guy", "Gender": "Male"},
+{"Province": "Quebec", "Party": "NDP", "Age": 44, "Name": "Brahmi, Tarik", "Gender": "Male"},
+{"Province": "Alberta", "Party": "Conservative", "Age": 44, "Name": "Kenney, Jason", "Gender": "Male"},
+{"Province": "Ontario", "Party": "NDP", "Age": 44, "Name": "Masse, Brian", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 44, "Name": "Alexander, Chris", "Gender": "Male"},
+{"Province": "British Columbia", "Party": "Conservative", "Age": 44, "Name": "Zimmer, Bob", "Gender": "Male"},
+{"Province": "Alberta", "Party": "Conservative", "Age": 44, "Name": "Calkins, Blaine", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 43, "Name": "Baird, John", "Gender": "Male"},
+{"Province": "Alberta", "Party": "Conservative", "Age": 43, "Name": "Lake, Mike", "Gender": "Male"},
+{"Province": "Newfoundland and Labrador", "Party": "Liberal", "Age": 43, "Name": "Simms, Scott", "Gender": "Male"},
+{"Province": "Ontario", "Party": "NDP", "Age": 43, "Name": "Thibeault, Glenn", "Gender": "Male"},
+{"Province": "New Brunswick", "Party": "Conservative", "Age": 42, "Name": "Williamson, John", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 42, "Name": "Calandra, Paul", "Gender": "Male"},
+{"Province": "Quebec", "Party": "NDP", "Age": 42, "Name": "Chicoine, Sylvain", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 42, "Name": "Del Mastro, Dean", "Gender": "Male"},
+{"Province": "Alberta", "Party": "Conservative", "Age": 42, "Name": "Rajotte, James", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 42, "Name": "Seeback, Kyle", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 41, "Name": "Watson, Jeff", "Gender": "Male"},
+{"Province": "Quebec", "Party": "NDP", "Age": 41, "Name": "Lapointe, François", "Gender": "Male"},
+{"Province": "Quebec", "Party": "NDP", "Age": 41, "Name": "Nicholls, Jamie", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 41, "Name": "Chong, Michael D.", "Gender": "Male"},
+{"Province": "Quebec", "Party": "Liberal", "Age": 41, "Name": "Trudeau, Justin", "Gender": "Male"},
+{"Province": "Quebec", "Party": "NDP", "Age": 40, "Name": "Larose, Jean-François", "Gender": "Male"},
+{"Province": "Alberta", "Party": "Conservative", "Age": 40, "Name": "Anders, Rob", "Gender": "Male"},
+{"Province": "Manitoba", "Party": "Conservative", "Age": 40, "Name": "Fletcher, Steven John", "Gender": "Male"},
+{"Province": "British Columbia", "Party": "NDP", "Age": 40, "Name": "Cullen, Nathan", "Gender": "Male"},
+{"Province": "Quebec", "Party": "NDP", "Age": 39, "Name": "Ravignat, Mathieu", "Gender": "Male"},
+{"Province": "Manitoba", "Party": "Conservative", "Age": 39, "Name": "Bruinooge, Rod", "Gender": "Male"},
+{"Province": "Quebec", "Party": "NDP", "Age": 39, "Name": "Mai, Hoang", "Gender": "Male"},
+{"Province": "Quebec", "Party": "NDP", "Age": 39, "Name": "Boulerice, Alexandre", "Gender": "Male"},
+{"Province": "Quebec", "Party": "Bloc Quebecois", "Age": 39, "Name": "Fortin, Jean-François", "Gender": "Male"},
+{"Province": "Territories", "Party": "Conservative", "Age": 38, "Name": "Leef, Ryan", "Gender": "Male"},
+{"Province": "Quebec", "Party": "Conservative", "Age": 38, "Name": "Paradis, Christian", "Gender": "Male"},
+{"Province": "Quebec", "Party": "NDP", "Age": 38, "Name": "Choquette, François", "Gender": "Male"},
+{"Province": "New Brunswick", "Party": "Conservative", "Age": 38, "Name": "Moore, Rob", "Gender": "Male"},
+{"Province": "Saskatchewan", "Party": "Conservative", "Age": 38, "Name": "Trost, Brad", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 38, "Name": "Gill, Parm", "Gender": "Male"},
+{"Province": "Alberta", "Party": "Conservative", "Age": 38, "Name": "Hillyer, Jim", "Gender": "Male"},
+{"Province": "Alberta", "Party": "Conservative", "Age": 38, "Name": "Richards, Blake", "Gender": "Male"},
+{"Province": "Alberta", "Party": "Conservative", "Age": 38, "Name": "Uppal, Tim", "Gender": "Male"},
+{"Province": "Newfoundland and Labrador", "Party": "Liberal", "Age": 37, "Name": "Andrews, Scott", "Gender": "Male"},
+{"Province": "British Columbia", "Party": "Conservative", "Age": 36, "Name": "Moore, James", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 36, "Name": "Lobb, Ben", "Gender": "Male"},
+{"Province": "British Columbia", "Party": "Conservative", "Age": 36, "Name": "Albas, Dan", "Gender": "Male"},
+{"Province": "Alberta", "Party": "Conservative", "Age": 34, "Name": "Storseth, Brian", "Gender": "Male"},
+{"Province": "British Columbia", "Party": "Conservative", "Age": 34, "Name": "Strahl, Mark", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 34, "Name": "Brown, Patrick W.", "Gender": "Male"},
+{"Province": "Alberta", "Party": "Conservative", "Age": 34, "Name": "Warkentin, Chris", "Gender": "Male"},
+{"Province": "Saskatchewan", "Party": "Conservative", "Age": 33, "Name": "Scheer, Andrew", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": 33, "Name": "Poilievre, Pierre", "Gender": "Male"},
+{"Province": "Quebec", "Party": "NDP", "Age": 33, "Name": "Genest-Jourdain, Jonathan", "Gender": "Male"},
+{"Province": "Ontario", "Party": "NDP", "Age": 33, "Name": "Harris, Dan", "Gender": "Male"},
+{"Province": "Quebec", "Party": "NDP", "Age": 28, "Name": "Tremblay, Jonathan", "Gender": "Male"},
+{"Province": "Quebec", "Party": "NDP", "Age": 27, "Name": "Morin, Dany", "Gender": "Male"},
+{"Province": "Quebec", "Party": "NDP", "Age": 24, "Name": "Dubé, Matthew", "Gender": "Male"},
+{"Province": "Quebec", "Party": "NDP", "Age": 21, "Name": "Dusseault, Pierre-Luc", "Gender": "Male"},
+{"Province": "Ontario", "Party": "Conservative", "Age": "", "Name": "O'Toole, Erin", "Gender": "Male"} ]

src/views/pivottable/simple-ui.vue

@@ -0,0 +1,27 @@
+<template>
+  <div id="output1"></div>
+</template>
+
+<script>
+import $ from "jquery";
+export default {
+  created() {
+    // console.log($("#output").pivotUI());
+    $(() => {
+      $("#output1").pivotUI(
+        [
+          { color: "blue", shape: "circle" },
+          { color: "red", shape: "triangle" },
+        ],
+        {
+          rows: ["color"],
+          cols: ["shape"],
+        }
+      );
+    });
+  },
+};
+</script>
+
+<style>
+</style>