xs-common-plugins 1.2.3 → 1.2.5

package/src/components/home/LineChart.vue

@@ -1,146 +1,146 @@
-<template>
-  <div :class="[className,'chart-wrapper']" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '350px'
-    },
-    autoResize: {
-      type: Boolean,
-      default: true
-    },
-
-    rootData: Object,
-    rootMeta: Object,
-    curData: {
-      type: Array
-      // required: true
-    },
-    curMeta: Object
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  watch: {
-    curData: {
-      deep: true,
-      handler(val) {
-        console.log(val)
-        this.setOptions({
-          expectedData: [2, 1, 30, 15, 10, 15, 15],
-          actualData: [2, 10, 1, 30, 15, 15, 15]
-        })
-      }
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-      this.setOptions(this.curData)
-    },
-    setOptions({ expectedData, actualData } = {}) {
-      this.chart.setOption({
-        xAxis: {
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-          boundaryGap: false,
-          axisTick: {
-            show: false
-          }
-        },
-        grid: {
-          left: 10,
-          right: 10,
-          bottom: 20,
-          top: 30,
-          containLabel: true
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'cross'
-          },
-          padding: [5, 10]
-        },
-        yAxis: {
-          axisTick: {
-            show: false
-          }
-        },
-        legend: {
-          data: ['expected', 'actual']
-        },
-        series: [
-          {
-            name: 'expected',
-            itemStyle: {
-              normal: {
-                color: '#FF005A',
-                lineStyle: {
-                  color: '#FF005A',
-                  width: 2
-                }
-              }
-            },
-            smooth: true,
-            type: 'line',
-            data: expectedData,
-            animationDuration: 2800,
-            animationEasing: 'cubicInOut'
-          },
-          {
-            name: 'actual',
-            smooth: true,
-            type: 'line',
-            itemStyle: {
-              normal: {
-                color: '#3888fa',
-                lineStyle: {
-                  color: '#3888fa',
-                  width: 2
-                },
-                areaStyle: {
-                  color: '#f3f8ff'
-                }
-              }
-            },
-            data: actualData,
-            animationDuration: 2800,
-            animationEasing: 'quadraticOut'
-          }
-        ]
-      })
-    }
-  }
-}
-</script>
+<template>
+  <div :class="[className,'chart-wrapper']" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '350px'
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+
+    rootData: Object,
+    rootMeta: Object,
+    curData: {
+      type: Array
+      // required: true
+    },
+    curMeta: Object
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    curData: {
+      deep: true,
+      handler(val) {
+        console.log(val)
+        this.setOptions({
+          expectedData: [2, 1, 30, 15, 10, 15, 15],
+          actualData: [2, 10, 1, 30, 15, 15, 15]
+        })
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.setOptions(this.curData)
+    },
+    setOptions({ expectedData, actualData } = {}) {
+      this.chart.setOption({
+        xAxis: {
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          boundaryGap: false,
+          axisTick: {
+            show: false
+          }
+        },
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 20,
+          top: 30,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          },
+          padding: [5, 10]
+        },
+        yAxis: {
+          axisTick: {
+            show: false
+          }
+        },
+        legend: {
+          data: ['expected', 'actual']
+        },
+        series: [
+          {
+            name: 'expected',
+            itemStyle: {
+              normal: {
+                color: '#FF005A',
+                lineStyle: {
+                  color: '#FF005A',
+                  width: 2
+                }
+              }
+            },
+            smooth: true,
+            type: 'line',
+            data: expectedData,
+            animationDuration: 2800,
+            animationEasing: 'cubicInOut'
+          },
+          {
+            name: 'actual',
+            smooth: true,
+            type: 'line',
+            itemStyle: {
+              normal: {
+                color: '#3888fa',
+                lineStyle: {
+                  color: '#3888fa',
+                  width: 2
+                },
+                areaStyle: {
+                  color: '#f3f8ff'
+                }
+              }
+            },
+            data: actualData,
+            animationDuration: 2800,
+            animationEasing: 'quadraticOut'
+          }
+        ]
+      })
+    }
+  }
+}
+</script>

package/src/components/home/Panel.vue

