新数据大屏开发

src/common/echart/index.vue

@@ -4,9 +4,11 @@
 
 <script>
 import tdTheme from './theme.json' // 引入默认主题
+import themeCopy from './themeCopy.json' // 引入默认主题
 import '../map/fujian.js'
 
 export default {
+  
   name: 'echart',
   props: {
     className: {
@@ -45,6 +47,17 @@ export default {
     }
   },
   mounted () {
+    console.log(this.$route.name == "newDatavScr")
+
+    //由于现在开发新的数据大屏、主题冲突了，暂时判断一下路由来源、作为主题切换
+    if(this.$route.name == "newDatavScr"){
+      this.$echarts.registerTheme('tdTheme', themeCopy); // 修改默认主题
+
+      this.initChart();
+      return;
+    }
+
+
     this.$echarts.registerTheme('tdTheme', tdTheme); // 覆盖默认主题
     this.initChart();
   },

src/common/echart/themeCopy.json

@@ -0,0 +1,490 @@
+{
+  "color": [
+    "#2d8cf0",
+    "#19be6b",
+    "#ff9900",
+    "#E46CBB",
+    "#9A66E4",
+    "#ed3f14"
+  ],
+  "backgroundColor": "rgba(0,0,0,0)",
+  "textStyle": {},
+  "title": {
+    "textStyle": {
+      "color": "#516b91"
+    },
+    "subtextStyle": {
+      "color": "#93b7e3"
+    }
+  },
+  "line": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": "2"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": "2"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "radar": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": "2"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": "2"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "bar": {
+    "itemStyle": {
+      "normal": {
+        "barBorderWidth": 0,
+        "barBorderColor": "#ccc"
+      },
+      "emphasis": {
+        "barBorderWidth": 0,
+        "barBorderColor": "#ccc"
+      }
+    }
+  },
+  "pie": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "scatter": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "boxplot": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "parallel": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "sankey": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "funnel": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "gauge": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "candlestick": {
+    "itemStyle": {
+      "normal": {
+        "color": "#edafda",
+        "color0": "transparent",
+        "borderColor": "#d680bc",
+        "borderColor0": "#8fd3e8",
+        "borderWidth": "2"
+      }
+    }
+  },
+  "graph": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": 1,
+        "color": "#aaa"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true,
+    "color": [
+      "#2d8cf0",
+      "#19be6b",
+      "#f5ae4a",
+      "#9189d5",
+      "#56cae2",
+      "#cbb0e3"
+    ],
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      }
+    }
+  },
+  "map": {
+    "itemStyle": {
+      "normal": {
+        "areaColor": "#f3f3f3",
+        "borderColor": "#516b91",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "areaColor": "rgba(165,231,240,1)",
+        "borderColor": "#516b91",
+        "borderWidth": 1
+      }
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#000"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "rgb(81,107,145)"
+        }
+      }
+    }
+  },
+  "geo": {
+    "itemStyle": {
+      "normal": {
+        "areaColor": "#f3f3f3",
+        "borderColor": "#516b91",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "areaColor": "rgba(165,231,240,1)",
+        "borderColor": "#516b91",
+        "borderWidth": 1
+      }
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#000"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "rgb(81,107,145)"
+        }
+      }
+    }
+  },
+  "categoryAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#000"
+      }
+    },
+    "splitLine": {
+      "show": false,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "valueAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#000"
+      }
+    },
+    "splitLine": {
+      "show": false,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "logAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#999999"
+      }
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "timeAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#999999"
+      }
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "toolbox": {
+    "iconStyle": {
+      "normal": {
+        "borderColor": "#999"
+      },
+      "emphasis": {
+        "borderColor": "#666"
+      }
+    }
+  },
+  "legend": {
+    "textStyle": {
+      "color": "#000"
+    }
+  },
+  "tooltip": {
+    "axisPointer": {
+      "lineStyle": {
+        "color": "#ccc",
+        "width": 1
+      },
+      "crossStyle": {
+        "color": "#ccc",
+        "width": 1
+      }
+    }
+  },
+  "timeline": {
+    "lineStyle": {
+      "color": "#8fd3e8",
+      "width": 1
+    },
+    "itemStyle": {
+      "normal": {
+        "color": "#8fd3e8",
+        "borderWidth": 1
+      },
+      "emphasis": {
+        "color": "#8fd3e8"
+      }
+    },
+    "controlStyle": {
+      "normal": {
+        "color": "#8fd3e8",
+        "borderColor": "#8fd3e8",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "color": "#8fd3e8",
+        "borderColor": "#8fd3e8",
+        "borderWidth": 0.5
+      }
+    },
+    "checkpointStyle": {
+      "color": "#8fd3e8",
+      "borderColor": "rgba(138,124,168,0.37)"
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#8fd3e8"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "#8fd3e8"
+        }
+      }
+    }
+  },
+  "visualMap": {
+    "color": [
+      "#516b91",
+      "#59c4e6",
+      "#a5e7f0"
+    ]
+  },
+  "dataZoom": {
+    "backgroundColor": "rgba(0,0,0,0)",
+    "dataBackgroundColor": "rgba(255,255,255,0.3)",
+    "fillerColor": "rgba(167,183,204,0.4)",
+    "handleColor": "#a7b7cc",
+    "handleSize": "100%",
+    "textStyle": {
+      "color": "#333"
+    }
+  },
+  "markPoint": {
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      }
+    }
+  }
+}

