前端

package.json

@@ -18,6 +18,7 @@
     "@tinymce/tinymce-vue": "^5.0.0",
     "axios": "0.18.1",
     "core-js": "^3.6.5",
+    "echarts": "^5.3.3",
     "element-china-area-data": "^5.0.2",
     "element-ui": "2.13.2",
     "js-cookie": "2.2.0",

public/iconfont/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

public/iconfont/demo_index.html

@@ -0,0 +1,234 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
+      
+    </a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3551913" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xebcc;</span>
+                <div class="name">眼睛_显示_o</div>
+                <div class="code-name">&amp;#xebcc;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xebcd;</span>
+                <div class="name">眼睛_隐藏_o</div>
+                <div class="code-name">&amp;#xebcd;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1658971893311') format('woff2'),
+       url('iconfont.woff?t=1658971893311') format('woff'),
+       url('iconfont.ttf?t=1658971893311') format('truetype');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yanjing_xianshi_o"></span>
+            <div class="name">
+              眼睛_显示_o
+            </div>
+            <div class="code-name">.icon-yanjing_xianshi_o
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yanjing_yincang_o"></span>
+            <div class="name">
+              眼睛_隐藏_o
+            </div>
+            <div class="code-name">.icon-yanjing_yincang_o
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yanjing_xianshi_o"></use>
+                </svg>
+                <div class="name">眼睛_显示_o</div>
+                <div class="code-name">#icon-yanjing_xianshi_o</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yanjing_yincang_o"></use>
+                </svg>
+                <div class="name">眼睛_隐藏_o</div>
+                <div class="code-name">#icon-yanjing_yincang_o</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

public/iconfont/iconfont.css

@@ -0,0 +1,23 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 3551913 */
+  src: url('iconfont.woff2?t=1658971893311') format('woff2'),
+       url('iconfont.woff?t=1658971893311') format('woff'),
+       url('iconfont.ttf?t=1658971893311') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-yanjing_xianshi_o:before {
+  content: "\ebcc";
+}
+
+.icon-yanjing_yincang_o:before {
+  content: "\ebcd";
+}
+

public/iconfont/iconfont.json

@@ -0,0 +1,23 @@
+{
+  "id": "3551913",
+  "name": "畅运通",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "5388069",
+      "name": "眼睛_显示_o",
+      "font_class": "yanjing_xianshi_o",
+      "unicode": "ebcc",
+      "unicode_decimal": 60364
+    },
+    {
+      "icon_id": "5388071",
+      "name": "眼睛_隐藏_o",
+      "font_class": "yanjing_yincang_o",
+      "unicode": "ebcd",
+      "unicode_decimal": 60365
+    }
+  ]
+}

src/api/settlementManagement.js

@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+// 货主提现列表
+export function getListwithdrawal(data) {
+  return request({
+    url: '/hyCargoOwnerCapitalInfo/selectWithdrawal',
+    method: 'get',
+     params: data,
+  })
+}
+// 货主提现批量审核
+export function batchAduit(data) {
+  return request({
+    url: '/hyCargoOwnerCapitalInfo/api/examineList',
+    method: 'post',
+     data: data,
+  })
+}

src/layout/components/Sidebar/SidebarItem.vue