@@ -1,135 +1,135 @@
-<template>
-  <div v-if="typeof(curMeta)!=='undefined'" class="card-panel">
-    <div class="card-panel-icon-wrapper icon-people">
-      <span :class="['icon iconfont card-panel-icon',layoutItem.icon]" />
-    </div>
-    <div v-for="(fld) in curMeta.fields" :key="fld.name" class="card-panel-description">
-      <div class="card-panel-text">{{ fld.title }}</div>
-      {{ curData[0][fld.name] }}
-    </div>
-  </div>
-</template>
-
-<script>
-import CountTo from 'vue-count-to'
-
-export default {
-  components: {
-    CountTo
-  },
-  props: {
-    layoutItem: Object,
-    rootData: Object,
-    rootMeta: Object,
-    curData: Array,
-    curMeta: Object
-  },
-  methods: {
-    handleSetLineChartData(type) {
-      this.$emit('handleSetLineChartData', type)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.card-panel {
-  height: 108px;
-  cursor: pointer;
-  font-size: 12px;
-  position: relative;
-  overflow: hidden;
-  color: #666;
-  background: #fff;
-  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
-  border-color: rgba(0, 0, 0, 0.05);
-
-  &:hover {
-    .card-panel-icon-wrapper {
-      color: #fff;
-    }
-
-    .icon-people {
-      background: #40c9c6;
-    }
-
-    .icon-message {
-      background: #36a3f7;
-    }
-
-    .icon-money {
-      background: #f4516c;
-    }
-
-    .icon-shopping {
-      background: #34bfa3;
-    }
-  }
-
-  .icon-people {
-    color: #40c9c6;
-  }
-
-  .icon-message {
-    color: #36a3f7;
-  }
-
-  .icon-money {
-    color: #f4516c;
-  }
-
-  .icon-shopping {
-    color: #34bfa3;
-  }
-
-  .card-panel-icon-wrapper {
-    float: left;
-    margin: 14px 0 0 14px;
-    padding: 16px;
-    transition: all 0.38s ease-out;
-    border-radius: 6px;
-  }
-
-  .card-panel-icon {
-    float: left;
-    font-size: 48px;
-  }
-
-  .card-panel-description {
-    float: right;
-    font-weight: bold;
-    margin: 26px;
-    margin-left: 0px;
-
-    .card-panel-text {
-      line-height: 18px;
-      color: rgba(0, 0, 0, 0.45);
-      font-size: 16px;
-      margin-bottom: 12px;
-    }
-
-    .card-panel-num {
-      font-size: 20px;
-    }
-  }
-}
-
-@media (max-width: 550px) {
-  .card-panel-description {
-    display: none;
-  }
-
-  .card-panel-icon-wrapper {
-    float: none !important;
-    width: 100%;
-    height: 100%;
-    margin: 0 !important;
-
-    .svg-icon {
-      display: block;
-      margin: 14px auto !important;
-      float: none !important;
-    }
-  }
-}
-</style>
+<template>
+  <div v-if="typeof(curMeta)!=='undefined'" class="card-panel">
+    <div class="card-panel-icon-wrapper icon-people">
+      <span :class="['icon iconfont card-panel-icon',layoutItem.icon]" />
+    </div>
+    <div v-for="(fld) in curMeta.fields" :key="fld.name" class="card-panel-description">
+      <div class="card-panel-text">{{ fld.title }}</div>
+      {{ curData[0][fld.name] }}
+    </div>
+  </div>
+</template>
+
+<script>
+import CountTo from 'vue-count-to'
+
+export default {
+  components: {
+    CountTo
+  },
+  props: {
+    layoutItem: Object,
+    rootData: Object,
+    rootMeta: Object,
+    curData: Array,
+    curMeta: Object
+  },
+  methods: {
+    handleSetLineChartData(type) {
+      this.$emit('handleSetLineChartData', type)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.card-panel {
+  height: 108px;
+  cursor: pointer;
+  font-size: 12px;
+  position: relative;
+  overflow: hidden;
+  color: #666;
+  background: #fff;
+  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
+  border-color: rgba(0, 0, 0, 0.05);
+
+  &:hover {
+    .card-panel-icon-wrapper {
+      color: #fff;
+    }
+
+    .icon-people {
+      background: #40c9c6;
+    }
+
+    .icon-message {
+      background: #36a3f7;
+    }
+
+    .icon-money {
+      background: #f4516c;
+    }
+
+    .icon-shopping {
+      background: #34bfa3;
+    }
+  }
+
+  .icon-people {
+    color: #40c9c6;
+  }
+
+  .icon-message {
+    color: #36a3f7;
+  }
+
+  .icon-money {
+    color: #f4516c;
+  }
+
+  .icon-shopping {
+    color: #34bfa3;
+  }
+
+  .card-panel-icon-wrapper {
+    float: left;
+    margin: 14px 0 0 14px;
+    padding: 16px;
+    transition: all 0.38s ease-out;
+    border-radius: 6px;
+  }
+
+  .card-panel-icon {
+    float: left;
+    font-size: 48px;
+  }
+
+  .card-panel-description {
+    float: right;
+    font-weight: bold;
+    margin: 26px;
+    margin-left: 0px;
+
+    .card-panel-text {
+      line-height: 18px;
+      color: rgba(0, 0, 0, 0.45);
+      font-size: 16px;
+      margin-bottom: 12px;
+    }
+
+    .card-panel-num {
+      font-size: 20px;
+    }
+  }
+}
+
+@media (max-width: 550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+</style>