src/components/echart/bottom/bottomLeftChart/chart.vue

@@ -81,6 +81,7 @@ export default {
           },
         ],
       },
+     
       flag: false,
     };
   },

src/views/bigScreen/datavScr/index.vue

@@ -23,6 +23,7 @@
                   class="dv-dec-8"
                   :reverse="true"
                   :color="decorationColor"
+                  
                 />
               </div>
               <dv-decoration-10 class="dv-dec-10-s" />

src/views/test/components/bottomCenter.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="txtSize">
+    <div class="title">
+      <span style="margin-bottom:20px;">竞价情况</span>
+      <!-- <span style="width"></span> -->
+      <div style="display: flex">
+        <span style="width: 110px">
+          <el-select v-model="region" size="mini">
+            <el-option label="不限部门" value="1"></el-option>
+            <el-option label="网络部" value="2"></el-option>
+          </el-select>
+        </span>
+        <span style="width: 70px">
+          <el-select v-model="region1" size="mini">
+            <el-option label="日" value="1"></el-option>
+            <el-option label="月" value="2"></el-option>
+            <el-option label="年" value="3"></el-option>
+          </el-select>
+        </span>
+        <span style="width: 120px">
+          <el-select v-model="region2" size="mini">
+            <el-option label="2022/07/01" value="1"></el-option>
+          </el-select>
+        </span>
+      </div>
+    </div>
+
+    <!-- <div id="bottomCenter" style="width: auto; height: 300px"></div> -->
+
+    <!-- <div id="bottomCenterCon" style="width: auto; height: 300px; top:-80px"></div> -->
+    <!-- <bottomCenterCon></bottomCenterCon> -->
+
+    <Echart
+      :options="options"
+      id="bottomCenter"
+      height="300px"
+      width="100%"
+    ></Echart>
+  
+    <Echart
+      :options="optionsPie"
+      id="bottomCenterCon"
+      height="300px"
+      width="100%"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from "@/common/echart";
+
+
+export default {
+  components: {
+    Echart,
+  },
+  props: {
+    cdata: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      region: "1",
+      region1: "1",
+      region2: "1",
+      options: {
+        // title: {
+        //   text: "Funnel",
+        // },
+        tooltip: {
+          trigger: "item",
+          formatter: "{b} : {c}",
+        },
+        legend: {
+          data: ["竞价单数", "已反馈单数", "生成订单"],
+        },
+        series: [
+          {
+            name: "Funnel",
+            type: "funnel",
+            left: "10%",
+            top: 60,
+            bottom: 60,
+            width: "80%",
+            min: 0,
+            max: 100,
+            minSize: "30%",
+            maxSize: "100%",
+            sort: "descending",
+            gap: 2,
+            label: {
+              show: true,
+              position: "inside",
+              formatter:"{b} : {c}"
+            },
+            labelLine: {
+              length: 10,
+              lineStyle: {
+                width: 1,
+                type: "solid",
+              },
+            },
+            itemStyle: {
+              borderColor: "#fff",
+              borderWidth: 1,
+            },
+            // emphasis: {
+            //   label: {
+            //     fontSize: 20,
+            //   },
+            // },
+            data: [
+              { value: 60, name: "生成订单" },
+              { value: 80, name: "已反馈单数" },
+              { value: 100, name: "竞价单数" },
+            ],
+          },
+        ],
+      },
+
+
+      optionsPie: {
+  tooltip: {
+    trigger: 'item'
+  },
+  legend: {
+    // top: '50%',
+    bottom: '1%'
+  },
+   title: {
+          text: "空反：\n总单数\n11",
+          fontWeight:"normal",
+          fontSize:14,
+          lineHeight: 26,
+          left:'40%',
+          top:"40%",
+        },
+  series: [
+    {
+      name: '空反',
+      type: 'pie',
+      radius: ['40%', '70%'],
+      avoidLabelOverlap: false,
+      label: {
+        show: true,
+        position: 'inner',
+        formatter:"{c}"
+      },
+   
+      labelLine: {
+        show: false
+      },
+      data: [
+        { value: 1048, name: '进行中' },
+        { value: 735, name: '已结束' },
+      ]
+    }
+  ]
+}
+    };
+  },
+  mounted() {
+    // this.cinit();
+  },
+  methods: {
+    cinit() {
+      this.$echarts
+        .init(document.getElementById("bottomCenter"))
+        .setOption(this.options);
+
+    
+        this.$echarts
+        .init(document.getElementById("bottomCenterCon"))
+        .setOption(this.optionsPie);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.txtSize {
+  // font-size: 0px;
+  position: relative;
+  top: -270px;
+}
+.title {
+  font-size: 18px;
+  margin: 20px 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+}
+#bottomCenterCon{
+  position: relative;
+  top:0px;
+}
+</style>

src/views/test/components/bottomLeft.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="txtSize">
+    <div class="title">
+      <span>销售转单时长</span>
+      <!-- <span style="width"></span> -->
+      <div style="display: flex">
+        <span style="width: 110px">
+          <el-select v-model="region" size="mini">
+            <el-option label="不限部门" value="1"></el-option>
+            <el-option label="网络部" value="2"></el-option>
+          </el-select>
+        </span>
+        <span style="width: 70px">
+          <el-select v-model="region1" size="mini">
+            <el-option label="日" value="1"></el-option>
+            <el-option label="月" value="2"></el-option>
+            <el-option label="年" value="3"></el-option>
+          </el-select>
+        </span>
+        <span style="width: 120px">
+          <el-select v-model="region2" size="mini">
+            <el-option label="2022/07/01" value="1"></el-option>
+          </el-select>
+        </span>
+      </div>
+    </div>
+    <div class="dv">
+      <p style="font-size: 12px">平均时长（分钟）</p>
+      <dv-decoration-9>10</dv-decoration-9>
+    </div>
+    <!-- <div id="bottomLeft" style="width: auto; height: 400px"></div> -->
+    <Echart
+      :options="options"
+      id="bottomLeft"
+      height="400px"
+      width="100%"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from "@/common/echart";
+
+export default {
+  components: {
+    Echart,
+  },
+  props: {
+    cdata: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      region: "1",
+      region1: "1",
+      region2: "1",
+      options: {
+        label: {
+          show: true,
+          position: "inside",
+        },
+        xAxis: {
+          type: "category",
+          data: ["1小时以内", "1-2小时", "2-4小时", "4-24小时", "24小时以上"],
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            data: [200, 172, 150, 80, 70],
+            type: "bar",
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    // this.cinit();
+  },
+  methods: {
+    cinit() {
+      this.$echarts
+        .init(document.getElementById("bottomLeft"))
+        .setOption(this.options);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.txtSize {
+  // font-size: 0px;
+  position: relative;
+}
+.title {
+  font-size: 18px;
+  margin: 20px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+#topCenter {
+  width: 100%;
+  height: 350px;
+}
+.dv {
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  right: -86px;
+  z-index: 99;
+}
+.dv > p {
+  text-align: center;
+  padding-bottom: 5px;
+}
+</style>

src/views/test/components/bottomRight.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="txtSize">
+    <div class="title">
+      <span>采购返单时长</span>
+      <!-- <span style="width"></span> -->
+      <div style="display: flex">
+        <span style="width: 110px">
+          <el-select v-model="region" size="mini">
+            <el-option label="不限部门" value="1"></el-option>
+            <el-option label="网络部" value="2"></el-option>
+          </el-select>
+        </span>
+        <span style="width: 70px">
+          <el-select v-model="region1" size="mini">
+            <el-option label="日" value="1"></el-option>
+            <el-option label="月" value="2"></el-option>
+            <el-option label="年" value="3"></el-option>
+          </el-select>
+        </span>
+        <span style="width: 120px">
+          <el-select v-model="region2" size="mini">
+            <el-option label="2022/07/01" value="1"></el-option>
+          </el-select>
+        </span>
+      </div>
+    </div>
+    <div class="dv">
+      <p style="font-size: 12px">平均时长（分钟）</p>
+      <dv-decoration-9>10</dv-decoration-9>
+    </div>
+    <!-- <div id="bottomRight" style="width: auto; height: 400px"></div> -->
+    <Echart
+      :options="options"
+      id="bottomRight"
+      height="400px"
+      width="100%"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from "@/common/echart";
+
+export default {
+  components: {
+    Echart,
+  },
+  props: {
+    cdata: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      region: "1",
+      region1: "1",
+      region2: "1",
+      options: {
+        label: {
+        show: true,
+        position: 'inside'
+      },
+  legend: {},
+  tooltip: {},
+  dataset: {
+    source: [
+      ['product', '返单商品数', '中标商品数'],
+      ['1小时以内', 43.3, 85.8],
+      ['1-2小时', 83.1, 73.4],
+      ['2-4小时', 86.4, 65.2],
+      ['4-24小时', 72.4, 53.9],
+      ['24小时以上', 72.4, 53.9]
+    ]
+  },
+  xAxis: { type: 'category' },
+  yAxis: {},
+  // Declare several bar series, each will be mapped
+  // to a column of dataset.source by default.
+  series: [{ type: 'bar' }, { type: 'bar' }]
+},
+    };
+  },
+  mounted() {
+    // this.cinit();
+  },
+  methods: {
+    cinit() {
+      this.$echarts
+        .init(document.getElementById("bottomRight"))
+        .setOption(this.options);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.txtSize {
+  // font-size: 0px;
+  position: relative;
+}
+.title {
+  font-size: 18px;
+  margin: 20px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dv{
+     width: 100px;
+     height: 100px;
+     position: absolute;
+     z-index: 99;
+     left: -86px;
+   }
+   .dv>p{
+     text-align: center;
+     padding-bottom: 5px;
+   }
+</style>

src/views/test/components/centerCon.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="txtSize">
+    <div class="title">
+      <span>今年目标</span>
+      <!-- <span style="width"></span> -->
+      <span style="width: 110px">
+          50000万元
+        </span>
+    </div>
+
+        <dv-water-level-pond :config="config" style="width:300px;height:300px;margin:40px auto 10px" />
+        <div class="dv">
+      
+          <dv-decoration-9></dv-decoration-9>
+        </div>
+
+    <!-- <Echart
+      :options="options"
+      id="topCenterChart"
+      height="450px"
+      width="100%"
+    ></Echart> -->
+  </div>
+</template>
+
+<script>
+import Echart from "@/common/echart";
+
+export default {
+  components: {
+    Echart,
+  },
+  props: {
+    cdata: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      config:{}
+    };
+  },
+  mounted() {
+    this.$nextTick(()=>{
+
+        this.cinit();
+    })
+  },
+  methods: {
+    cinit() {
+      this.config = {
+        //要水位的话、这个值不能动
+        data: [50],
+        shape: 'round',
+        //通过这个值去改你要改的
+        formatter:"500w"
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.txtSize {
+  // font-size: 0px;
+  position: relative;
+  top: -255px;
+}
+.title {
+  font-size: 18px;
+  padding: 0 70px;
+  margin: 20px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+
+
+</style>

src/views/test/components/centerLeft.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="txtSize">
+    <div class="title">
+      <span>销售转单数</span>
+      <!-- <span style="width"></span> -->
+      <div style="display: flex">
+        <span style="width: 110px">
+          <el-select v-model="region" size="mini">
+            <el-option label="不限部门" value="1"></el-option>
+            <el-option label="网络部" value="2"></el-option>
+          </el-select>
+        </span>
+        <span style="width: 70px">
+          <el-select v-model="region1" size="mini">
+            <el-option label="日" value="1"></el-option>
+            <el-option label="月" value="2"></el-option>
+            <el-option label="年" value="3"></el-option>
+          </el-select>
+        </span>
+        <span style="width: 120px">
+          <el-select v-model="region2" size="mini">
+            <el-option label="2022/07/01" value="1"></el-option>
+          </el-select>
+        </span>
+      </div>
+    </div>
+    <!-- <div id="centerLeft" style="width: auto; height: 400px"></div> -->
+    <Echart
+      :options="options"
+      id="centerLeft"
+      height="300px"
+      width="100%"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from "@/common/echart";
+
+export default {
+  components: {
+    Echart,
+  },
+  props: {
+    cdata: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      region: "1",
+      region1: "1",
+      region2: "1",
+      options: {
+        label: {
+          show: true,
+          position: "inner",
+          formatter: function (params) {
+            return params.value + "%";
+          },
+        },
+        title: {
+          text: "总单数/中标单数/转单率",
+          left: "center",
+        },
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          orient: "vertical",
+          left: "left",
+        },
+        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)",
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    // this.cinit();
+  },
+  methods: {
+    cinit() {
+      this.$echarts
+        .init(document.getElementById("centerLeft"))
+        .setOption(this.options);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.txtSize {
+  // font-size: 0px;
+}
+.title {
+  font-size: 18px;
+  margin: 20px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+</style>

src/views/test/components/centerRight.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="txtSize">
+    <div class="title">
+      <span>采购返单数</span>
+      <!-- <span style="width"></span> -->
+      <div style="display: flex">
+
+        <span style="width: 70px">
+          <el-select v-model="region1" size="mini">
+            <el-option label="日" value="1"></el-option>
+            <el-option label="月" value="2"></el-option>
+            <el-option label="年" value="3"></el-option>
+          </el-select>
+        </span>
+        <span style="width: 120px">
+          <el-select v-model="region2" size="mini">
+            <el-option label="2022/07/01" value="1"></el-option>
+          </el-select>
+        </span>
+      </div>
+    </div>
+    <!-- <div id="centerRight" style="width: auto; height: 400px"></div> -->
+    <Echart
+      :options="options"
+      id="centerRight"
+      height="300px"
+      width="100%"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from "@/common/echart";
+
+export default {
+  components: {
+    Echart,
+  },
+  props: {
+    cdata: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      region: "1",
+      region1: "1",
+      region2: "1",
+      options: {
+        label: {
+          show: true,
+          position: "inner",
+          formatter: function (params) {
+            return params.value + "%";
+          },
+        },
+        title: {
+          text: "总单数/中标单数/转单率/参与度",
+          subtext: '参与度:(参与竞价单总数-参与竞价单最高商品成本记录)/竞价总数',
+          left: "center",
+        },
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          orient: "vertical",
+          left: "left",
+        },
+        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)",
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    // this.cinit();
+  },
+  methods: {
+    cinit() {
+      this.$echarts
+        .init(document.getElementById("centerRight"))
+        .setOption(this.options);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.txtSize {
+  // font-size: 0px;
+}
+.title {
+  font-size: 18px;
+  margin: 20px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+</style>

src/views/test/components/topCenter.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="txtSize">
+    <div class="title">
+      <span>部门业绩</span>
+      <span style="width: 80px" class="mouth">
+        <el-select v-model="region" size="mini">
+          <el-option label="本月" value="1"></el-option>
+          <el-option label="本年" value="2"></el-option>
+        </el-select>
+      </span>
+    </div>
+    <!-- <div id="topCenter" style="width: auto; height: 400px"></div> -->
+    <Echart
+      :options="options"
+      id="topCenter"
+      height="350px"
+      width="100%"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from "@/common/echart";
+
+export default {
+  components: {
+    Echart,
+  },
+  data() {
+    return {
+      
+      region: "1",
+      options: {
+        label: {
+          show: true,
+          position: "inside",
+          formatter: function (params) {
+            return params.value + "%";
+          },
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        xAxis: {
+          // splitLine: {
+          //   show: true,
+          // },
+          data: ["网络部", "客服部", "项目部", "平台部"],
+
+          type: "category",
+        },
+
+        yAxis: {
+            // splitLine: {
+            //   show: false,
+            // },
+          type: "value",
+        },
+
+        series: [
+          {
+            name: "可用",
+
+            type: "bar",
+
+            stack: "使用情况",
+
+            data: [5, 20, 36, 10],
+
+            itemStyle: {
+              normal: { color: "#FF8849" },
+            },
+
+            barWidth: 30, //柱图宽度
+          },
+          {
+            name: "不可用",
+
+            type: "bar",
+
+            stack: "使用情况",
+
+            data: [90, 22, 18, 35],
+
+            itemStyle: {
+              normal: { color: "#3FBB49" },
+            },
+
+            barWidth: 30, //柱图宽度
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    // this.cinit();
+  },
+  methods: {
+    cinit() {
+      this.$echarts.init(document.getElementById("topCenter")).setOption(
+        this.options
+       );
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.txtSize {
+  // font-size: 0px;
+  
+}
+.title {
+  font-size: 18px;
+  margin: 20px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+#topCenter {
+  width: 100%;
+  height: 350px;
+  top: -40px;
+  // z-index: 0;
+}
+.mouth{
+  position: relative;
+  z-index: 90;
+}
+</style>

src/views/test/components/topLeft.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="txtSize">
+    <div class="title">
+      <span>今日销售</span>
+    </div>
+    <ul class="xs">
+        <li>
+            <p>9999999999</p>
+            <p>销售金额</p>
+        </li>
+        <li>
+            <p>9999999999</p>
+            <p>订单数</p>
+        </li>
+        <li>
+            <p>9999999999</p>
+            <p>商品数</p>
+        </li>
+
+    </ul>
+    <div class="title">
+      <span>今日采购</span>
+    </div>
+     <ul class="cg">
+        <li>
+            <p>9999999999</p>
+            <p>竞价中标数</p>
+        </li>
+        <li>
+            <p>9999999999</p>
+            <p>反馈商品数</p>
+        </li>
+        <li>
+            <p>9999999999</p>
+            <p>订单数</p>
+        </li>
+        <li>
+            <p>9999999999</p>
+            <p>商品数</p>
+        </li>
+
+    </ul>
+
+    <div class="title">
+      <span>今日结算</span>
+    </div>
+    <el-table
+        :header-cell-style="{background:'#F5F7FA'}"
+      :data="tableData"
+      style="width: 100%">
+      <el-table-column
+        prop="name"
+        label="待处理"
+        min-width="100">
+      </el-table-column>
+      <el-table-column
+        prop="date"
+        label="单数（单）"
+        min-width="100">
+      </el-table-column>
+      <el-table-column
+        prop="address"
+        label="金额（元）"
+        min-width="100">
+      </el-table-column>
+    </el-table>
+
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+         tableData: [{
+            date: '222222',
+            name: '待开票',
+            address: '567890'
+          }, {
+            date: '3333333',
+            name: '待回款',
+            address: '45678'
+          }, {
+            date: '44444',
+            name: '待回票',
+            address: '456789'
+          }, {
+            date: '55555',
+            name: '待付款',
+            address: '4567890'
+          }]
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.txtSize{
+    // font-size: 0px;
+}
+.title {
+    font-size: 18px;
+  margin: 35px 0;
+}
+.title:first-child{
+  margin: 20px 0 35px;
+}
+.xs{
+    display: flex;
+    justify-content: space-between;
+    
+    li{
+        padding: 5px;
+        box-sizing: border-box;
+        width: 28%;
+        border: 1px solid #333;
+        p{
+            width: 100%;
+            text-align: center;
+        }
+    }
+    li:first-child{
+        width: 40%;
+    }
+}
+.cg{
+    display: flex;
+    justify-content: space-between;
+    
+    li{
+        padding: 5px;
+        box-sizing: border-box;
+        width: 23%;
+        border: 1px solid #333;
+        p{
+            width: 100%;
+            text-align: center;
+        }
+    }
+}
+</style>

src/views/test/components/topRight1.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="txtSize">
+    <div class="title">
+      <span>今日订单</span>
+    </div>
+    <el-table
+      :header-cell-style="{ background: '#F5F7FA' }"
+      :data="tableData"
+      style="width: 100%"
+    >
+      <el-table-column prop="name" label="部门" min-width="100">
+      </el-table-column>
+      <el-table-column prop="date" label="订单单数" min-width="100">
+      </el-table-column>
+      <el-table-column prop="test" label="退货金额" min-width="100">
+      </el-table-column>
+      <el-table-column prop="address" label="订单金额" min-width="100">
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        {
+          date: "222222",
+          name: "待开票",
+          test:"111111",
+          address: "567890",
+        },
+        {
+          date: "3333333",
+          name: "待回款",
+          test:"111111",
+          address: "45678",
+        },
+        {
+          date: "44444",
+          name: "待回票",
+          test:"111111",
+          address: "456789",
+        },
+        {
+          date: "55555",
+          name: "待付款",
+          test:"111111",
+          address: "4567890,",
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.txtSize {
+  // font-size: 0px;
+}
+.title {
+  margin: 20px 0;
+}
+</style>

src/views/test/components/topRight2.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="txtSize">
+    <div class="title">
+      <span>今日销冠</span>
+    </div>
+    <el-table
+      :header-cell-style="{ background: '#F5F7FA' }"
+      :data="tableData"
+      style="width: 100%"
+    >
+      <el-table-column prop="name" label="人员/部门" min-width="100">
+      </el-table-column>
+      <el-table-column prop="date" label="订单单数" min-width="100">
+      </el-table-column>
+      <el-table-column prop="test" label="退货金额" min-width="100">
+      </el-table-column>
+      <el-table-column prop="address" label="订单金额" min-width="100">
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        {
+          date: "222222",
+          name: "待开票",
+          test:"111111",
+          address: "567890",
+        },
+        {
+          date: "3333333",
+          name: "待回款",
+          test:"111111",
+          address: "45678",
+        },
+        {
+          date: "44444",
+          name: "待回票",
+          test:"111111",
+          address: "456789",
+        },
+        {
+          date: "55555",
+          name: "待付款",
+          test:"111111",
+          address: "4567890,",
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.txtSize {
+  // font-size: 0px;
+}
+.title {
+  margin: 20px 0;
+}
+</style>

src/views/test/index.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="datavScr box">
+    <div
+      v-if="powers && powers.length > 0 && powers.some((item) => item == '001')"
+    >
+      <div class="dataBox">
+        <div class="top">
+          <div style="width: 35%">
+            <topLeft></topLeft>
+          </div>
+          <div style="width: 20%">
+            <topCenter></topCenter>
+          </div>
+          <div
+            style="width: 35%; "
+          >
+            <div style="width: 100%">
+              <topRight1></topRight1>
+            </div>
+            <div style="width: 100%">
+              <topRight2></topRight2>
+            </div>
+          </div>
+        </div>
+
+        <div class="center">
+          <div style="width: 30%">
+            <centerLeft></centerLeft>
+          </div>
+          <div style="width: 30%">
+            <centerCon></centerCon>
+          </div>
+          <div style="width: 30%">
+            <centerRight></centerRight>
+          </div>
+        </div>
+
+        <div class="bottom">
+          <div style="width: 35%">
+            <bottomLeft></bottomLeft>
+          </div>
+          <div style="width: 20%">
+            <bottomCenter></bottomCenter>
+          </div>
+          <div style="width: 35%">
+            <bottomRight></bottomRight>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-else>
+      <no-auth></no-auth>
+    </div>
+  </div>
+</template>
+
+<script>
+// import drawMixin from "../drawMixin";
+import { mapGetters } from "vuex";
+import resToken from "@/mixins/resToken";
+import topLeft from "./components/topLeft";
+import topCenter from "./components/topCenter";
+import topRight1 from "./components/topRight1";
+import topRight2 from "./components/topRight2";
+import centerLeft from "./components/centerLeft";
+import centerCon from "./components/centerCon";
+import centerRight from "./components/centerRight";
+import bottomLeft from "./components/bottomLeft";
+import bottomCenter from "./components/bottomCenter";
+import bottomRight from "./components/bottomRight";
+
+export default {
+  mixins: [resToken],
+  computed: {
+    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
+    powers() {
+      let tran =
+        this.$store.getters.btnList.find(
+          (item) => item.menu_route == "newDatavScr"
+        ) || {};
+      if (tran && tran.action && tran.action.length > 0) {
+        return tran.action;
+      } else {
+        return [];
+      }
+    },
+  },
+  data() {
+    return {
+      loading: true,
+    };
+  },
+  components: {
+    topLeft,
+    topCenter,
+    topRight1,
+    topRight2,
+    centerLeft,
+    centerCon,
+    centerRight,
+    bottomLeft,
+    bottomCenter,
+    bottomRight
+  },
+  mounted() {},
+  beforeDestroy() {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.datavScr.box {
+  width: 100%;
+//   height: 100vh;
+    // background: #000;
+  margin: 0;
+  padding: 20px 20px 0;
+}
+.dataBox {
+  width: 100%;
+  height: 100%;
+  min-width: 1300px;
+}
+
+.top {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+.center{
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  margin-top: 30px;
+}
+.bottom{
+width: 100%;
+  display: flex;
+  justify-content: space-between;
+//   margin-top: 30px;
+  max-height: 400px;
+}
+</style>