@@ -66,7 +66,7 @@ export default {
     flushCom:function(){
 　　　　　　this.$router.go(0);  
 　　　},
-    hasOneShowingChild(children = [], parent) {debugger
+    hasOneShowingChild(children = [], parent) {
       const showingChildren = children.filter(item => {
         if (item.hidden) {
           return false
@@ -90,7 +90,7 @@ export default {
 
       return false
     },
-    resolvePath(routePath) {debugger
+    resolvePath(routePath) {
       if (isExternal(routePath)) {
         return routePath
       }

src/main.js

@@ -11,7 +11,8 @@ import '@/styles/index.scss' // global css
 import App from './App'
 import store from './store'
 import router from './router'
-
+import * as echarts from 'echarts' //引入echarts
+Vue.prototype.$echarts = echarts //注册组件
 import '@/icons' // icon
 import '@/permission' // permission control
 //富文本

src/views/driverManagement/vehicleExamine.vue

@@ -129,13 +129,13 @@
           <!-- <div class="fujian_item" :class="count == 4 ? 'file_btn' : ''" @click="btnChange(4)">
             从业资格证
           </div> -->
-          <div class="fujian_item" :class="count == 5 ? 'file_btn' : ''" @click="btnChange(5)">
+          <div v-if='file.carCategory=="挂车"' class="fujian_item" :class="count == 5 ? 'file_btn' : ''" @click="btnChange(5)">
             挂车行驶证
           </div>
           <div class="fujian_item" :class="count == 6 ? 'file_btn' : ''" @click="btnChange(6)">
             道路运输证
           </div>
-          <div class="fujian_item" :class="count == 7 ? 'file_btn' : ''" @click="btnChange(7)">
+          <div v-if='file.carCategory=="挂车"' class="fujian_item" :class="count == 7 ? 'file_btn' : ''" @click="btnChange(7)">
             挂车道路运输证
           </div>
           <div class="fujian_item" :class="count == 8 ? 'file_btn' : ''" @click="btnChange(8)">

src/views/orderManagement/orderAudit.vue

@@ -146,16 +146,16 @@
                 </el-dropdown-item>
                 <el-dropdown-item>
                   <!-- 运输中的可以付预付款-->
-                  <el-link target="_blank" type="primary" :underline="false" v-if="scope.row.freightAdvance == '垫付'"
-                    :disabled="scope.row.cargoOwnerStatusKey == 13?'true':'false' && scope.row.payabled " @click="preMoneyChange(scope.row)">预付</el-link>
+                  <!-- <el-link target="_blank" type="primary" :underline="false" v-if="scope.row.freightAdvance == '垫付'"
+                    :disabled="scope.row.cargoOwnerStatusKey == 13?'true':'false' && scope.row.payabled " @click="preMoneyChange(scope.row)">预付</el-link> -->
                   <!-- 垫付类型的订单，平台确认装车后从未进行过预付操作（即预付款=0）时显示的按钮。 -->
                 </el-dropdown-item>
                 <!-- 货主订单状态key（1待接单3未装车5待确认装车7已驳回装车信息9待平台确认装车11平台驳回装车信息13运输中15待收货17已驳回卸车信息19待平台确认卸车21平台驳回卸车信息
                  * 23待结算25已结算27待还款29已还款31已完结33已终止） -->
                 <el-dropdown-item>
                   <!-- 垫付  待结算  未付过尾款的 -->
-                  <el-link target="_blank" type="primary" :underline="false" v-if="scope.row.freightAdvance == '垫付'"
-                    :disabled="scope.row.cargoOwnerStatusKey == 23?'false':'true' && scope.row.payabled == scope.row.payable" @click="tailmoneyChange(scope.row)">尾款</el-link>
+                  <!-- <el-link target="_blank" type="primary" :underline="false" v-if="scope.row.freightAdvance == '垫付'"
+                    :disabled="scope.row.cargoOwnerStatusKey == 23?'false':'true' && scope.row.payabled == scope.row.payable" @click="tailmoneyChange(scope.row)">尾款</el-link> -->
                   <!-- 垫付类型的订单，平台确认卸车后从未进行过尾款操作（即尾款=0）时显示的按钮。 -->
                 </el-dropdown-item>
                 <el-dropdown-item>

src/views/settlementManagement/CashOwner.vue

@@ -1,56 +1,554 @@
 <template>
-	<div class="center">
-    <div class="title">
-      {{form.title}}
+  <div class="center">
+    <div class="center_css">
+      <div class="top_css">
+        <el-row>
+          <el-col :span="14">
+          <el-button type="primary" @click="batchaduit">批量审核</el-button>
+          <el-date-picker class='date' v-model="value1" value-format="yyyy-MM-dd" @change="dateChange" type="daterange"
+              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
+          </el-date-picker>
+          </el-col>
+          <el-col :span="10">
+          <div class="screen">
+            <el-input class='find' v-model="searchkeyWord" @keyup.enter.native="find" placeholder="可按司机姓名和订单编号查找" clearable />
+            <el-button class="search" @click="find"><img width="16" height="16" style="margin-left: -8px"
+                  src="../../../public/img/sousuo.png"></el-button>
+          </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <div class="search_btn">
+              <div :class="search == '' ? 'search' : 'searchNo'" class="search_item search_block"
+                @click="searchBtn('')">
+                全部
+              </div>
+              <div :class="search == 1 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(1)">
+                待审核
+              </div>
+              <div :class="search == 2 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(2)">
+                已通过
+              </div>
+              <div :class="search == 3 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(3)">
+                已到账
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+      <el-table @selection-change="handleSelectionChange" :data="tableData" style="width: 98%; margin: 0 auto; border-radius: 10px" height="55.8vh" border highlight-current-row>
+        <el-table-column :selectable="selectable" type="selection" width="55"></el-table-column>
+        <!-- <el-table-column prop="index" label="序号" >
+          <template slot-scope="scope">
+            {{scope.row.$index}}
+          </el-table-column>
+        </el-table-column> -->
+        <el-table-column type="index" width="60"  label="序号" align="center">
+            <template scope="scope">
+                <span>{{scope.$index + 1}}</span>
+                <!-- <span v-else>{{scope.$index}}</span> -->
+            </template>
+        </el-table-column>
+        <el-table-column prop="cargoOwnerName" label="货主/法人" ></el-table-column>
+        <el-table-column prop="accountNumber" label="账号" >
+        </el-table-column>
+        <el-table-column prop="payeeName" label="收款方" />
+        <el-table-column prop="bankDeposit" label="开户行" >
+          <template scope="scope">
+            <span>{{scope.row.bankDeposit}}-{{scope.row.bankDepositBranch}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="bankCard" label="银行卡号" />
+        <el-table-column prop="amountMoney" label="金额（元）" />
+        <el-table-column prop="createDate" label="发起时间" />
+        <el-table-column prop="status" label="状态" >
+          <template scope="scope">
+            <span v-if='scope.row.status!="已到账"'>{{scope.row.status=='审核中'?'待审核':scope.row.status}}</span>
+            <el-popover
+               v-else
+              placement="top-start"
+              title=""
+              width="200"
+              trigger="click">
+              <div v-html='scope.row.content'></div>
+              <span>{{scope.row.status}}</span>
+            </el-popover>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" >
+          <template slot-scope="scope">
+            <el-link v-if='status=="审核中"' target="_blank" type="primary" :underline="false" @click="aduit(scope.row)">通过</el-link>
+          </template>
+        </el-table-column>
+      </el-table>
     </div>
-    <div class="">
-
-    </div>
-    <div class="">
-      发布时间：{{form.issuingDate}}
-    </div>
-    <div class="" v-html="form.releaseContent">
-    </div>
-    <div class="">
-      <div>{{form.issuingAgency}}</div>
-      <div>{{form.updateDate}}</div>
-    </div>
-	</div>
+    <el-pagination :current-page="currentPage" style="text-align: center; margin-top: 10px"
+      :page-size="deptCircularPage.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="deptBudgetTotal"
+      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+  </div>
 </template>
-
 <script>
-	import {
-		seeData
-	} from '@/api/officialWebsiteManagement'
-   import quillEditor from 'vue-quill-editor';
-	export default {
-		data() {
-			return {
-      form:{}
-			}
-		},
-		mounted() {
-			this.id = this.$route.query.id
-			this.getList()
-		},
-		methods: {
-			getList(){
-				this.listLoading = true
-				var _obj = {}
-				_obj.id = this.id
-				seeData(_obj).then(response => {
-						this.form = response.data
-						this.listLoading = false
-					})
-					.catch(() => {
-						this.loading = false
-					})
-			},
-
-		}
-	}
-</script>
+import {
+  getListwithdrawal,
+  batchAduit
+} from '@/api/settlementManagement'
+  export default {
+    data() {
+      return {
+        startDate: '',
+        endDate: '',
+         value1: '',
+        tableData: [],
+        // 分页
+        searchkeyWord: '',
+        currentPage: 1,
+        pageSize: 10,
+        deptBudgetTotal: 0,
+        deptCircularPage: {},
+        multipleSelection:[],
+        search: '',
+        disabled: false,
+      }
+    },
+    mounted() {
+      this.getPassYearFormatDate()
+      this.getList()
+    },
+    methods: {
+      dateChange(e) {
+        this.startDate = e[0]
+        this.endDate = e[1]
+        this.getList()
+      },
+      searchBtn(status){
+        this.search=status
+        this.getList()
+      },
+      // 默认日期
+      getPassYearFormatDate() {
+        var nowDate = new Date()
+        var _date = new Date()
+        var year = nowDate.getFullYear()-1
+        var year1 = _date.getFullYear()
+        var month = nowDate.getMonth() + 1
+        var month1 = _date.getMonth() + 1
+        var strDate = nowDate.getDate()
+        var strDate1 = _date.getDate()
+        if (month >= 1 && month <= 9) {
+          month = '0' + month
+        }
+        if (month1 >= 1 && month1 <= 9) {
+          month1 = '0' + month1
+        }
 
+        if (strDate >= 0 && strDate <= 9) {
+          strDate = '0' + strDate
+        }
+        if (strDate1 >= 0 && strDate1 <= 9) {
+          strDate1 = '0' + strDate1
+        }
+        this.startDate = year + '-' + month + '-' + strDate
+        this.endDate = year1 + '-' + month1 + '-' + strDate1
+        this.value1 = [this.startDate, this.endDate]
+      },
+      selectable(row,index){
+        if(row.status=='已通过'||row.status=='已到账'){
+          return false
+        }else{
+          return true
+        }
+      },
+      batchaduit(){
+        var money=0
+        for (let i = 0; i < this.multipleSelection.length; i++) {
+          money+=this.multipleSelection[i].amountMoney
+          
+        }
+        if(this.multipleSelection.length>0){
+          this.$confirm(`确定给${this.multipleSelection[0].cargoOwnerName}等${this.multipleSelection.length}人打款合计${money}元？`, '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          })
+          .then(() => {
+            this.listLoading = true
+            var _aduit = {}
+            _aduit.hyCargoOwnerCapitalInfos=this.multipleSelection
+            batchAduit(_aduit).then(response => {
+                this.$notify({
+                  title: '成功',
+                  message: '支付成功！',
+                  type: 'success'
+                })
+                this.getList()
+                this.listLoading = false
+              })
+              .catch(() => {
+                this.loading = false
+              })
+          })
+        }else{
+          this.$notify({
+            title: '失败',
+            message: '至少选中一条待审核的条目！',
+            type: 'error'
+          })
+        }
+      },
+      aduit(row){
+        this.$confirm(`确定给${row.cargoOwnerName}打款${row.amountMoney}元？`, '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          })
+          .then(() => {
+            this.listLoading = true
+            var _aduit = {}
+            _aduit.hyCargoOwnerCapitalInfos=this.multipleSelection
+            delFormData(_aduit).then(response => {
+                this.$notify({
+                  title: '成功',
+                  message: '支付成功！',
+                  type: 'success'
+                })
+                this.getList()
+                this.listLoading = false
+              })
+              .catch(() => {
+                this.loading = false
+              })
+          })
+      },
+      handleSelectionChange(val) {
+        this.multipleSelection = val;
+      },
+      getList() {
+        this.loading = true
+        const _obj = {}
+        _obj.currentPage = this.currentPage
+        _obj.pageSize = this.pageSize
+        _obj.searchKeyWord = this.searchkeyWord
+        _obj.startDate =  this.startDate
+        _obj.endDate= this.endDate
+        _obj.searchType = this.search
+        getListwithdrawal(_obj).then(response => {
+          if(response.data.records.length>0){
+            for (let i = 0; i < response.data.records.length; i++) {
+              if(response.data.records[i].status=='已到账'){
+                response.data.records[i].content='流水号：'+response.data.records[i].serialNumber+'<br/>到账时间：'+response.data.records[i].paymentDate
+              }else{
+                response.data.records[i].content=''
+              }
+            }
+          }
+            this.tableData = response.data.records
+            this.deptBudgetTotal = response.data.total
+            this.listLoading = false
+          })
+          .catch(() => {
+            this.loading = false
+          })
+      },
+      find() {
+        this.getList()
+      },
+      look(row) {
+        this.$router.push({
+          path: 'newsLook',
+          query: {
+            id: row.id,
+          }
+        })
+      },
+      handleSizeChange(val) {
+        console.log(`每页 ${val} 条`)
+        this.pageSize = val
+        this.getList()
+      },
+      handleCurrentChange(val) {
+        this.currentPage = val
+        console.log(`当前页: ${val}`)
+        this.getList()
+      }
+    }
+  }
+</script>
 <style lang="scss" scoped>
+  .center {
+    padding: 10px 20px;
+    background: #f5f6f7;
+    height: calc(100vh - 5vh);
+
+    .top_css {
+      padding: 10px;
+
+      .search_btn {
+        display: flex;
+        margin-top: 20px;
+
+        .search_item {
+          text-align: center;
+          font-size: 14px;
+          font-weight: 600;
+          line-height: 40px;
+          width: 112px;
+          height: 40px;
+          background: #f7f8f9;
+          cursor: pointer
+        }
+
+        .searchNo {
+          color: #323233;
+        }
+
+        .search {
+          color: #2f53eb;
+          background: #ffffff;
+        }
+      }
+    }
+
+    .ask_css {
+      position: absolute;
+      margin: 3px 0 0 10px;
+    }
+
+    .center_css {
+      background: #ffffff;
+      border-radius: 1px;
+      margin-top: 10px;
+      padding-bottom: 10px;
+    }
+
+    .screen {
+      display: flex;
+
+      .search {
+        width: 40px;
+        height: 40px;
+        background: #2f53eb;
+        border-radius: 0px 2px 2px 0px;
+        border: 1px solid #DCDFE6;
+        margin-left:-1px;
+      }
+
+      .count_css {
+        width: 80px;
+        text-align: center;
+        line-height: 40px;
+        color: #666666;
+      }
+    }
+
+    .el-button {
+      padding: 10px 20px !important;
+    }
+
+    .center_css {
+
+      ::v-deep .el-table th,
+      ::v-deep .el-table td {
+        text-align: center;
+      }
+
+      .fujian {
+        font-size: 24px;
+        color: #409eff;
+      }
+
+      .warning {
+        font-size: 14px;
+        color: #ed1d1d;
+      }
+    }
+  }
+
+  .car_css {
+    width: 50%;
+    display: inline-block;
+    text-align: center;
+    margin-top: 30px;
+    position: relative;
+
+    .status_css {
+      background: #3AC602;
+      width: 50px;
+      height: 17px;
+      position: absolute;
+      top: 0px;
+      right: 15px;
+      border-radius: 3px;
+    }
+
+    .carno_css {
+      padding: 1px 5px;
+      background-color: #F5F6F7;
+      color: #666666;
+      border-radius: 12px;
+      text-align: center;
+      width: 100px;
+      margin: 10px auto 0;
+    }
+
+    .carborder_css {
+      border: 1px solid #F0F1F2;
+      margin: 15px auto 0;
+      width: 90%;
+    }
+  }
+
+  .tips {
+    color: #999999;
+    font-size: 14px;
+  }
+
+  .car_item {
+    width: 200px;
+    height: 160px;
+    border-radius: 5px;
+  }
+
+  .user {
+    margin-bottom: 20px;
+
+    .id_css {
+      font-size: 14px;
+    }
+
+    .id_css,
+    .name_css {
+      margin: 5px 0;
+      color: #0D0D0D;
+    }
+
+    .pay_name {
+      color: #9D9D9D;
+      font-size: 14px;
+    }
+
+    .name_css {
+      font-size: 16px;
+    }
+
+    .user_item {
+      margin: 25px 0;
+      width: 450px;
+      height: 300px;
+    }
+
+    .border_css {
+      width: 100%;
+      border: 1px solid #F0F1F2;
+    }
+  }
+
+  ::v-deep .el-table--border .el-table__header th {
+    background: #f7f8f9;
+  }
+
+  .btn_css {
+    color: #409EFF;
+    cursor: pointer
+  }
+
+  .btn_css1 {
+    margin-left: -20px;
+  }
+
+  .sign {
+    font-size: 14px;
+    color: red;
+  }
+
+  .form_css {
+    width: 100%;
+    margin: 20px auto 20px;
+
+    ::v-deep .el-checkbox {
+      width: 40%;
+      height: 30px;
+    }
+
+    // ::v-deep .el-dialog__body{
+    // 	padding: 10px 20px;
+    // }
+    ::v-deep .el-dialog__title {
+      font-size: 16px;
+    }
+
+    ::v-deep .el-textarea__inner {
+      background: #F0F1F2;
+    }
+
+    .form_btn {
+      text-align: right;
+      margin-top: 10px;
+    }
+  }
+
+  //发送信息
+  .Info_css {
+    .Info_title {
+      color: #323233;
+      font-size: 16px;
+    }
+
+    .Info_item {
+      margin: 20px 0;
+    }
+
+    .Info_btn {
+      text-align: right;
+      margin-top: 10px;
+    }
+  }
+
+  //附件
+  .file {
+    .fujian_css {
+      width: 631px;
+      display: flex;
+      margin: 0 auto;
+      text-align: center;
+      line-height: 32px;
+      border: 1px solid #F0F1F2;
+      border-right: 0px;
+      border-radius: 2px 0px 0px 2px;
+
+      .fujian_item {
+        cursor: pointer;
+        width: 90px;
+        height: 32px;
+        border-right: 1px solid #F0F1F2;
+      }
+
+      .file_btn {
+        color: #2F53EB;
+        background-color: #CFDBFE;
+      }
+    }
+
+    .file_img {
+      width: 525px;
+      height: 332px;
+      margin: 20px auto;
+    }
+
+    .img_css {
+      width: 525px;
+      height: 332px;
+    }
 
+    .btn {
+      width: 400px;
+      margin: 0 auto;
+    }
+  }
+  .date{
+    margin:0 10px;
+  }
+  .find::v-deep input.el-input__inner{
+    border-radius:0;
+  }
 </style>

src/views/settlementManagement/advancePaymentAndRepaymentSettlement.vue

@@ -1,241 +1,440 @@
 <template>
   <div class="center">
-    <div class="main_css">
-      <div class="formData">
-        <el-form ref="form" :model="form" label-width="80px">
-          <el-form-item label="公告标题">
-            <el-input v-model="form.title" clearable placeholder="请输入标题"></el-input>
-          </el-form-item>
-          <el-form-item label="公告日期">
-            <el-date-picker v-model="form.issuingDate" type="date" value-format="yyyy-MM-dd" style='width: 100%;'
-              placeholder="选择日期时间">
-            </el-date-picker>
-          </el-form-item>
-          <el-form-item label="发布机构">
-            <el-input v-model="form.issuingAgency" clearable placeholder=""></el-input>
-          </el-form-item>
-          <div class="quill-editor">
-            <!-- 图片上传组件辅助，组件内添加v-show=“false”属性，把该组件隐藏起来。-->
-            <el-upload class="avatar-uploader" :action="uploadPath" :show-file-list="false" :on-success="uploadSuccess">
-            </el-upload>
-            <!--富文本编辑器组件-->
-            <quill-editor v-model="form.releaseContent" :content="form.releaseContent" :options="editorOption"
-              @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)"
-              ref="QuillEditor">
-            </quill-editor>
-            <div v-html="form.releaseContent" />
+    <div class="center_css">
+      <div class="top_css">
+        <el-row>
+          <el-col :span="14">
+          <el-date-picker class='date' v-model="value1" value-format="yyyy-MM-dd" @change="dateChange" type="daterange"
+              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
+          </el-date-picker>
+          </el-col>
+          <el-col :span="10">
+          <div class="screen">
+            <el-input class='find' v-model="searchkeyWord" @keyup.enter.native="find" placeholder="可按司机姓名和订单编号查找" clearable />
+            <el-button class="search" @click="find"><img width="16" height="16" style="margin-left: -8px"
+                  src="../../../public/img/sousuo.png"></el-button>
           </div>
-          <!--            <quill-editor v-model="form.releaseContent" res="myQuillEditor" :options="editorOption" id="editor">
-            </quill-editor> -->
-        </el-form>
-      </div>
-      <div class="btn">
-        <el-button @click="submit">提交</el-button>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <div class="search_btn">
+              <div :class="search == '' ? 'search' : 'searchNo'" class="search_item search_block"
+                @click="searchBtn('')">
+                全部
+              </div>
+              <div :class="search == 1 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(1)">
+                待还款
+              </div>
+              <div :class="search == 2 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(2)">
+                已还款
+              </div>
+
+            </div>
+          </el-col>
+        </el-row>
       </div>
+      <el-table :data="tableData" style="width: 98%; margin: 0 auto; border-radius: 10px" height="55.8vh" border highlight-current-row>
+        <!-- <el-table-column prop="index" label="序号" >
+          <template slot-scope="scope">
+            {{scope.row.$index}}
+          </el-table-column>
+        </el-table-column> -->
+        <el-table-column type="index" width="60"  label="序号" align="center">
+            <template scope="scope">
+                <span>{{scope.$index + 1}}</span>
+                <!-- <span v-else>{{scope.$index}}</span> -->
+            </template>
+        </el-table-column>
+        <el-table-column prop="number" label="订单编号" />
+        <el-table-column prop="title" label="货主" />
+         <el-table-column prop="issuingDate" label="账号" />
+        <el-table-column prop="issuingAgency" label="所属企业" />
+        <el-table-column prop="updateDate" label="垫付金额（元）" />
+        <el-table-column prop="updateDate" label="超期金额（元）" />
+        <el-table-column prop="updateDate" label="合计应还（元）" />
+        <el-table-column prop="updateDate" label="已还金额（元）" />
+        <el-table-column prop="updateDate" label="未还金额（元）" />
+        <el-table-column prop="updateDate" label="还款时间" />
+        <el-table-column prop="status" label="状态" >
+          <template scope="scope">
+            <span>{{scope.row.status}}</span>
+          </template>
+        </el-table-column>
+      </el-table>
     </div>
+    <el-pagination :current-page="currentPage" style="text-align: center; margin-top: 10px"
+      :page-size="deptCircularPage.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="deptBudgetTotal"
+      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
   </div>
 </template>
-
 <script>
-  import {
-    seeData,
-    editFormData,
-    uploadPath
-  } from '@/api/officialWebsiteManagement'
-  import quillEditor from 'vue-quill-editor';
-  const toolbarOptions = [
-    ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
-    ['blockquote', 'code-block'], //引用，代码块
-    [{
-      'header': 1
-    }, {
-      'header': 2
-    }], // 几级标题
-    [{
-      'list': 'ordered'
-    }, {
-      'list': 'bullet'
-    }], // 有序列表，无序列表
-    [{
-      'script': 'sub'
-    }, {
-      'script': 'super'
-    }], // 下角标，上角标
-    [{
-      'indent': '-1'
-    }, {
-      'indent': '+1'
-    }], // 缩进
-    [{
-      'direction': 'rtl'
-    }], // 文字输入方向
-    [{
-      'size': ['small', false, 'large', 'huge']
-    }], // 字体大小
-    [{
-      'header': [1, 2, 3, 4, 5, 6, false]
-    }], // 标题
-    [{
-      'color': []
-    }, {
-      'background': []
-    }], // 颜色选择
-    [{
-      'font': ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial']
-    }], // 字体
-    [{
-      'align': []
-    }], // 居中
-    ['clean'], // 清除样式,
-    ['link', 'image'], // 上传图片、上传视频
-  ]
+import {
+  getListwithdrawal
+} from '@/api/settlementManagement'
   export default {
     data() {
       return {
-        uploadPath,
-        editorOption: {
-          modules: {
-            toolbar: {
-              container: toolbarOptions,
-              handlers: {
-                image: function(value) {
-                  if (value) {
-                    // 调用element的图片上传组件
-                    document.querySelector('.avatar-uploader input').click()
-                  } else {
-                    this.quill.format('image', false)
-                  }
-                }
-              }
-            }
-          }
-        },
-        form: {
-          issuingAgency: ''
-        },
-        regulations: {},
-        version: [],
-        count: ""
+        startDate: '',
+        endDate: '',
+         value1: '',
+        tableData: [],
+        // 分页
+        searchkeyWord: '',
+        currentPage: 1,
+        pageSize: 10,
+        deptBudgetTotal: 0,
+        deptCircularPage: {},
+        search: 1,
+        disabled: false,
       }
     },
-    created() {
-      this.form.makeUser = JSON.parse(localStorage.getItem('UserInfo')).deptName
-    },
     mounted() {
-      this.id = this.$route.query.id
+      this.getPassYearFormatDate()
       this.getList()
     },
     methods: {
+      dateChange(e) {
+        this.startDate = e[0]
+        this.endDate = e[1]
+        this.getList()
+      },
+      // 默认日期
+      getPassYearFormatDate() {
+        var nowDate = new Date()
+        var _date = new Date()
+        var year = nowDate.getFullYear()-1
+        var year1 = _date.getFullYear()
+        var month = nowDate.getMonth() + 1
+        var month1 = _date.getMonth() + 1
+        var strDate = nowDate.getDate()
+        var strDate1 = _date.getDate()
+        if (month >= 1 && month <= 9) {
+          month = '0' + month
+        }
+        if (month1 >= 1 && month1 <= 9) {
+          month1 = '0' + month1
+        }
+
+        if (strDate >= 0 && strDate <= 9) {
+          strDate = '0' + strDate
+        }
+        if (strDate1 >= 0 && strDate1 <= 9) {
+          strDate1 = '0' + strDate1
+        }
+        this.startDate = year + '-' + month + '-' + strDate
+        this.endDate = year1 + '-' + month1 + '-' + strDate1
+        this.value1 = [this.startDate, this.endDate]
+      },
       getList() {
-        this.listLoading = true
-        var _obj = {}
-        _obj.id = this.id
-        seeData(_obj).then(response => {
-            this.form = response.data
-            console.log(this.form)
+        this.loading = true
+        const _obj = {}
+        _obj.currentPage = this.currentPage
+        _obj.pageSize = this.pageSize
+        _obj.searchKeyWord = this.searchkeyWord
+        _obj.startDate =  this.startDate
+        _obj.endDate= this.endDate
+        _obj.searchType = '公告'
+        getList(_obj).then(response => {
+            this.tableData = response.data.records
+            this.deptBudgetTotal = response.data.total
             this.listLoading = false
           })
           .catch(() => {
             this.loading = false
           })
       },
-      // 失去焦点
-      onEditorBlur(editor) {},
-      // 获得焦点
-      onEditorFocus(editor) {},
-      // 开始
-      onEditorReady(editor) {},
-      // 值发生变化
-      onEditorChange(editor) {
-        this.form.releaseContent = editor.html;
-        console.log(editor);
+      find() {
+        this.getList()
       },
-      beforeUpload(file) {
-        const isIMAGE = ''
-        file.type === 'image/jpeg' || 'image/gif' || 'image/png' || 'image/jpg'
-        const isLt1M = file.size / 1024 / 1024 < 1
+      handleSizeChange(val) {
+        console.log(`每页 ${val} 条`)
+        this.pageSize = val
+        this.getList()
+      },
+      handleCurrentChange(val) {
+        this.currentPage = val
+        console.log(`当前页: ${val}`)
+        this.getList()
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .center {
+    padding: 10px 20px;
+    background: #f5f6f7;
+    height: calc(100vh - 5vh);
 
-        if (!isIMAGE) {
-          this.$message.error('上传文件只能是图片格式!')
+    .top_css {
+      padding: 10px;
+
+      .search_btn {
+        display: flex;
+        margin-top: 20px;
+
+        .search_item {
+          text-align: center;
+          font-size: 14px;
+          font-weight: 600;
+          line-height: 40px;
+          width: 112px;
+          height: 40px;
+          background: #f7f8f9;
+          cursor: pointer
         }
-        if (!isLt1M) {
-          this.$message.error('上传文件大小不能超过 1MB!')
+
+        .searchNo {
+          color: #323233;
         }
-        return isIMAGE && isLt1M
-      },
-      uploadSuccess(res) {
-        // 获取富文本组件实例
-        let quill = this.$refs.QuillEditor.quill
-        // 如果上传成功
-        if (res.data.errno = 200 && res.data.url) {
-          // 获取光标所在位置
-          let length = quill.getSelection().index;
-          // 插入图片，res为服务器返回的图片链接地址
-          quill.insertEmbed(length, 'image', res.data.url)
-          // 调整光标到最后
-          quill.setSelection(length + 1)
-        } else {
-          // 提示信息，需引入Message
-          this.$message.error('图片插入失败！')
+
+        .search {
+          color: #2f53eb;
+          background: #ffffff;
         }
-      },
+      }
+    }
 
-      submit() {
-        this.listLoading = true
-        this.form.contentType = '公告'
-        this.form.id = this.id
-        delete this.form.createDate
-        delete this.form.createUserId
-        delete this.form.updateDate
-        delete this.form.deleteFlag
-        delete this.form.number
-        editFormData(this.form).then(response => {
-            this.$notify({
-              title: '成功',
-              message: '添加成功！',
-              type: 'success'
-            });
-            this.listLoading = false
-            this.$router.go(-1)
-          })
-          .catch(() => {
-            this.loading = false
-          })
+    .ask_css {
+      position: absolute;
+      margin: 3px 0 0 10px;
+    }
+
+    .center_css {
+      background: #ffffff;
+      border-radius: 1px;
+      margin-top: 10px;
+      padding-bottom: 10px;
+    }
+
+    .screen {
+      display: flex;
+
+      .search {
+        width: 40px;
+        height: 40px;
+        background: #2f53eb;
+        border-radius: 0px 2px 2px 0px;
+        border: 1px solid #DCDFE6;
+        margin-left:-1px;
+      }
+
+      .count_css {
+        width: 80px;
+        text-align: center;
+        line-height: 40px;
+        color: #666666;
+      }
+    }
+
+    .el-button {
+      padding: 10px 20px !important;
+    }
+
+    .center_css {
+
+      ::v-deep .el-table th,
+      ::v-deep .el-table td {
+        text-align: center;
+      }
+
+      .fujian {
+        font-size: 24px;
+        color: #409eff;
+      }
+
+      .warning {
+        font-size: 14px;
+        color: #ed1d1d;
       }
     }
   }
-</script>
 
-<style lang="scss" scoped>
-  .center {
-    background: #F5F6F7;
-    height: calc(100vh - 4.5vh);
-    padding-top: 20px;
+  .car_css {
+    width: 50%;
+    display: inline-block;
+    text-align: center;
+    margin-top: 30px;
+    position: relative;
+
+    .status_css {
+      background: #3AC602;
+      width: 50px;
+      height: 17px;
+      position: absolute;
+      top: 0px;
+      right: 15px;
+      border-radius: 3px;
+    }
 
+    .carno_css {
+      padding: 1px 5px;
+      background-color: #F5F6F7;
+      color: #666666;
+      border-radius: 12px;
+      text-align: center;
+      width: 100px;
+      margin: 10px auto 0;
+    }
+
+    .carborder_css {
+      border: 1px solid #F0F1F2;
+      margin: 15px auto 0;
+      width: 90%;
+    }
   }
 
-  .main_css {
-    width: 96%;
-    height: 90vh;
-    overflow-y: scroll;
-    background: #FFFFFF;
-    margin: 20px auto;
-    padding-top: 20px;
+  .tips {
+    color: #999999;
+    font-size: 14px;
   }
 
-  .formData {
-    width: 50%;
-    margin: 20px 0 0 140px;
+  .car_item {
+    width: 200px;
+    height: 160px;
+    border-radius: 5px;
+  }
+
+  .user {
+    margin-bottom: 20px;
+
+    .id_css {
+      font-size: 14px;
+    }
+
+    .id_css,
+    .name_css {
+      margin: 5px 0;
+      color: #0D0D0D;
+    }
+
+    .pay_name {
+      color: #9D9D9D;
+      font-size: 14px;
+    }
+
+    .name_css {
+      font-size: 16px;
+    }
+
+    .user_item {
+      margin: 25px 0;
+      width: 450px;
+      height: 300px;
+    }
+
+    .border_css {
+      width: 100%;
+      border: 1px solid #F0F1F2;
+    }
+  }
+
+  ::v-deep .el-table--border .el-table__header th {
+    background: #f7f8f9;
+  }
+
+  .btn_css {
+    color: #409EFF;
+    cursor: pointer
+  }
+
+  .btn_css1 {
+    margin-left: -20px;
+  }
+
+  .sign {
+    font-size: 14px;
+    color: red;
+  }
+
+  .form_css {
+    width: 100%;
+    margin: 20px auto 20px;
+
+    ::v-deep .el-checkbox {
+      width: 40%;
+      height: 30px;
+    }
+
+    // ::v-deep .el-dialog__body{
+    // 	padding: 10px 20px;
+    // }
+    ::v-deep .el-dialog__title {
+      font-size: 16px;
+    }
+
+    ::v-deep .el-textarea__inner {
+      background: #F0F1F2;
+    }
+
+    .form_btn {
+      text-align: right;
+      margin-top: 10px;
+    }
   }
 
-  .btn {
-    text-align: right;
-    position: absolute;
-    right: 200px;
-    bottom: 100px;
+  //发送信息
+  .Info_css {
+    .Info_title {
+      color: #323233;
+      font-size: 16px;
+    }
+
+    .Info_item {
+      margin: 20px 0;
+    }
+
+    .Info_btn {
+      text-align: right;
+      margin-top: 10px;
+    }
   }
 
-  .ql-editor {
-    height: 400px !important;
+  //附件
+  .file {
+    .fujian_css {
+      width: 631px;
+      display: flex;
+      margin: 0 auto;
+      text-align: center;
+      line-height: 32px;
+      border: 1px solid #F0F1F2;
+      border-right: 0px;
+      border-radius: 2px 0px 0px 2px;
+
+      .fujian_item {
+        cursor: pointer;
+        width: 90px;
+        height: 32px;
+        border-right: 1px solid #F0F1F2;
+      }
+
+      .file_btn {
+        color: #2F53EB;
+        background-color: #CFDBFE;
+      }
+    }
+
+    .file_img {
+      width: 525px;
+      height: 332px;
+      margin: 20px auto;
+    }
+
+    .img_css {
+      width: 525px;
+      height: 332px;
+    }
+
+    .btn {
+      width: 400px;
+      margin: 0 auto;
+    }
+  }
+  .date{
+    margin:0 10px;
+  }
+  .find::v-deep input.el-input__inner{
+    border-radius:0;
   }
 </style>

src/views/settlementManagement/driverFeeSettlement.vue

@@ -2,29 +2,69 @@
   <div class="center">
     <div class="center_css">
       <div class="top_css">
-            <el-button type="primary" @click="AddRecord">新增</el-button>
-            <el-date-picker class='date' v-model="value1" value-format="yyyy-MM-dd" @change="dateChange" type="daterange"
+        <el-row>
+          <el-col :span="14">
+          <el-button type="primary" @click="deferPay">暂缓支付</el-button>
+          <el-button type="primary" @click="batchpayment">批量付款</el-button>
+          <el-date-picker class='date' v-model="value1" value-format="yyyy-MM-dd" @change="dateChange" type="daterange"
               range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
-            </el-date-picker>
-            <div class="screen">
-              <el-input class='find' v-model="searchkeyWord" @keyup.enter.native="find" placeholder="可按编号和标题内容查找" clearable />
-              <el-button class="search" @click="find"><img width="16" height="16" style="margin-left: -8px"
+          </el-date-picker>
+          </el-col>
+          <el-col :span="10">
+          <div class="screen">
+            <el-input class='find' v-model="searchkeyWord" @keyup.enter.native="find" placeholder="可按司机姓名和订单编号查找" clearable />
+            <el-button class="search" @click="find"><img width="16" height="16" style="margin-left: -8px"
                   src="../../../public/img/sousuo.png"></el-button>
+          </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <div class="search_btn">
+              <div :class="search == '' ? 'search' : 'searchNo'" class="search_item search_block"
+                @click="searchBtn('')">
+                全部
+              </div>
+              <div :class="search == 1 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(1)">
+                待支付
+              </div>
+              <div :class="search == 2 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(2)">
+                已支付
+              </div>
+              <div :class="search == 3 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(3)">
+                暂缓中
+              </div>
             </div>
+          </el-col>
+        </el-row>
       </div>
-      <el-table :data="tableData" style="width: 98%; margin: 0 auto; border-radius: 10px" height="55.8vh" border highlight-current-row>
-        <el-table-column prop="number" label="编号" />
-        <el-table-column prop="title" label="标题" />
-         <el-table-column prop="issuingDate" label="公告日期" />
-        <el-table-column prop="issuingAgency" label="发布人" />
-        <el-table-column prop="updateDate" label="更新日期" />
+      <el-table @selection-change="handleSelectionChange" :data="tableData" style="width: 98%; margin: 0 auto; border-radius: 10px" height="55.8vh" border highlight-current-row>
+        <el-table-column type="selection" width="55"></el-table-column>
+        <!-- <el-table-column prop="index" label="序号" >
+          <template slot-scope="scope">
+            {{scope.row.$index}}
+          </el-table-column>
+        </el-table-column> -->
+        <el-table-column type="index" width="60"  label="序号" align="center">
+            <template scope="scope">
+                <span>{{scope.$index + 1}}</span>
+                <!-- <span v-else>{{scope.$index}}</span> -->
+            </template>
+        </el-table-column>
+        <el-table-column prop="number" label="订单编号" />
+        <el-table-column prop="title" label="司机姓名" />
+         <el-table-column prop="issuingDate" label="开户行" />
+        <el-table-column prop="issuingAgency" label="银行卡号" />
+        <el-table-column prop="updateDate" label="付款类型" />
+        <el-table-column prop="status" label="状态" >
+          <template scope="scope">
+            <span>{{scope.row.status}}</span>
+          </template>
+        </el-table-column>
         <el-table-column label="操作" min-width="300">
           <template slot-scope="scope">
-            <el-link target="_blank" type="primary" :underline="false" @click="look(scope.row)">查看</el-link>
-            <el-divider direction="vertical" />
-            <el-link target="_blank" type="primary" :underline="false" @click="del(scope.row)">删除</el-link>
-            <el-divider direction="vertical" />
-            <el-link target="_blank" type="primary" :underline="false" @click="edit(scope.row)">编辑</el-link>
+            <el-link v-if='scope.row.status!="已付款"' target="_blank" type="primary" :underline="false" @click="payment(scope.row)">付款</el-link>
+           
           </template>
         </el-table-column>
       </el-table>
@@ -35,10 +75,9 @@
   </div>
 </template>
 <script>
-  import {
-    getList,delFormData
-
-  } from '@/api/officialWebsiteManagement'
+import {
+  getListwithdrawal
+} from '@/api/settlementManagement'
   export default {
     data() {
       return {
@@ -52,11 +91,13 @@
         pageSize: 10,
         deptBudgetTotal: 0,
         deptCircularPage: {},
-        search: '',
+        multipleSelection:[],
+        search: 1,
         disabled: false,
       }
     },
     mounted() {
+      this.getPassYearFormatDate()
       this.getList()
     },
     methods: {
@@ -65,31 +106,100 @@
         this.endDate = e[1]
         this.getList()
       },
-      AddRecord() {
-        this.$router.push({
-          path: 'newsAdd'
-        })
+      // 默认日期
+      getPassYearFormatDate() {
+        var nowDate = new Date()
+        var _date = new Date()
+        var year = nowDate.getFullYear()-1
+        var year1 = _date.getFullYear()
+        var month = nowDate.getMonth() + 1
+        var month1 = _date.getMonth() + 1
+        var strDate = nowDate.getDate()
+        var strDate1 = _date.getDate()
+        if (month >= 1 && month <= 9) {
+          month = '0' + month
+        }
+        if (month1 >= 1 && month1 <= 9) {
+          month1 = '0' + month1
+        }
+
+        if (strDate >= 0 && strDate <= 9) {
+          strDate = '0' + strDate
+        }
+        if (strDate1 >= 0 && strDate1 <= 9) {
+          strDate1 = '0' + strDate1
+        }
+        this.startDate = year + '-' + month + '-' + strDate
+        this.endDate = year1 + '-' + month1 + '-' + strDate1
+        this.value1 = [this.startDate, this.endDate]
       },
-      getList() {
-        this.loading = true
-        const _obj = {}
-        _obj.currentPage = this.currentPage
-        _obj.pageSize = this.pageSize
-        _obj.searchKeyWord = this.searchkeyWord
-        _obj.startDate =  this.startDate
-        _obj.endDate= this.endDate
-        _obj.searchType = '公告'
-        getList(_obj).then(response => {
-            this.tableData = response.data.records
-            this.deptBudgetTotal = response.data.total
-            this.listLoading = false
+      deferPay() {
+        if(this.multipleSelection.length>0){
+          this.$confirm('确定暂缓支付选中的条目？', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
           })
-          .catch(() => {
-            this.loading = false
+          .then(() => {
+            this.listLoading = true
+            var _del = {}
+            _del.id = row.id
+            delFormData(_del).then(response => {
+                this.$notify({
+                  title: '成功',
+                  message: '操作成功！',
+                  type: 'success'
+                })
+                this.getList()
+                this.listLoading = false
+              })
+              .catch(() => {
+                this.loading = false
+              })
+          })
+        }else{
+          this.$notify({
+            title: '失败',
+            message: '至少选中一条待支付的条目！',
+            type: 'error'
+          })
+        }
+       
+      },
+      batchpayment(){
+        if(this.multipleSelection.length>0){
+          this.$confirm('确定支付张三等5人运费合计6000.000元？', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          })
+          .then(() => {
+            this.listLoading = true
+            var _del = {}
+            _del.id = row.id
+            delFormData(_del).then(response => {
+                this.$notify({
+                  title: '成功',
+                  message: '支付成功！',
+                  type: 'success'
+                })
+                this.getList()
+                this.listLoading = false
+              })
+              .catch(() => {
+                this.loading = false
+              })
+          })
+        }else{
+          this.$notify({
+            title: '失败',
+            message: '至少选中一条待支付的条目！',
+            type: 'error'
           })
+        }
       },
-      del(row) {
-        this.$confirm('确定要删除该记录吗？', '提示', {
+      payment(row){
+        this.$confirm('确定支付张三等5人运费合计6000.000元？', '提示', {
             confirmButtonText: '确定',
             cancelButtonText: '取消',
             type: 'warning'
@@ -101,7 +211,7 @@
             delFormData(_del).then(response => {
                 this.$notify({
                   title: '成功',
-                  message: '删除成功！',
+                  message: '支付成功！',
                   type: 'success'
                 })
                 this.getList()
@@ -112,6 +222,27 @@
               })
           })
       },
+      handleSelectionChange(val) {
+        this.multipleSelection = val;
+      },
+      getList() {
+        this.loading = true
+        const _obj = {}
+        _obj.currentPage = this.currentPage
+        _obj.pageSize = this.pageSize
+        _obj.searchKeyWord = this.searchkeyWord
+        _obj.startDate =  this.startDate
+        _obj.endDate= this.endDate
+        _obj.searchType = '公告'
+        getList(_obj).then(response => {
+            this.tableData = response.data.records
+            this.deptBudgetTotal = response.data.total
+            this.listLoading = false
+          })
+          .catch(() => {
+            this.loading = false
+          })
+      },
       find() {
         this.getList()
       },
@@ -123,14 +254,6 @@
           }
         })
       },
-      edit(row) {
-        this.$router.push({
-          path: 'newsEdit',
-          query: {
-            id: row.id,
-          }
-        })
-      },
       handleSizeChange(val) {
         console.log(`每页 ${val} 条`)
         this.pageSize = val
@@ -152,7 +275,6 @@
 
     .top_css {
       padding: 10px;
-      display: flex;
 
       .search_btn {
         display: flex;

src/views/settlementManagement/ownerFlow.vue

@@ -1,218 +1,417 @@
 <template>
   <div class="center">
-    <div class="main_css">
-      <div class="formData">
-        <el-form ref="form" :model="form" label-width="80px">
-          <el-form-item label="公示标题">
-            <el-input v-model="form.title" clearable placeholder="请输入标题"></el-input>
-          </el-form-item>
-          <el-form-item label="公示日期">
-            <el-date-picker v-model="form.issuingDate" type="date" value-format="yyyy-MM-dd" style='width: 100%;'
-              placeholder="选择日期时间">
-            </el-date-picker>
-          </el-form-item>
-          <el-form-item label="发布机构">
-            <el-input v-model="form.issuingAgency" clearable placeholder=""></el-input>
-          </el-form-item>
-          <div class="quill-editor">
-            <!-- 图片上传组件辅助，组件内添加v-show=“false”属性，把该组件隐藏起来。-->
-            <el-upload class="avatar-uploader" :action="uploadPath" :show-file-list="false"
-              :on-success="uploadSuccess">
-            </el-upload>
-            <!--富文本编辑器组件-->
-            <quill-editor v-model="form.releaseContent" :content="form.releaseContent" :options="editorOption"
-              @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)"
-              ref="QuillEditor">
-            </quill-editor>
-            <div v-html="form.releaseContent" />
+    <div class="center_css">
+      <div class="top_css">
+        <el-row>
+          <el-col :span="14">
+          <el-date-picker class='date' v-model="value1" value-format="yyyy-MM-dd" @change="dateChange" type="daterange"
+              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
+          </el-date-picker>
+          </el-col>
+          <el-col :span="10">
+          <div class="screen">
+            <el-input class='find' v-model="searchkeyWord" @keyup.enter.native="find" placeholder="可按姓名、账号、企业名称查找" clearable />
+            <el-button class="search" @click="find"><img width="16" height="16" style="margin-left: -8px"
+                  src="../../../public/img/sousuo.png"></el-button>
           </div>
-          <!--            <quill-editor v-model="form.releaseContent" res="myQuillEditor" :options="editorOption" id="editor">
-            </quill-editor> -->
-        </el-form>
-      </div>
-      <div class="btn">
-        <el-button @click="submit">提交</el-button>
+          </el-col>
+        </el-row>
       </div>
+      
+      <el-table :data="tableData" style="width: 98%; margin: 0 auto; border-radius: 10px" height="55.8vh" border highlight-current-row>
+        <!-- <el-table-column prop="index" label="序号" >
+          <template slot-scope="scope">
+            {{scope.row.$index}}
+          </el-table-column>
+        </el-table-column> -->
+        <el-table-column type="index" width="60"  label="序号" align="center">
+            <template scope="scope">
+                <span>{{scope.$index + 1}}</span>
+                <!-- <span v-else>{{scope.$index}}</span> -->
+            </template>
+        </el-table-column>
+        <el-table-column prop="number" label="流水号" />
+        <el-table-column prop="title" label="个人/法人" />
+         <el-table-column prop="issuingDate" label="账号" />
+        <el-table-column prop="issuingAgency" label="银行卡号" />
+        <el-table-column prop="issuingAgency" label="所属企业" />
+        <el-table-column prop="updateDate" label="金额（元）" />
+        <el-table-column prop="updateDate" label="流向" />
+        <el-table-column prop="updateDate" label="时间" />
+      </el-table>
     </div>
+    <el-pagination :current-page="currentPage" style="text-align: center; margin-top: 10px"
+      :page-size="deptCircularPage.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="deptBudgetTotal"
+      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
   </div>
 </template>
-
 <script>
-  import {
-    addFormData,
-    uploadPath
-  } from '@/api/officialWebsiteManagement'
-  import quillEditor from 'vue-quill-editor';
-  const toolbarOptions = [
-    ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
-    ['blockquote', 'code-block'], //引用，代码块
-    [{
-      'header': 1
-    }, {
-      'header': 2
-    }], // 几级标题
-    [{
-      'list': 'ordered'
-    }, {
-      'list': 'bullet'
-    }], // 有序列表，无序列表
-    [{
-      'script': 'sub'
-    }, {
-      'script': 'super'
-    }], // 下角标，上角标
-    [{
-      'indent': '-1'
-    }, {
-      'indent': '+1'
-    }], // 缩进
-    [{
-      'direction': 'rtl'
-    }], // 文字输入方向
-    [{
-      'size': ['small', false, 'large', 'huge']
-    }], // 字体大小
-    [{
-      'header': [1, 2, 3, 4, 5, 6, false]
-    }], // 标题
-    [{
-      'color': []
-    }, {
-      'background': []
-    }], // 颜色选择
-    [{
-      'font': ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial']
-    }], // 字体
-    [{
-      'align': []
-    }], // 居中
-    ['clean'], // 清除样式,
-    ['link', 'image'], // 上传图片、上传视频
-  ]
+import {
+  getListwithdrawal
+} from '@/api/settlementManagement'
   export default {
     data() {
       return {
-        uploadPath,
-        editorOption: {
-          modules: {
-            toolbar: {
-              container: toolbarOptions,
-              handlers: {
-                image: function(value) {
-                  if (value) {
-                    // 调用element的图片上传组件
-                    document.querySelector('.avatar-uploader input').click()
-                  } else {
-                    this.quill.format('image', false)
-                  }
-                }
-              }
-            }
-          }
-        },
-        form: {
-          issuingAgency: '畅运通信息部'
-        },
-        regulations: {},
-        version: [],
-        count: ""
+        startDate: '',
+        endDate: '',
+         value1: '',
+        tableData: [],
+        // 分页
+        searchkeyWord: '',
+        currentPage: 1,
+        pageSize: 10,
+        deptBudgetTotal: 0,
+        deptCircularPage: {},
+        search: '',
+        disabled: false,
       }
     },
-    created() {
-      this.form.makeUser = JSON.parse(localStorage.getItem('UserInfo')).deptName
+    mounted() {
+      this.getPassYearFormatDate()
+      this.getList()
     },
     methods: {
-      // 失去焦点
-      onEditorBlur(editor) {},
-      // 获得焦点
-      onEditorFocus(editor) {},
-      // 开始
-      onEditorReady(editor) {},
-      // 值发生变化
-      onEditorChange(editor) {
-        this.form.releaseContent = editor.html;
-        console.log(editor);
+      dateChange(e) {
+        this.startDate = e[0]
+        this.endDate = e[1]
+        this.getList()
       },
-      beforeUpload(file) {
-        const isIMAGE =''
-          file.type === 'image/jpeg' || 'image/gif' || 'image/png' || 'image/jpg'
-        const isLt1M = file.size / 1024 / 1024 < 1
-
-        if (!isIMAGE) {
-          this.$message.error('上传文件只能是图片格式!')
+      // 默认日期
+      getPassYearFormatDate() {
+        var nowDate = new Date()
+        var _date = new Date()
+        var year = nowDate.getFullYear()-1
+        var year1 = _date.getFullYear()
+        var month = nowDate.getMonth() + 1
+        var month1 = _date.getMonth() + 1
+        var strDate = nowDate.getDate()
+        var strDate1 = _date.getDate()
+        if (month >= 1 && month <= 9) {
+          month = '0' + month
         }
-        if (!isLt1M) {
-          this.$message.error('上传文件大小不能超过 1MB!')
+        if (month1 >= 1 && month1 <= 9) {
+          month1 = '0' + month1
         }
-        return isIMAGE && isLt1M
-      },
-      uploadSuccess(res) {
-        // 获取富文本组件实例
-        let quill = this.$refs.QuillEditor.quill
-        // 如果上传成功
-        if (res.data.errno = 200 && res.data.url) {
-          // 获取光标所在位置
-          let length = quill.getSelection().index;
-          // 插入图片，res为服务器返回的图片链接地址
-          quill.insertEmbed(length, 'image', res.data.url)
-          // 调整光标到最后
-          quill.setSelection(length + 1)
-        } else {
-          // 提示信息，需引入Message
-          this.$message.error('图片插入失败！')
+
+        if (strDate >= 0 && strDate <= 9) {
+          strDate = '0' + strDate
+        }
+        if (strDate1 >= 0 && strDate1 <= 9) {
+          strDate1 = '0' + strDate1
         }
+        this.startDate = year + '-' + month + '-' + strDate
+        this.endDate = year1 + '-' + month1 + '-' + strDate1
+        this.value1 = [this.startDate, this.endDate]
       },
-
-      submit() {
-        this.listLoading = true
-        this.form.contentType = '公示'
-        addFormData(this.form).then(response => {
-            this.$notify({
-              title: '成功',
-              message: '添加成功！',
-              type: 'success'
-            });
+      getList() {
+        this.loading = true
+        const _obj = {}
+        _obj.currentPage = this.currentPage
+        _obj.pageSize = this.pageSize
+        _obj.searchKeyWord = this.searchkeyWord
+        _obj.startDate =  this.startDate
+        _obj.endDate= this.endDate
+        _obj.searchType = '公告'
+        getList(_obj).then(response => {
+            this.tableData = response.data.records
+            this.deptBudgetTotal = response.data.total
             this.listLoading = false
-            this.$router.go(-1)
           })
           .catch(() => {
             this.loading = false
           })
+      },
+      find() {
+        this.getList()
+      },
+      handleSizeChange(val) {
+        console.log(`每页 ${val} 条`)
+        this.pageSize = val
+        this.getList()
+      },
+      handleCurrentChange(val) {
+        this.currentPage = val
+        console.log(`当前页: ${val}`)
+        this.getList()
       }
     }
   }
 </script>
-
 <style lang="scss" scoped>
   .center {
-    background: #F5F6F7;
-    height: calc(100vh - 4.5vh);
-    padding-top: 20px;
+    padding: 10px 20px;
+    background: #f5f6f7;
+    height: calc(100vh - 5vh);
 
-  }
+    .top_css {
+      padding: 10px;
+
+      .search_btn {
+        display: flex;
+        margin-top: 20px;
+
+        .search_item {
+          text-align: center;
+          font-size: 14px;
+          font-weight: 600;
+          line-height: 40px;
+          width: 112px;
+          height: 40px;
+          background: #f7f8f9;
+          cursor: pointer
+        }
+
+        .searchNo {
+          color: #323233;
+        }
+
+        .search {
+          color: #2f53eb;
+          background: #ffffff;
+        }
+      }
+    }
+
+    .ask_css {
+      position: absolute;
+      margin: 3px 0 0 10px;
+    }
+
+    .center_css {
+      background: #ffffff;
+      border-radius: 1px;
+      margin-top: 10px;
+      padding-bottom: 10px;
+    }
 
-  .main_css {
-    width: 96%;
-    height: 90vh;
-    overflow-y: scroll;
-    background: #FFFFFF;
-    margin: 20px auto;
-    padding-top: 20px;
+    .screen {
+      display: flex;
+
+      .search {
+        width: 40px;
+        height: 40px;
+        background: #2f53eb;
+        border-radius: 0px 2px 2px 0px;
+        border: 1px solid #DCDFE6;
+        margin-left:-1px;
+      }
+
+      .count_css {
+        width: 80px;
+        text-align: center;
+        line-height: 40px;
+        color: #666666;
+      }
+    }
+
+    .el-button {
+      padding: 10px 20px !important;
+    }
+
+    .center_css {
+
+      ::v-deep .el-table th,
+      ::v-deep .el-table td {
+        text-align: center;
+      }
+
+      .fujian {
+        font-size: 24px;
+        color: #409eff;
+      }
+
+      .warning {
+        font-size: 14px;
+        color: #ed1d1d;
+      }
+    }
   }
 
-  .formData {
+  .car_css {
     width: 50%;
-    margin: 20px 0 0 140px;
+    display: inline-block;
+    text-align: center;
+    margin-top: 30px;
+    position: relative;
+
+    .status_css {
+      background: #3AC602;
+      width: 50px;
+      height: 17px;
+      position: absolute;
+      top: 0px;
+      right: 15px;
+      border-radius: 3px;
+    }
+
+    .carno_css {
+      padding: 1px 5px;
+      background-color: #F5F6F7;
+      color: #666666;
+      border-radius: 12px;
+      text-align: center;
+      width: 100px;
+      margin: 10px auto 0;
+    }
+
+    .carborder_css {
+      border: 1px solid #F0F1F2;
+      margin: 15px auto 0;
+      width: 90%;
+    }
+  }
+
+  .tips {
+    color: #999999;
+    font-size: 14px;
+  }
+
+  .car_item {
+    width: 200px;
+    height: 160px;
+    border-radius: 5px;
   }
 
-  .btn {
-    text-align: right;
-    position: absolute;
-    right: 200px;
-    bottom: 100px;
+  .user {
+    margin-bottom: 20px;
+
+    .id_css {
+      font-size: 14px;
+    }
+
+    .id_css,
+    .name_css {
+      margin: 5px 0;
+      color: #0D0D0D;
+    }
+
+    .pay_name {
+      color: #9D9D9D;
+      font-size: 14px;
+    }
+
+    .name_css {
+      font-size: 16px;
+    }
+
+    .user_item {
+      margin: 25px 0;
+      width: 450px;
+      height: 300px;
+    }
+
+    .border_css {
+      width: 100%;
+      border: 1px solid #F0F1F2;
+    }
+  }
+
+  ::v-deep .el-table--border .el-table__header th {
+    background: #f7f8f9;
+  }
+
+  .btn_css {
+    color: #409EFF;
+    cursor: pointer
+  }
+
+  .btn_css1 {
+    margin-left: -20px;
+  }
+
+  .sign {
+    font-size: 14px;
+    color: red;
+  }
+
+  .form_css {
+    width: 100%;
+    margin: 20px auto 20px;
+
+    ::v-deep .el-checkbox {
+      width: 40%;
+      height: 30px;
+    }
+
+    // ::v-deep .el-dialog__body{
+    // 	padding: 10px 20px;
+    // }
+    ::v-deep .el-dialog__title {
+      font-size: 16px;
+    }
+
+    ::v-deep .el-textarea__inner {
+      background: #F0F1F2;
+    }
+
+    .form_btn {
+      text-align: right;
+      margin-top: 10px;
+    }
   }
 
-  .ql-editor {
-    height: 400px !important;
+  //发送信息
+  .Info_css {
+    .Info_title {
+      color: #323233;
+      font-size: 16px;
+    }
+
+    .Info_item {
+      margin: 20px 0;
+    }
+
+    .Info_btn {
+      text-align: right;
+      margin-top: 10px;
+    }
+  }
+
+  //附件
+  .file {
+    .fujian_css {
+      width: 631px;
+      display: flex;
+      margin: 0 auto;
+      text-align: center;
+      line-height: 32px;
+      border: 1px solid #F0F1F2;
+      border-right: 0px;
+      border-radius: 2px 0px 0px 2px;
+
+      .fujian_item {
+        cursor: pointer;
+        width: 90px;
+        height: 32px;
+        border-right: 1px solid #F0F1F2;
+      }
+
+      .file_btn {
+        color: #2F53EB;
+        background-color: #CFDBFE;
+      }
+    }
+
+    .file_img {
+      width: 525px;
+      height: 332px;
+      margin: 20px auto;
+    }
+
+    .img_css {
+      width: 525px;
+      height: 332px;
+    }
+
+    .btn {
+      width: 400px;
+      margin: 0 auto;
+    }
+  }
+  .date{
+    margin:0 10px;
+  }
+  .find::v-deep input.el-input__inner{
+    border-radius:0;
   }
 </style>

src/views/settlementManagement/statisticalReport.vue

@@ -1,218 +1,312 @@
 <template>
-  <div class="center">
-    <div class="main_css">
-      <div class="formData">
-        <el-form ref="form" :model="form" label-width="80px">
-          <el-form-item label="公示标题">
-            <el-input v-model="form.title" clearable placeholder="请输入标题"></el-input>
-          </el-form-item>
-          <el-form-item label="公示日期">
-            <el-date-picker v-model="form.issuingDate" type="date" value-format="yyyy-MM-dd" style='width: 100%;'
-              placeholder="选择日期时间">
-            </el-date-picker>
-          </el-form-item>
-          <el-form-item label="发布机构">
-            <el-input v-model="form.issuingAgency" clearable placeholder=""></el-input>
-          </el-form-item>
-          <div class="quill-editor">
-            <!-- 图片上传组件辅助，组件内添加v-show=“false”属性，把该组件隐藏起来。-->
-            <el-upload class="avatar-uploader" :action="uploadPath" :show-file-list="false"
-              :on-success="uploadSuccess">
-            </el-upload>
-            <!--富文本编辑器组件-->
-            <quill-editor v-model="form.releaseContent" :content="form.releaseContent" :options="editorOption"
-              @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)"
-              ref="QuillEditor">
-            </quill-editor>
-            <div v-html="form.releaseContent" />
+  <div class="content">
+    <div class="echarts">
+      <div class='echarts1'>
+        <div style='position:absolute;z-index:999;right:0;width:100%;'>
+          <div class='title'>毛利润（万元）</div>
+          <div class="right" style='position:absolute;right:4%;'>
+            <el-button :class='{"active":status==1}' @click='statuschange(1)' type="text">按天</el-button>
+            <el-button :class='{"active":status==2}' @click='statuschange(2)' type="text">按月</el-button>
+            <el-button :class='{"active":status==3}' @click='statuschange(3)' type="text">按年</el-button>
           </div>
-          <!--            <quill-editor v-model="form.releaseContent" res="myQuillEditor" :options="editorOption" id="editor">
-            </quill-editor> -->
-        </el-form>
+          
+          <!-- <el-button type="primary">按天</el-button>
+          <el-button type="primary">按月</el-button>
+          <el-button type="primary">按年</el-button> -->
+        </div>
+        <div style="width: 100%;height: 500px;" id="container"></div>
       </div>
-      <div class="btn">
-        <el-button @click="submit">提交</el-button>
+      <div class='table'>
+        <div calss='table-top' style='width:95%;margin:10px auto 30px;display:flex;justify-content: space-between;align-items: center;'>
+          <el-date-picker v-model="value1" type="year" placeholder="选择年"></el-date-picker>
+          <div>
+            合计
+            <span class="svg-container">
+              <svg-icon @click='showchange' :icon-class="show?'eye':'eye-open'" />
+            </span>
+          </div>
+          
+        </div>
+        <el-form :inline="true" class="demo-form-inline">
+          <div class='up' style='width:95%;margin:0 auto;'>
+            <el-form-item label="上半年">
+              利润（万元）
+            </el-form-item>
+            <el-form-item label="1月">
+              利润（万元）
+            </el-form-item>
+            <el-form-item label="2月">
+              利润（万元）
+            </el-form-item>
+            <el-form-item label="3月">
+              利润（万元）
+            </el-form-item>
+            <el-form-item label="4月">
+              利润（万元）
+            </el-form-item>
+            <el-form-item label="5月">
+              利润（万元）
+            </el-form-item>
+            <el-form-item label="6月">
+              利润（万元）
+            </el-form-item>
+          </div>
+          
+          <div class='down' style='width:95%;margin:0 auto;'>
+            <el-form-item label="下半年">
+              利润（万元）
+            </el-form-item>
+            <el-form-item label="7月">
+              利润（万元）
+            </el-form-item>
+            <el-form-item label="8月">
+              利润（万元）
+            </el-form-item>
+            <el-form-item label="9月">
+              利润（万元）
+            </el-form-item>
+            <el-form-item label="10月">
+              利润（万元）
+            </el-form-item>
+            <el-form-item label="11月">
+              利润（万元）
+            </el-form-item>
+            <el-form-item label="12月">
+              利润（万元）
+            </el-form-item>
+          </div>
+      </el-form>
+      </div>
+      <div class='echarts2'>
+        <div class='title'>待结算</div>
+        <div style="width: 100%;height: 600px;" id="container2"></div>
       </div>
     </div>
   </div>
 </template>
-
 <script>
-  import {
-    addFormData,
-    uploadPath
-  } from '@/api/officialWebsiteManagement'
-  import quillEditor from 'vue-quill-editor';
-  const toolbarOptions = [
-    ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
-    ['blockquote', 'code-block'], //引用，代码块
-    [{
-      'header': 1
-    }, {
-      'header': 2
-    }], // 几级标题
-    [{
-      'list': 'ordered'
-    }, {
-      'list': 'bullet'
-    }], // 有序列表，无序列表
-    [{
-      'script': 'sub'
-    }, {
-      'script': 'super'
-    }], // 下角标，上角标
-    [{
-      'indent': '-1'
-    }, {
-      'indent': '+1'
-    }], // 缩进
-    [{
-      'direction': 'rtl'
-    }], // 文字输入方向
-    [{
-      'size': ['small', false, 'large', 'huge']
-    }], // 字体大小
-    [{
-      'header': [1, 2, 3, 4, 5, 6, false]
-    }], // 标题
-    [{
-      'color': []
-    }, {
-      'background': []
-    }], // 颜色选择
-    [{
-      'font': ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial']
-    }], // 字体
-    [{
-      'align': []
-    }], // 居中
-    ['clean'], // 清除样式,
-    ['link', 'image'], // 上传图片、上传视频
-  ]
-  export default {
-    data() {
-      return {
-        uploadPath,
-        editorOption: {
-          modules: {
-            toolbar: {
-              container: toolbarOptions,
-              handlers: {
-                image: function(value) {
-                  if (value) {
-                    // 调用element的图片上传组件
-                    document.querySelector('.avatar-uploader input').click()
-                  } else {
-                    this.quill.format('image', false)
-                  }
-                }
-              }
-            }
+import {
+  getListwithdrawal
+} from '@/api/settlementManagement'
+export default {
+  name: 'hello',
+  data () {
+    return {
+      formInline:{},
+      status:1,
+      value1:'',
+      show:true
+    }
+  },
+  mounted(){//⭐在mounted中定义
+    this.drawLine();
+    this.drawBar()
+  },
+  methods: {
+    statuschange(status){
+      this.status=status
+    },
+    showchange(){
+      console.log(11111)
+    },
+    drawLine(){
+      // 基于准备好的dom，初始化echarts实例
+      console.log(this.$echarts)
+      var echart = this.$echarts.init(document.getElementById("container"))//⭐注意是id选择器
+		  var option = {
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          axisLine:{
+            show:false
+          },
+          axisTick:{
+            show:false
+          },
+          axisLabel:{
+            color:'#9E9E9E'
           }
         },
-        form: {
-          issuingAgency: '畅运通信息部'
+        yAxis: {
+          type: 'value',
+          // name:'毛利润（万元）',
+          nameTextStyle:{
+            fontWeight:'700',
+            fontSize:'16'
+          },
+          axisLine:{
+            show:false
+          },
+          axisTick:{
+            show:false
+          },
+          axisLabel:{
+            color:'#9E9E9E'
+          }
         },
-        regulations: {},
-        version: [],
-        count: ""
-      }
-    },
-    created() {
-      this.form.makeUser = JSON.parse(localStorage.getItem('UserInfo')).deptName
+        series: [
+          {
+            
+            lineStyle: {
+              color:'#2F53EB'
+            },
+            data: [150, 230, 224, 218, 135, 147, 260],
+            type: 'line',
+            areaStyle: {
+              color:'rgba(207, 219, 254, 1)'
+            }
+          }
+        ],
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+      };
+      echart.setOption(option);
     },
-    methods: {
-      // 失去焦点
-      onEditorBlur(editor) {},
-      // 获得焦点
-      onEditorFocus(editor) {},
-      // 开始
-      onEditorReady(editor) {},
-      // 值发生变化
-      onEditorChange(editor) {
-        this.form.releaseContent = editor.html;
-        console.log(editor);
-      },
-      beforeUpload(file) {
-        const isIMAGE =''
-          file.type === 'image/jpeg' || 'image/gif' || 'image/png' || 'image/jpg'
-        const isLt1M = file.size / 1024 / 1024 < 1
-
-        if (!isIMAGE) {
-          this.$message.error('上传文件只能是图片格式!')
-        }
-        if (!isLt1M) {
-          this.$message.error('上传文件大小不能超过 1MB!')
-        }
-        return isIMAGE && isLt1M
-      },
-      uploadSuccess(res) {
-        // 获取富文本组件实例
-        let quill = this.$refs.QuillEditor.quill
-        // 如果上传成功
-        if (res.data.errno = 200 && res.data.url) {
-          // 获取光标所在位置
-          let length = quill.getSelection().index;
-          // 插入图片，res为服务器返回的图片链接地址
-          quill.insertEmbed(length, 'image', res.data.url)
-          // 调整光标到最后
-          quill.setSelection(length + 1)
-        } else {
-          // 提示信息，需引入Message
-          this.$message.error('图片插入失败！')
-        }
-      },
+    drawBar(){
+      var echart1 = this.$echarts.init(document.getElementById("container2"))//⭐注意是id选择器
+		  var option1 = {
+        // title: {
+        //   text: '待结算'
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '5%',
+          containLabel: true
+        },
+        xAxis: {           
+          // name: '金额（万元）',
+          // nameLocation:'center',
+          // nameGap:-45,
+          // nameTextStyle:{
+          //   padding: [20, 4, 4, 4]
+          // },
+          type: 'value',
+          boundaryGap: [0, 0.01],
+          axisLine:{
+            show:true,
+            lineStyle:{
+              color:'#D9D9D9'
+            }
+          },
+          axisTick:{
+            show:true,
+            lineStyle:{
+              color:'#D9D9D9'
+            }
+          }
+        },
+        yAxis: {
+          type: 'category',
+          data: ['待付运费', '提现', '待收款', '待开发票'],
+          axisLine:{
+            show:false,
+            
+          },
+          axisTick:{
+            show:false
+          }
+        },
+        series: [
+          {
 
-      submit() {
-        this.listLoading = true
-        this.form.contentType = '公示'
-        addFormData(this.form).then(response => {
-            this.$notify({
-              title: '成功',
-              message: '添加成功！',
-              type: 'success'
-            });
-            this.listLoading = false
-            this.$router.go(-1)
-          })
-          .catch(() => {
-            this.loading = false
-          })
-      }
+            type: 'bar',
+            data: [18203, 23489, 29034, 104970],
+            itemStyle: {
+              normal: {
+                // 每根柱子颜色设置
+                color: function(params) {
+                  const colorList = [
+                    '#2A50ED',
+                    '#666DFF',
+                    '#4EBCBC',
+                    '#4D9BEE',
+                    '#91c7ae',
+                    '#749f83',
+                    '#ca8622',
+                    '#bda29a',
+                    '#6e7074',
+                    '#546570',
+                    '#c4ccd3',
+                    '#4BABDE',
+                    '#FFDE76',
+                    '#E43C59',
+                    '#37A2DA'
+                  ]
+                  return colorList[params.dataIndex]
+                }
+              }
+            }
+          },
+        ]
+      };
+      echart1.setOption(option1);
     }
   }
-</script>
+}
 
+</script>
 <style lang="scss" scoped>
-  .center {
-    background: #F5F6F7;
-    height: calc(100vh - 4.5vh);
-    padding-top: 20px;
-
+.el-form.demo-form-inline::v-deep .el-form-item{
+  width:14.28%;
+  margin:0;
+}
+.el-form.demo-form-inline::v-deep .el-form-item .el-form-item__label{
+    display:block;
+    text-align:center;
+    background:#F7F8F9;
+    border:1px solid #F0F1F2;
   }
-
-  .main_css {
-    width: 96%;
-    height: 90vh;
-    overflow-y: scroll;
-    background: #FFFFFF;
-    margin: 20px auto;
-    padding-top: 20px;
+  .el-form.demo-form-inline::v-deep .el-form-item .el-form-item__content{
+    display:block;
+    text-align:center;
   }
-
-  .formData {
-    width: 50%;
-    margin: 20px 0 0 140px;
+  .el-form.demo-form-inline::v-deep .up .el-form-item .el-form-item__content{
+    border-left:1px solid #F0F1F2;
   }
-
-  .btn {
-    text-align: right;
-    position: absolute;
-    right: 200px;
-    bottom: 100px;
+  .el-form.demo-form-inline::v-deep .up .el-form-item .el-form-item__content:last-child,
+  .el-form.demo-form-inline::v-deep .down .el-form-item .el-form-item__content:last-child{
+    border-right:1px solid #F0F1F2;
   }
-
-  .ql-editor {
-    height: 400px !important;
+  .el-form.demo-form-inline::v-deep .down .el-form-item .el-form-item__content{
+    border-left:1px solid #F0F1F2;
+    border-bottom:1px solid #F0F1F2;
+  }
+  .echarts1,.echarts2{
+    position:relative;width:90%;margin:0 auto; background:#fff;
+  }
+  .content{
+    background:#F5F6F7;
+    padding:20px 0;
+  }
+  .table{
+    margin:20px auto;
+    width:90%;
+    background:#fff;
+    padding:20px;
+  }
+  .el-button--text{
+    color:#000;
+  }
+  .el-button--text.active{
+    color:#2F53EB;
+  }
+  .title{
+    font-size:16px;
+    font-weight:600;
+    padding:20px 0 20px 3%;
+    position:absolute;
   }
-</style>
+</style>